These are notes for the 2nd video in Kevin Powell’s video series titled Build a responsive website with HTML & CSS.
The GitHub repository for this video is here.
Introduction
This video walks through the process of examining the Figma file and making decision on how to write the HTML for the project. Kevin’s final index.html file can be viewed here.
I don’t discuss all of the choices that Kevin makes but here are a few points I’ve noticed:
- Uses the desktop version to determine the order of the elements in index.html
- Uses Emmet to speed up the writing
- <ul>’s are used for lists of icons and navigation menus
- Aria code is added
The general layout is as follows:
[code language=”html”]
<body>
<nav>
<div class="container">;
…
</div>
</nav>
<main>
<section>
<div class="container">
<div class="even-columns">
<div> … </div>
<div> … </div>
</div>
</div>
</section>
… more sections
</main>
<footer>
<div class="container">
<div class="even-columns">
…
</div>
</div>
</footer>
</body>
[/code]