mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 09:42:36 +02:00
More misc edits to tutorial
This commit is contained in:
parent
ca6dfce8e6
commit
041c3a08e4
7 changed files with 27 additions and 22 deletions
|
@ -9,9 +9,9 @@
|
|||
|
||||
<div class="welcome">
|
||||
<h4>Thank you!</h4>
|
||||
<p>Thanks for trying out Chapter One of the Neocities tutorial! This is a work in progress—<a href="/contact">let us know</a> if you have any questions or suggestions.</p>
|
||||
<p>Thanks for trying out Chapter One of the Neocities tutorial! This is a work in progress—<a href="/contact">let us know</a> if you have any questions or suggestions. We'd also love to hear your ideas for Chapter Two: Basic CSS.</p>
|
||||
<p>To continue working on your site, head to the <a href="/dashboard">dashboard</a>!</p>
|
||||
<p>You can also keep up with cool sites on Neocities via your <a href="/">news feed</a>!</p>
|
||||
<p>You can also check out all the <a href="/browse">cool sites on Neocities</a> and follow them via your <a href="/">news feed</a>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -9,12 +9,12 @@
|
|||
background-size: 289px;
|
||||
position: absolute;
|
||||
right: -46px;
|
||||
top: 0;
|
||||
top: 10px;
|
||||
z-index: 1000;">
|
||||
<div class="dialogue" style="left: -40px; top: 40px; width: 250px">
|
||||
<div class="dialogue" style="left: -40px; top: 50px; width: 250px">
|
||||
And here's some HTML, right in this box! Let's make a change. Replace <strong>Hello World</strong> with a name for your site like <strong><span id="studentName"></span>'s Website</strong>, and click save!
|
||||
</div>
|
||||
<div class="dialogue" style="left: -10px; top: 360px;">
|
||||
<div class="dialogue" style="left: -10px; top: 350px;">
|
||||
<p>You'll see the results here.</p>
|
||||
<p>Make sure to check the green boxes below for important bonus info!</p>
|
||||
</div>
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
<div class="comic" style="height: 500px; background-image: url(/img/tutorial/ch1pg3.png); background-size: 483px;">
|
||||
<div class="dialogue" style="left: 50px; top: 20px;">
|
||||
Great!
|
||||
Check out your site at <a href="">victoria.neocities.org</a>.
|
||||
You did it!
|
||||
<div class="dialogue" style="left: 50px; top: 30px;">
|
||||
Great work! Let's move on to writing your first tag.
|
||||
<!-- Check out your site at <a href="">victoria.neocities.org</a>. -->
|
||||
</div>
|
||||
<div class="dialogue" style="left: 300px; top: 20px; width: 250px">
|
||||
But... hm... it needs a little something more. Let's make your name a heading by putting a Heading Level 1 tag around it.
|
||||
<div class="dialogue" style="left: 300px; top: 25px; width: 250px">
|
||||
Let's make your name a heading by putting a <strong>Heading Level 1 tag</strong> around it.
|
||||
</div>
|
||||
<div class="dialogue" style="left: 330px; top: 140px; width: 250px">
|
||||
<div class="dialogue" style="left: 330px; top: 120px; width: 250px">
|
||||
Change the text to this: <strong><span id="answer"></span></strong>
|
||||
and click save.
|
||||
</div>
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
<div class="comic" style="height: 600px; margin-top:1em; background-image: url(/img/tutorial/ch1pg4.png); background-size: 489px;">
|
||||
<div class="dialogue" style="left: 70px; width: 170px">
|
||||
<div class="comic" style="height: 480px; margin-top: 2em; background-image: url(/img/tutorial/ch1pg4.png); background-size: 489px;">
|
||||
<div class="dialogue" style="left: 75px; width: 170px">
|
||||
Now let's add a paragraph of text below the <strong>h1</strong> heading. Perhaps "Welcome to my website" or your favorite quote.
|
||||
</div>
|
||||
<div class="dialogue" style="left: 295px; top: -10px">
|
||||
<div class="dialogue" style="left: 290px; top: -10px; width:190px">
|
||||
To make a paragraph, surround your text with the <strong><p></strong> tag. So it should look something like
|
||||
<strong><p>Hello!</p></strong>
|
||||
<strong><p>Welcome!</p></strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome">
|
||||
<h4>What do I put on my website?</h4>
|
||||
<p>With HTML, you can make the exact website that you want to make, free from the limits of social networks. It could be a personal page or it could be totally anonymous! You could write about your interests, share artwork, or post photos. You'll learn about adding links and images soon.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkHomework() {
|
||||
var html = editor.getValue()
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="comic" style="height: 540px; background-image: url(/img/tutorial/ch1pg5.png); margin-top: 3em; background-size: 476px;">
|
||||
<div class="dialogue">
|
||||
<div class="dialogue" style="left:20px">
|
||||
You're writing HTML! You're doing it! Everything you need to know is just another tag!
|
||||
</div>
|
||||
<div class="dialogue" style="top: -20px; width: 320px">
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<div class="comic" style="height: 600px; background-image: url(/img/tutorial/ch1pg6.png); background-size: 650px">
|
||||
<div class="dialogue" style="top: 120px; left: 40px">
|
||||
Great job! You can see what you've done so far at <a href="">victoria.neocities.org</a>. Now let's try an image.
|
||||
<div class="dialogue" style="top: 110px; left: 20px; width: 240px">
|
||||
Great job! Links are very useful for sharing other sites or navigating to other pages on your site.
|
||||
Now let's try adding an image.
|
||||
</div>
|
||||
<div class="dialogue" style="top: 20px; left: 360px">
|
||||
Your Neocities web directory already includes a portrait of me called <strong>cat.png</strong>.
|
||||
|
@ -15,9 +16,9 @@
|
|||
|
||||
<div class="welcome">
|
||||
<h4>Links and Images</h4>
|
||||
<p>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.</p>
|
||||
<p>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, <strong>index.html</strong> or <strong>cat.png</strong>.</p>
|
||||
|
||||
<p>Otherwise, use the full URL: http://neocities.org/img/heartcat.png</p>
|
||||
<p>Otherwise, use full URLs like this: <strong>http://neocities.org/img/heartcat.png</strong></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
<a href="/tutorial/html/10" class="btn btn-Action">Next</a>
|
||||
<% else %>
|
||||
<input id="submit" class="btn btn-Action" type="submit" value="Save">
|
||||
<input id="reset" class="btn cancel" style="margin-right: 10px" type="submit" value="Reset">
|
||||
<input id="reset" class="btn cancel" style="margin-right: 7px" type="submit" value="Reset">
|
||||
<% end %>
|
||||
<h3 class="editor-heading">HTML</h3>
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue