diff --git a/public/img/tutorial/ch1pg1.png b/public/img/tutorial/ch1pg1.png new file mode 100644 index 00000000..5076fb47 Binary files /dev/null and b/public/img/tutorial/ch1pg1.png differ diff --git a/public/img/tutorial/ch1pg10.png b/public/img/tutorial/ch1pg10.png new file mode 100644 index 00000000..9cae3530 Binary files /dev/null and b/public/img/tutorial/ch1pg10.png differ diff --git a/public/img/tutorial/ch1pg2.png b/public/img/tutorial/ch1pg2.png new file mode 100644 index 00000000..52fbcb31 Binary files /dev/null and b/public/img/tutorial/ch1pg2.png differ diff --git a/public/img/tutorial/ch1pg3.png b/public/img/tutorial/ch1pg3.png new file mode 100644 index 00000000..1aea7260 Binary files /dev/null and b/public/img/tutorial/ch1pg3.png differ diff --git a/public/img/tutorial/ch1pg4.png b/public/img/tutorial/ch1pg4.png new file mode 100644 index 00000000..6a4214ff Binary files /dev/null and b/public/img/tutorial/ch1pg4.png differ diff --git a/public/img/tutorial/ch1pg5.png b/public/img/tutorial/ch1pg5.png new file mode 100644 index 00000000..951d9760 Binary files /dev/null and b/public/img/tutorial/ch1pg5.png differ diff --git a/public/img/tutorial/ch1pg6.png b/public/img/tutorial/ch1pg6.png new file mode 100644 index 00000000..71ef3165 Binary files /dev/null and b/public/img/tutorial/ch1pg6.png differ diff --git a/public/img/tutorial/ch1pg7.png b/public/img/tutorial/ch1pg7.png new file mode 100644 index 00000000..c6eeafb1 Binary files /dev/null and b/public/img/tutorial/ch1pg7.png differ diff --git a/public/img/tutorial/ch1pg8.png b/public/img/tutorial/ch1pg8.png new file mode 100644 index 00000000..098d2db2 Binary files /dev/null and b/public/img/tutorial/ch1pg8.png differ diff --git a/public/img/tutorial/ch1pg9.png b/public/img/tutorial/ch1pg9.png new file mode 100644 index 00000000..3bf30231 Binary files /dev/null and b/public/img/tutorial/ch1pg9.png differ diff --git a/sass/_project-sass/_project-Tutorial.scss b/sass/_project-sass/_project-Tutorial.scss index 32060390..39dcbbff 100644 --- a/sass/_project-sass/_project-Tutorial.scss +++ b/sass/_project-sass/_project-Tutorial.scss @@ -3,6 +3,9 @@ // ---------------------------------------------------------------- .tutorial { + p { + font-size: 1em; + } .interact { textarea.editor { height: 350px!important; @@ -34,6 +37,7 @@ } .comic { position: relative; + background-repeat: no-repeat; } .dialogue { width: 180px; diff --git a/views/tutorial/html/1.erb b/views/tutorial/html/1.erb index 672c5d0e..35f421ab 100644 --- a/views/tutorial/html/1.erb +++ b/views/tutorial/html/1.erb @@ -1,25 +1,20 @@ -
-
- All you need to build your first site is a computer language called HTML. +
+
+ Oh, a new student!
-
- And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save! +
+ Ahem, please come in!
-
- You'll see the results of your site here. +
+ I'm Penelope, and I'll be your teacher.
-
- Make sure to check the green boxes below for important bonus info! +
+ What's your name? +
+
+ + Submit
-
- -
-

Opening and Closing Tags

-

HTML is just a bunch of tags. There's usually an opening tag and a closing tag, with content between them like this:

- - 
tag Content visible on your site /tag
- -

Don't worry if this seems confusing - you'll get the hang of it after a few more examples! If you ever get stuck, click the Help link below.

diff --git a/views/tutorial/html/2.erb b/views/tutorial/html/2.erb index fc21fa29..d961736c 100644 --- a/views/tutorial/html/2.erb +++ b/views/tutorial/html/2.erb @@ -1,15 +1,15 @@ -
-
+
+
All you need to build your first site is a computer language called HTML.
-
+
And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save!
-
- You'll see the results of your site here. +
+ You'll see the results here. + Make sure to check the green boxes below for important bonus info!
- Make sure to check the green boxes below for important bonus info!
diff --git a/views/tutorial/html/3.erb b/views/tutorial/html/3.erb new file mode 100644 index 00000000..2fc4715b --- /dev/null +++ b/views/tutorial/html/3.erb @@ -0,0 +1,34 @@ +
+
+ Great! + Check out your site at victoria.neocities.org. + You did it! +
+
+ But... hm... it needs a little something more. Let's make your name a header by putting header tags around it. +
+
+ Change the text to this: [h1]Victoria's Website[/h1] + and click save. +
+
+ +
+

Heading Tags

+

Here are all the header tags, for all your needs—from the most important to the least!

+ + 
+    

+    

+    

+    

+    

+    

+
+
+ + diff --git a/views/tutorial/html/4.erb b/views/tutorial/html/4.erb new file mode 100644 index 00000000..6061159e --- /dev/null +++ b/views/tutorial/html/4.erb @@ -0,0 +1,15 @@ +
+
+ Now let's add a line of text below—perhaps "Welcome to my website" or your favorite quote. +
+
+ To make a paragraph, surround your text with the [p] tag. So it should look something like + [p]Hello![/p] +
+
+ + diff --git a/views/tutorial/html/5.erb b/views/tutorial/html/5.erb new file mode 100644 index 00000000..4a381dcb --- /dev/null +++ b/views/tutorial/html/5.erb @@ -0,0 +1,31 @@ +
+
+ You're writing HTML! You're doing it! Everything you need to know is just another tag! +
+
+

For example, links look like this:

+ +

[a href="http://neocities.org"]Check out Neocities![/a]

+ +

Add a link to your favorite site to the end of the paragraph, right before the [/p] closing tag!

+
+
+ +
+

Nesting

+

Tags always need to be nested properly, like Russian dolls. So this is okay: +

+
Welcome! Link!

+
+But this isn't!
+
+
Welcome! Link!

+
+

+
+ + diff --git a/views/tutorial/html/6.erb b/views/tutorial/html/6.erb new file mode 100644 index 00000000..ac85d843 --- /dev/null +++ b/views/tutorial/html/6.erb @@ -0,0 +1,27 @@ +
+
+ Great job! You can see what you've done so far at victoria.neocities.org. Now let's try an image. +
+
+ Your Neocities web directory already includes a portrait of me called cat.png. +
+
+ Add it to your page like so: [img src="cat.png"] +
+
+ That's it! No closing tag needed for images. +
+
+ +
+

Links and Images

+

If the page or image you're referring to is already in your Neocities web directory, you can call it by its filename: for example, index.html or cat.png.

+ +

Otherwise, use the full URL: http://neocities.org/img/heartcat.png

+
+ + diff --git a/views/tutorial/html/7.erb b/views/tutorial/html/7.erb new file mode 100644 index 00000000..58a83664 --- /dev/null +++ b/views/tutorial/html/7.erb @@ -0,0 +1,32 @@ +
+
+ Now maybe your website needs a list. Here's how an unordered list looks: +
    +
  • websites
    • +
  • yarn
    • +
  • catnip
    • +
+
+
+ First, add a list to your page, but replace my favorite activities with your own! +
+
+ Second, put an h2 header above the list with some kind of title like "Interests." +
+
+ +
+

Lists

+

You can make an ordered (numbered) list like so:

+
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. Third item
    4. +
+
+ + diff --git a/views/tutorial/html/8.erb b/views/tutorial/html/8.erb new file mode 100644 index 00000000..9cf9dadd --- /dev/null +++ b/views/tutorial/html/8.erb @@ -0,0 +1,27 @@ +
+
+ Now add a link to one of your list items. If nested properly, it should look something like this: + +
  • Yarn
    • +
    +
    + +
    +

    Tags so far

    +

    Headings:

    Title of the page!

    +

    Less important title

    + +

    Paragraphs:

    Hello!

    + +

    Links: Click here!

    + +

    Images:

    + +

    Lists

    +
    + + diff --git a/views/tutorial/html/9.erb b/views/tutorial/html/9.erb new file mode 100644 index 00000000..7b9837e6 --- /dev/null +++ b/views/tutorial/html/9.erb @@ -0,0 +1,17 @@ +
    +
    + Good work! Everything you've written has been saved to index.html, which is the homepage people see when they visit your site. +
    +
    + You can find and edit index.html by visiting your Neocities dashboard. +
    +
    + A cheat sheet of all the tags you've learned can be found in the tutorial section. +
    +
    + + diff --git a/views/tutorial/index.erb b/views/tutorial/index.erb index 0ef967e4..268ee7b2 100644 --- a/views/tutorial/index.erb +++ b/views/tutorial/index.erb @@ -1,5 +1,11 @@ -

    WELCOME TO NEOCITIES WHATS UP MANH!?

    +
    +

    Welcome to Neocities!

    -START TUTORIAL +

    Start the Tutorial!

    +

    Learn how to build websites from scratch +with interactive lessons from Neocities' head cat, Penelope. +The first chapter on basic HTML is out now, and more chapters +are in the works!

    -Nah dude I'm 31337 just take me to the editor. +

    Go to the dashboard

    +
    \ No newline at end of file