Add main tag to your-first-website guide

Writing the webpage-to-webpage guide, and think a semantic page
would be best for a beginner.
master
Nathan Steel 3 years ago
parent a6a68a852a
commit a1d4776bf7

@ -65,7 +65,7 @@
<p>So now we'll add some visible content, to make a <em>real</em> webpage, and not just a blank page.</p> <p>So now we'll add some visible content, to make a <em>real</em> webpage, and not just a blank page.</p>
<p>Between the <b>body</b> tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.</p> <p>Between the <b>body</b> tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.</p>
<pre><code>&lt;div class="layout-wrapper"&gt; <pre><code>&lt;main&gt;&lt;div class="layout-wrapper"&gt;
&lt;h1&gt;Hi, I'm &lt;em&gt;Aney&lt;/em&gt;&lt;/h1&gt; &lt;h1&gt;Hi, I'm &lt;em&gt;Aney&lt;/em&gt;&lt;/h1&gt;
&lt;p&gt;Welcome to my site, it's pretty cool!&lt;/p&gt; &lt;p&gt;Welcome to my site, it's pretty cool!&lt;/p&gt;
&lt;h2&gt;Skills&lt;/h2&gt; &lt;h2&gt;Skills&lt;/h2&gt;
@ -79,7 +79,7 @@
&lt;img src="https://via.placeholder.com/200x200/"&gt; &lt;img src="https://via.placeholder.com/200x200/"&gt;
&lt;img src="https://via.placeholder.com/200x200/"&gt; &lt;img src="https://via.placeholder.com/200x200/"&gt;
&lt;img src="https://via.placeholder.com/200x200/"&gt; &lt;img src="https://via.placeholder.com/200x200/"&gt;
&lt;/div&gt;</pre></code> &lt;/div&gt;&lt;/main&gt;</pre></code>
<p>Now if you refresh the webpage, tada! We have content.</p> <p>Now if you refresh the webpage, tada! We have content.</p>
@ -92,8 +92,10 @@
<h3>The CSS</h3> <h3>The CSS</h3>
<p>For the actual styling, add the following snippet between the <b>style</b> tags.</p> <p>For the actual styling, add the following snippet between the <b>style</b> tags.</p>
<pre><code>html{ <pre><code>html,body{
height: 100%; height: 100%;
}
html{
font-size: 12px; font-size: 12px;
background: #67aacc; background: #67aacc;
background: linear-gradient(0, #67aacc 0%, #8cecf5 35%, #8cecf5 55%, #fff 100%); background: linear-gradient(0, #67aacc 0%, #8cecf5 35%, #8cecf5 55%, #fff 100%);

Loading…
Cancel
Save