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

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

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?

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 ⚡✅

@electricity2703

Жыл бұрын

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. 😊😊

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.

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 😍

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.

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

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

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

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 kevin, can’t wait for the next video

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.

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".

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

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

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

Nice, i have been waiting 👍

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

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

Thanks for this content Kevin, helps a lot 😀

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!

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

Great video. I learned a lot by watching it!

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

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 :)

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!

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

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.

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.

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 😅

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

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.

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.

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)

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!

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

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!

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

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

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

Thank you so much !

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

Kevin, what do you think of the BEM methodology?

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

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

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

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

This helps alot

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

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

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 might be wrong but the list of link that was located on the footer, it was usually called "sitemap"

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!!

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?

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

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?

Nice video.

Cm'on Kevin drop the third part!

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

How about only grid from navigation to footer?

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

What is the link to the extension that allows you to view the svg in vscode?

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 kzread.info Soon there will be a mern project, i don't know when but it is going to come soon...

@siddiqahmed3274

Жыл бұрын

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

Where could I learn what “Hero”s are and how to best implement them? I’m not familiar with that terminology.

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?

29:00 Why you didn't put that social media images at every link the same way you put at logo image?

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

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

Why not DL/DT/DD for that (fake) numbered part with pseudo elements for styling the numbers?

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

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!!!"

you mentioned Role in UL...... i think we already specified in Reset classes?

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.

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.

Amazing

when will the third part come out???

is there a keybind to jump between something like: these two tags?

Hi, what is your VScode extension for SVGs?

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

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

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??

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

Thanks a lot kevin for awesome series! 💝

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.

yo man, waiting for part 3,

Does anyone know what keyboard Kevin uses? I like how it sounds

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!

which extension is that, which one you see SVG in vs code any tell me

Kev, a lot of the code is cut off by the design (righthand side), would've been nice to have the mark-up in full view as sometimes I like to pause and take a better look. Just something to think about on your next recording, other than that, great tutorial ;)

@marshag6345

Жыл бұрын

Kevin did mention the code is available on Gitub

@chetankumar9463

7 ай бұрын

use alt+z for wrapping code.

OK, LET'S DO IT

waiting for part 3 👋

Hi, is there a way to do that middle mouse click like you did at 5:50 on a macbook ?

@KevinPowell

Жыл бұрын

You can alt click to place the cursor at multiple places (might be opt on a Mac?) And also you can remap the shortcuts in the prefernces

What's the name of that image preview extension?

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.

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.