Build a responsive website with HTML & CSS | Part two: Writing the HTML
HTML-код
- Опубликовано: 6 июл 2022
- 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 RUclips 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!
![Gunna - back in the a [Official Video]](http://i.ytimg.com/vi/oBrbejOHjLw/mqdefault.jpg)
One of the best series on how to approach an HTML and CSS project from scratch! Awesome work, Kevin!
When you said " I don't know this" and went to google for ideas....you gained my respect.
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.
Should the aria label be on the nav element and not the ul, or is the way Kevin did it fine?
These "From scratch" website building videos are the best thing (I think) you could have done. Great videos!!!!
I love how u organize and plan every single step ' ur awesome ⚡✅
Absolutely. Organizing is the key to not get frustrate.
Using pipe characters between classes is brilliant. I had no idea you could do that.
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. 😊😊
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 😍
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.
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.
thank you kevin, can’t wait for the next video
Nice, i have been waiting 👍
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
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!
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.
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
waiting on that next one! good series so far :)
Great video! Your advices is one of the main reasons I swapped to the tech industry and started a RUclips channel myself. Thanks!
Who would have thought that coding could be this much fun, thx Kevin!
This is the way to go. I am a vanilla css/html/js/php developer and i LOVE it.
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.
Waiting for the 3rd part. I wanna see the CSS on how you approach things in this project. Great project btw
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!
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
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.
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.
Thanks for this content Kevin, helps a lot 😀
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 :)
Now comes the fun part! I'd have used ol instead ul for that list on the right.
Great video. I learned a lot by watching it!
Please upload video tomorrow cause I can’t wait to see
after a quite long intro, finally we build something , hope next part will be out soon
Definetely do more videos like this, maybe even with crazier designs and animations. 👍🏻
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.
You're right. For me, as I know, ul doesn't need any role..... :(
Safari and Voice Over doesn't announce a list as a list when list-style:none is applied. Using role=list fix this issue
@@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.
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".
Thank you so much for this awesome tutorial... :)
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))
I stopped working until I finish this series with you since I figured lots of mistakes I make. So, part 3 please 😅
@ 20:46 "I've just come to use the pipe more often" 😁🤣 Stop that
Thank you so much !
the link in the description links back to this video?
never the less. id love to see part one
Thanks for your content Kevin! You are a great teacher for many of us!
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. ;)
So does the screen reader explain to the blind what this area is?
@@proteus1 no
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.
Hey Kevin, sorry if i missed it, but where is the extension to preview the illustrations in vscode? Great content man, thank you!
Hello, Kevin. thank you for all your awsome work. I am jus wondering what principles do we use when naming classess, aria-lables ect.
VS Code tip: to get rid of side scrolling and fit everything on the screen, type Alt+Z
This helps alot
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!
You can use role="menu" in the navigation list
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
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)
Kevin, what do you think of the BEM methodology?
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.
I might be wrong but the list of link that was located on the footer, it was usually called "sitemap"
Nice video.
Hi, Kevin!
Can you tell which app do you use to edit your videos?
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.
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!
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!!
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?
Amazing
where are you getting the website design with responsive design?
and thank you for everything!
❤
I noticed you did videos on FrontEnd Mentor challenges. I wished you had them in a Playlist
Cm'on Kevin drop the third part!
In the desc. box, the link of Part 1 is actually the link of this part :)
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.
Part threeeeeeeeee ♥️♥️♥️♥️♥️♥️♥️
This man had really blessed my life.
God bless you sir in Jesus name
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!
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 :)
Just type svg on vscode extension search and an extension called "SVG" will come up on top. That's the one
great video @kepowob, fyi the link to part 1 is wrong in case you want to update
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?
19:06, what I like about Tailwindcss is that I don't have to spend time naming things. 😉
How about only grid from navigation to footer?
Great content as usual 👍
Btw man suggest some resources for React
Npm and other packages
@@parekhnirajj123 Resources to master react bro
@@Ram-mt6vk check his channel ruclips.net/user/DaveGrayTeachesCode
Soon there will be a mern project, i don't know when but it is going to come soon...
@@Ram-mt6vk ruclips.net/user/Codevolution
This also. He has lots of react content. Never studied from him but you can try
What Pc would you suggest for making website and also the pc would have to beable to run Visual Studio.
What's the name of that image preview extension?
OK, LET'S DO IT
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!!!"
@Kevin, you forgot to put link to Cube CSS in a description as promised at 20:57.
What is the link to the extension that allows you to view the svg in vscode?
Thanks a lot kevin for awesome series! 💝
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"?
You shouldn't limit your section generally, its better to create a separate div to wrap items in the section, footer, header, etc.
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
is there a keybind to jump between something like: these two tags?
29:00 Why you didn't put that social media images at every link the same way you put at logo image?
which extension is that, which one you see SVG in vs code
any tell me
yo man, waiting for part 3,
waiting for part 3 👋
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?
when will the third part come out???
Awesome
you mentioned Role in UL...... i think we already specified in Reset classes?
Where could I learn what “Hero”s are and how to best implement them? I’m not familiar with that terminology.
Hi, what is your VScode extension for SVGs?
Does anyone know what keyboard Kevin uses? I like how it sounds
aria-label="Footer extended" that is how I wrote it. I am thinking that the screen reader will read it like " Footer extended navigation"
Your part 1 link in the description is actually for the part 2 video
In cms's like wordpress etc CSS grids are used, they have pre defined containers with rows and columns and you place widgets or blocks in certain grid containers. Why are css grids not as popular and why is flexbox or grid better? apologies for the noob question im trying to wrap my head around it
cool video)
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.
Why not DL/DT/DD for that (fake) numbered part with pseudo elements for styling the numbers?
Need help here.
At 11:36 I saved my html and noticied that the content saved as bold but the font-size is not. I checked it in Inspect view, it showed the 4 elements as crossed, they are
--fs-body: var(--fs-400);
--fs-primary-heading: var(--fs-800);
--fs-secondary-heading: var(--fs-700);
--fs-nav: var(--fs-500);
What should i do here??