How I learned HTML (Part 2)
In part 1 of how I learned HTML, we talked about accessibility and how important SEO is in web development.
--
In this post, with our found knowledge of accessibility, we will be looking at a few layouts and building out the HTML keeping accessibility in mind.
Something to keep in mind that might help your building process
If you have a hard time building out your HTML structure of a webpage just by looking at the design, first off, that’s completely normal it took me a while before I was able to look at a design and visualize the structure in my head. It comes with time, but what helped me was thinking about how all the elements on a page are boxes each individual tag or div is a box, inside these boxes, can have nested boxes or text, images etc, if this is still a bit confusing, don’t worry we will be doing plenty of layouts to help it sink in. The placement of these boxes is entirely controlled by CSS.
Image of layout 1
I will show you how I would structure this layout with HTML
HTML
<body>
<header>
<nav>
<div class="logo">
<img src="logo_image.png" alt="image of edustage logo"/>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Pages</li>
<li>Blog</li>
<li>Contact</li>
<li><i class="fas fa-search"></i></li>
</ul>
</nav>
</header>
<section class="hero">
<section class="hero_inner">
<p>Best online education service in the world</p>
<h3>One step ahead this season</h3>
<div class="action--buttons">
<button class="btn1">Learn More</button>
<button class="btn2">See Course</button>
</div>
</section>
</section>
</body>This is what the basic mark up for the layout would look like, as you can see I did use a div or 2 but this is okay as long as I don't get carried away with it. Most of the time I only use divs for things I can’t create a tag for, like for describing logo or a group of things I want to store together, in our case the actions buttons would be an example. In the layout there are images but I would add these through CSS as background images. Lastly, in the navigation at the top, you’ll notice that I have ai tag with the classfas fa-search I only did this to demonstrate that you can use Font Awesome icons to add a search icon.
Let’s take a look at a more complex section of the same layout
HTML
<section class="register"> <section class="register__inner"> <section class="register__info"> <h2>Register Now</h2> <p>There is a moment in the life of any aspiring astronomer that it is time to buy that first telescope. It’s exciting to think about setting up your own viewing station.</p> <div class="minutes__inner"> <div class="minutes__boxes">
<p>150 <span>days</span></p>
</div>
<div class="minutes__boxes">
<p>23 <span>hours</span></p>
</div>
<div class="minutes__boxes">
<p>47 <span>mins</span></p>
</div>
<div class="minutes__boxes">
<p>59 <span>secs</span></p>
</div>
</div>
</section> <section class="register__form">
<form class="form">
<p class="center">Course for free</p>
<p class="center">It is high time for learning</p>
<input type="text" placeholder="your name"/>
<input type="text" placeholder="your phone number"/>
<input type="email" placeholder="your email address"/>
<input type="submit" value="Submit"/>
</form>
</section> </section></section>
This is another example of how I would do my mark up by looking at this layout. The rest is all basic CSS styling which I will create a series on to show how I would style these sections. If you noticed I also have my class names named in a weird way if you never have seen this before it is called CSS BEM. this is basically a way to organize your class names so they’re relevant to each other, this is considered good practice on the CSS behave but I’ll go over that in detail in my CSS series I’ll soon create, so stay tuned :)
Last minute helpful exercises
I would suggest practicing creating the HTML structure for layouts, going to google and searching colorlib free templates or go to this link :) there are tons of layouts you can practice creating the structure for. You can click on the one you like to practice with and below image you should see a demo or download, I always choose demo so I can see it live. I would also suggest looking for ones that aren’t complex regards to looks, you just need something simple to practice creating the structure also don’t focus on the CSS, animations or javascript related features as your only focus is creating the structure. Trust me looking at these things will distract you from your main objective. I personally did these practices and it really helped me get comfortable with creating HTML, it becomes second nature when you keep at it.
I really hope this helps someone learn the basics of creating an HTML structure if it does please feel free to refer it to fellow friends or students :)
— Thanks!
