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/views/tutorial/html/1.erb b/views/tutorial/html/1.erb index 672c5d0e..443c466e 100644 --- a/views/tutorial/html/1.erb +++ b/views/tutorial/html/1.erb @@ -1,27 +1,18 @@ -
+
- 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?
-
-

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/3.erb b/views/tutorial/html/3.erb new file mode 100644 index 00000000..3228b45c --- /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:

Victoria's Website

+ 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..4aec5943 --- /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

tag. So it should look something like +

Hello!

+
+
+ + diff --git a/views/tutorial/html/5.erb b/views/tutorial/html/5.erb new file mode 100644 index 00000000..63b1c34b --- /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: + + Check out Neocities! + + Add a link to your favorite site to the end of the paragraph, right before the

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..cd82027a --- /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: +
+
+ 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..d7526bfd --- /dev/null +++ b/views/tutorial/html/7.erb @@ -0,0 +1,33 @@ +
+
+ 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..648453c0 --- /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..be7f3dc9 --- /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