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
<img src="logo_image.png" alt="image of edustage logo"/>
<li><i class="fas fa-search"></i></li>
<p>Best online education service in the world</p>
<h3>One step ahead this season</h3>
<button class="btn1">Learn More</button>
<button class="btn2">See Course</button>
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 a
i tag with the class
fas 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
<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">
</section> <section class="register__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"/>
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 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 :)