Build a responsive website with HTML & CSS | Part two: Writing the HTML

It's time to write the HTML for our project!
If you missed part 1, you can find it here: • Build a responsive web...
🔗 Links
✅ The code from Part 1: github.com/kevin-powell/fem-m...
✅ More on Semantic HTML: • The most common HTML m...

#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@gonzalolozano1198]

When you said " I don't know this" and went to google for ideas....you gained my respect.

[@waleedmumtaz]

One of the best series on how to approach an HTML and CSS project from scratch! Awesome work, Kevin!

[@torcud]

For the footer navigation, a label of "footer" is fine. The reason being is that a screen reader will announce both the accessible name of the element ("footer") and its role ("navigation"). This is super helpful for screen reader users for 2 reasons: 1 - they can pull up a list of landmarks and the name of "footer" will let them know where that nav is located 2 - if they are navigating through the page linearly, either using arrows or tab keys, they will hear the name of the "footer" as they enter the landmark so they can make a mental note that this is the nav they can find in the footer. Another way to name that nav could be "legal" if it only contains links to legal docs such as the privacy policy, accessibility policy... In this case "footer" is fine because in includes links to different parts of the site.

[@cool_scatter]

Should the aria label be on the nav element and not the ul, or is the way Kevin did it fine?

[@alwinter]

Using pipe characters between classes is brilliant. I had no idea you could do that.

[@mohamadmhana9453]

I love how u organize and plan every single step ' ur awesome ⚡✅

[@electricity2703]

Absolutely. Organizing is the key to not get frustrate.

[@Mwtorres89]

These "From scratch" website building videos are the best thing (I think) you could have done. Great videos!!!!

[@RohitSaini-go3cr]

I love the way you start and manage a project. All the geneal utility classes and stufd that you have taught is really amazing. It immediately boosted my speed when I started to follow your approach. I cannot thank you enough for that. Keep up the good work. Thank you again. 😊😊

[@bhaveshxrawat]

Figma tip: At 9:38, you could go in outline mode in Figma by pressing 'Shift + O', it sort of gives you a rough idea of how much space the elements, groups or frames are taking by drawing a white outline around them.

[@UnknownEntity606]

Okay this video was eye opening. Had no clue about utility-classes despite using them all the time in bootstrap and looking directly at them when I was researching tailwind css. You are so organized, well done.

[@silvanoseric5925]

An easy way to prevent side scrolling in VS code is to use the shortcut key "Alt+z". This will wrap the content, having a maximum width of the viewable window area

[@-Soren]

thank you kevin, can’t wait for the next video

[@ArchAid1]

This is AWESOME!! I love the deliberations on all the topics. This probably one of the most usefull videos on HTML/CSS that I've ever seen (and I've seen a few!!) I can't wait for the next one 😍

[@muhammadk23]

Nice, i have been waiting 👍

[@anandoganiya9070]

Please upload video tomorrow cause I can’t wait to see

[@felixc.programs8209]

Great video! Your advices is one of the main reasons I swapped to the tech industry and started a KZbin channel myself. Thanks!

[@briankgarland]

Grid areas make that footer super simple with regards to the differences between desktop and mobile. I look forward to the next video to see if you do it that way.

[@kevinmalone390]

waiting on that next one! good series so far :)

[@miroslavalterov6167]

Who would have thought that coding could be this much fun, thx Kevin!

[@kylevandeusen]

Thank you for doing this series! I watch all your videos but wouldn't know how to just "start" only how to fix/edit/add/modify

[@LuBre]

This is the way to go. I am a vanilla css/html/js/php developer and i LOVE it.

[@braveitor]

Now comes the fun part! I'd have used ol instead ul for that list on the right.

[@carloautor]

Waiting for the 3rd part. I wanna see the CSS on how you approach things in this project. Great project btw

[@pablobarrientos2071]

Thanks for this content Kevin, helps a lot 😀

[@stickershuttle]

You just tought me to so many shortcuts. I believe Emmet is built into VS Code now. Also, the new start live server feature is awesome.

[@rafaelperes4140]

I loved how humble Kevin was to be like "Hmm not sure" boom google right away, scroll around documentation and show us that even him does that and make us feel better about ourselves haha

[@gametroll6311]

Yeah, man I have been programming for about 20 years and I still have to google a lot. It's not about memorizing syntax and code. What you want and need to memorize and know is the logic. Know why and how it works.

[@brandon_wallace]

Great video. I learned a lot by watching it!

[@SwillMith16]

Really enjoy how you think out loud and don’t cut it out the video. Really helps to understand the reasoning of why one practice is preferable over another. These videos are amazing!

[@hannahlu2613]

This is so amazing! I'm following along and I can tell you I learned so much more this way. I've learned some Emmet shortcuts, new element attributes, utility classes, CSS reset, and train of thoughts as he's going through each step. Anytime I don't understand anything, I paused and googled it and somehow it sticks in my head longer. After a while, I started to see some repeated patterns and actually practice them. Lovee it! Thank you so much Kevin!

[@naczelnypsycholog6296]

after a quite long intro, finally we build something , hope next part will be out soon

[@Nikolafesb]

Definetely do more videos like this, maybe even with crazier designs and animations. 👍🏻

[@hassaneoutouaya]

Thank you so much !

[@juneldelacuadra5973]

Thank you so much for this awesome tutorial... :)

[@DanDerkson]

I have been building stuff for over 18 years online and I find your approach really clean. Watching your thought process makes me think about things I have just done habitually. This video really makes me think that I would love to see an in depth video of your appraoch to forms and approaches to form design.

[@tedwennerstrom1842]

Hey Kevin! I really, really love these videos and your approach to creating a full website with all the best practices and such. I have one question though. Why do we create a separate with a class of "container" instead of just putting the container class on the for example? What is the purpose of keeping it separate when the function will be the same (or maybe it wont). And the same with the 's that we create with a class of "even-columns".

[@abdullahadurrah159]

I stopped working until I finish this series with you since I figured lots of mistakes I make. So, part 3 please 😅

[@user-QesOrwuMqN]

Thanks for your content! You use variables anyway, try to use pixels instead of rem/em while it is in development stage. Later when it will be ready - convert variable values to rem/em. It will save time on matching px from design with variables to choose))

[@Gearyco]

I only think role=list is only necessary when you're unable to change the semantic tag to or . So it would be for example.

[@abderahmenmaiza1758]

You're right. For me, as I know, ul doesn't need any role..... :(

[@SuperGylden]

Safari and Voice Over doesn't announce a list as a list when list-style:none is applied. Using role=list fix this issue

[@Axeiaa]

@@SuperGylden Thank you for that supplemental info, it seemed silly to me that you'd have to tag ul/ol as a list considering they literally stand for U-nordered L-ist and O-rdered L-ist. Very odd that Safari instead of sticking to semantics (HTML) figures out the CSS and then chooses to ignore the HTML definition. If anything you'd think CSS (styling) should not even play a role for voice assisted technologies.

[@split23e]

Thanks for your content Kevin! You are a great teacher for many of us!

[@janjua376]

This helps alot

[@SuicideDog]

the link in the description links back to this video? never the less. id love to see part one

[@user-nb7nb1hh1j]

@ 20:46 "I've just come to use the pipe more often" 😁🤣 Stop that

[@abderahmenmaiza1758]

For accessibility part, I think ul element is enough and doesn't need any role. Other point, if you use input, you need a label associated for screenreaders. And why not with an autocomplete. ;)

[@proteus1]

So does the screen reader explain to the blind what this area is?

[@abderahmenmaiza1758]

@@proteus1 no

[@RhayvenBlood]

Yeah. It's why using semantic HTML is important. Like. For navigation, it follows as "Navigation landmark. [List with x items]" And then it tabs through the different links within the nav.

[@zooneyl2248]

VS Code tip: to get rid of side scrolling and fit everything on the screen, type Alt+Z

[@jacknguyen4014]

You can use role="menu" in the navigation list

[@ahmadmardini2161]

Hello, Kevin. thank you for all your awsome work. I am jus wondering what principles do we use when naming classess, aria-lables ect.

[@dojnishi]

As a UX Developer I have to say, that this UI is such a bad design, basic mistakes, lacks of consistency, lack of readability rule and simple math. It is a level of junior and there is nothing about UX there. Therefore, there is a lot of problems with it. My personal opinion is, that UX/UI designer should also have a programming knowledge, because they make such a pain in the a** for developers with their ideas.....On the other hand, thank you Kevin this is a really fantastic series :)

[@chillncode8313]

Amazing

[@Sebastian-zs8cp]

It would be cool if you would show the rectangles like on the design at the beginning and drag them through. That would certainly help me and the beginners, or how you see it.

[@baqibo]

Nice video.

[@thekeykan]

Hey Kevin! I don't like your videos! You know why? 'Cause, they're so addictive! :D Every time I try to only watch one per day, I get so immersed in them that I don't feel time passing! ;) You're awesome dude! Thank you for the amazing job! btw, may I know the which microphone you're using? The voice quality is supper clean!

[@gaara5104]

Cm'on Kevin drop the third part!

[@crunkdunt8398]

Hey Kevin, sorry if i missed it, but where is the extension to preview the illustrations in vscode? Great content man, thank you!

[@adeni4359]

I noticed you did videos on FrontEnd Mentor challenges. I wished you had them in a Playlist

[@user-km9vl9ck9u]

Hey Kevin great tutorial again! I want to ask about the navigation, is it better to use or I can also put straight the links. Like . Because it's a lot faster to do it this way

[@janekschleicher9661]

In terms of viewing the page it might not matter or might dependent whether you would line breaks, spaces, etc. or not. In terms of semantic html, you'd lose the information that the links are all of the same kind part of a list. Matters for screen readers as explained by the Kevin. Matters also for understanding or scraping the web page. Important users of the future might be those, who really think the web page contains important information and would want to have an API like access (but can't access the programming team for the web page, so all they will have is the HTML). In this situation, you would really love to a precise and stable CSS identifier for the information you are looking for. In this example a "nav a" selector would do the trick, but that's not very stable as any additional link in a navigation could break it, e.g. a later added interactive element that collapses/shrinks the displayed navigation links, or a details, or a full site map link, or just a hacked added additional link content in the navigation (e.g. another logo with a link to the corporate or a stakeholder or the project ...). And without further information to distinguish is ugly. You can always find a solution, but most of the time it's not very stable (in terms of robust against slight changes of the web page). In practice, as a web scraper, you'd probably try to filter out by keywords or link addresses, but as said, that's not very beautiful. You'll be very grateful if a simple "nav ul a" or "nav ul.links a" will select them precisely for you. (Alternatively it also works if a have a specific semantic class attached, but this has the tendency to break more often over time). Indeed, the solution of Kevin to keep the footer navs all in one ul element is extremely beautiful for such a purpose. In reality, many web pages would put two divs with or without a ul and then with links inside, what's really ugly to scrape in case and not very robust to parse. This trading off of a cleaner HTML for a maybe more thought process on rendering is from a user with accessibility point of view really worth it ... In terms of speed, yep some bytes less might always render slightly faster, but the addition of ul opening and closing tag is very small - and especially on slow connection, this also helps the browser to understand that a list is to be shown and can prevent rerendering stuff once more links are coming in from the slow connection. (I don't think this really matters any more a lot, in the old days, that was one main motivation to use correct semantic html as it helped to prevent the web page flipping around annoyingly while getting downloaded more and more)

[@consciousmi4842]

OK, LET'S DO IT

[@gametroll6311]

In reference to around 33:50 to 34:00 , I remember the longer navigations in the footers used to be referred to as a "Site Map" or they were kind of like a mini version of a site map ... Not sure if that still applies in today's web development standards though.

[@agussubhan1723]

I might be wrong but the list of link that was located on the footer, it was usually called "sitemap"

[@aiman1562]

Awesome

[@BassemManea]

Part threeeeeeeeee ♥️♥️♥️♥️♥️♥️♥️

[@victorialyra1236]

Sooo trueeee

[@cosmes.l8742]

I have some questions! XD - 1º - At 26:29 , I understand why putting the div to be like a "wrapper", but why another div wrapping the entire contents of the container? 2º - Another question in this same footer, why not use the nav itself directly instead of putting a div around it? 3º - And the last question, what is "utility classes"? Edit: Regarding the 3º question, i really apreciate this new tool in my pocket XD, i will use it XD, i searched a lot too understand the "utility" behind it, and i love it! - I hope you understood, I ended up using google translator, as some are very complex for my EN level XD, and thank you!

[@akanmuoluwaseyi5187]

This man had really blessed my life. God bless you sir in Jesus name

[@muhammadk23]

waiting for part 3 👋

[@ahmadmuraish1144]

I love Kevin, seriously we are soo much alike, love watching your videos talking things out loud like you and 90% of the times we just come up with the same solution.... Guess thats just built into me now since my learning journey started with your channel.

[@consciousmi4842]

yo man, waiting for part 3,

[@BneiAnusim]

19:06, what I like about Tailwindcss is that I don't have to spend time naming things. 😉

[@MaxMov-sp8hr]

Kevin, what do you think of the BEM methodology?

[@sergioc.p.7845]

What about custom input forms, like scroll in select elements and custom sidebar, or fixed height for the options wrapper in order to have a scroll?? Thanx!!

[@michalnowak2181]

thx

[@krzysztofrozbicki1776]

Amazing content! But was I only one who were telling to the screen "Kevin you are looking at second "stage" of figma project which is shown hovered buttons! This button is not white at all!!!"

[@_ferAlvarez]

great video @kepowob, fyi the link to part 1 is wrong in case you want to update

[@user-kg8nb7eo9g]

@Kevin, you forgot to put link to Cube CSS in a description as promised at 20:57.

[@zttlhsz]

In the desc. box, the link of Part 1 is actually the link of this part :)

[@AlbertoChillon]

Hiya Kevin, thanks for the video. I think that the link that was to take me to the first part of the series right at the top of the description section ("If you missed part 1, you can find it here: www.youtube.com/watch?v=3K6zr..."), brings me back here. Thanks again!

[@user-hm9wz6nd5p]

where are you getting the website design with responsive design? and thank you for everything! ❤

[@user-uy6cv9kp6t]

cool video)

[@SeanPattersonUK]

Your part 1 link in the description is actually for the part 2 video

[@__azt]

waiting for the next video 🥺

[@TrashCoder1]

Lmao, I was a having a hard time making a website given to me by a boot camp I am attending and I thought that this CS wasn't for me as I was watching this video, I was like... I'm fine.

[@jeffschaefer4827]

At about 12:15 or so you said you'd link a VSCode extension that lets you seean SVG in VSCode. I didn't see that in the description, do you happen to have that handy? That's been on my wish list for a while, especially with FEM :)

[@colephelps8857]

Just type svg on vscode extension search and an extension called "SVG" will come up on top. That's the one

[@flashbond]

Why not giving container class to section tag instead of creating a seperate div? Does it make any difference in terms of design or seo optimization? I checked multiple forums. p tag is the best practice offered for slogans or taglines. For footer nav may the aria-label be "site map"?

[@ItaloVolt]

You shouldn't limit your section generally, its better to create a separate div to wrap items in the section, footer, header, etc.

[@ItaloVolt]

These tags naturally expands the whole width of the page, if you contain it and idk, have a background or something, the bg will not expand the entire width and this kinda stuff. This is a basic example, but it's really better to create a separate wrapper to prevent any problems in the future maintaining the code

[@Ram-mt6vk]

Great content as usual 👍 Btw man suggest some resources for React

[@parekhnirajj123]

Npm and other packages

[@Ram-mt6vk]

@@parekhnirajj123 Resources to master react bro

[@siddiqahmed3274]

@@Ram-mt6vk check his channel kzbin.info Soon there will be a mern project, i don't know when but it is going to come soon...

[@siddiqahmed3274]

@@Ram-mt6vk kzbin.info This also. He has lots of react content. Never studied from him but you can try

[@emailinsights]

Please make a course on responsive Html email development

[@Technoph1le]

Hi, Kevin! Can you tell which app do you use to edit your videos?

[@muhammad_pulok]

Thanks a lot kevin for awesome series! 💝

[@user-ik6ho4lr9j]

aria-label="Footer extended" that is how I wrote it. I am thinking that the screen reader will read it like " Footer extended navigation"

[@sampurnadahal3452]

link to part 1 in description is of this video

[@colephelps8857]

what's the reason to use multiple section and div tags when you can handle it in a single div by adding both 'container' and 'even-columns' class to it?

[@huseyinaydn222]

Hi Kevin, first of all thank you for starting this beautiful series of publications. I want to ask something, will you use sass (scss) in the training or will you continue as pure css?

[@Shubhamyadav-hs2lw]

Sir You're great Web designer 🤗🤗🤗🤗🤗

[@lea3225]

hello everyone! is there another channel which does the same thing kevin's doing here? i'm picking up a lot of great tips from his building websites series and would like to watch a similar content from another channel.

[@adhammoamer4835]

we are waiting for the third part since 9 days

[@evgkhrist]

I usually name my footer navigation like "site map" or smth like that.

[@sixtoalbertobecerrareslen962]

Hello good morning from colombia. I follow your videos and I enjoy. Just want to let you know that the link to the part 1 is pointing to the same video or part 2.

[@alexandresendra]

Hello ! Could someone explain to me the logic behind the naming of the custom properties with the number 400-600-700-900 please ?

[@parsa_ezati]

It's just a unit of measurement. Your question is like "Why do we use px for width?". It's just a unit.

[@luthomazikwana6982]

Howzit, i need to some help or advise. Regarding on how you would go about adding a payment gateway to a website. Most tutorial that I come across are Woocomerce related or via Wordpress. Is there other ways you can add a payment gateway for html css web pages?

[@mikkolukas]

18:49 Numbered paragraphs maybe? :)

[@RhayvenBlood]

Knowing how many items are in a list makes them easier and faster to navigate ^^ Esp for things like navigations. Having to jump through with no clue, and then jumping to something completely separate is annoying AF.

[@Technoph1le]

How about only grid from navigation to footer?

[@makingtheweb6620]

What Pc would you suggest for making website and also the pc would have to beable to run Visual Studio.