Introduction To Responsive Web Design – HTML & CSS Tutorial

font-size in rem
margin padding in em

Thanks you sir making for such videos.

Thanks Kevin, I've learnt a lot and I'm proud of it.

Learn to zoom in to your code…. most of us watch tutorials on moblie not pc

Does he link the files anywhere?

Very useful!

Thank you for this amazing tutorial. Loved every bit of it. Now I can also make a fantastic website. And Keep up the good work!

<h1> <b> correct me<b> <h1>

i just wanna say i love you

stopped at 25:00, problem with em, this is a personal book mark

Hey kevin nice to see you here! It is flexing how most of us knew he is kevin powell from just the voice

Omg he is kewin sir ???? King of css is here again teaching us course of 4 hours ❤️❤️

Great tutorial finally now i know css

The web link to the web designs on XD adobe website is password protected. What is the password?

How did he get the image responsive?

Awsome. Thank you very much for making this amazing tutorial.

That is gold, bro. I've been using flex boxes for forever. i never knew you could make an unordered list have display: flex. I thought it was reserved for containers. That's insane

Better than my school.

Thank you for very helpful tutorial.
I was playing around I was thinking another way to make rems/ems easier to understand.
I basically divided default 1 rem from the default 16 px and we get 0.0625 rem/em is 1 px then I made default variables in css

:root {
– – default-rem: 0.0625rem;
– – default-em: 0.0625em;
}

Then you can use calc() to make everything easy without changing the default 16px as for example I will take h1 tag to show it

h1 {
font-size: calc(var(- -default-rem) * 24);
}

Basically at this calc you can think like this. Since we know that 0.0625rem is 1px, so multiplying it by 24 it means we can think it as a pixels.
So i am pretty new to this and learned from this video and I thought to share it might help someone. So…This is the way I like to combine rem/em with pixels.

Watching this tutorial I am felling like watching very goood movie in cinemae which get some oscar.

Hi Guys! Could someone send me a link to the design of this site[00:07:52]?

tanx million. simple explanation. you are good

19:47

source code & images please

At 3:24:00 you suddenly jump to a version of the site that has the recent article images properly pushed to the left in the full size layout. This is really frustrating 🙁

Unbelievably good video on intermediate level HTML and CSS web design

From where I can the get the code

I watched upto 8:31, and I still did not see how the main container stay fixed to the center of the window as you stretched the window bigger and smaller. When I set the container class to percentage, it pushes everything to the left. Why is that

just finished, thank you so much !! It's a good course for who knows css and html but just sucks at make responsive websites.

is it a big project?

42:09 em is relative to the font size of the actual element in example he changed the margin using em, because it is easy to say I only want half of that space
That is why he use em for margin and bottom
Rem for font size
*media query should be at the end to override styles
*img always display as block
*30:02 article 70% sidebar 20%

I am completed the video finally . I really love to watch kavin video.

He talks too much..

i am starting my software engineering journey with a view to building my own business out of it. but you all know i need some help with mentoring. right?

27:56 i wouldnt want to do that either 😄

⭐️ Course content ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:02:59) 1. Starting to think responsively
⌨️ (00:06:01) 2. CSS Units
⌨️ (00:09:16) 3. CSS Units – Percentage
⌨️ (00:15:14) 4. Controlling the width of images
⌨️ (00:20:05) 5. min-width and max-width
⌨️ (00:22:54) 6. CSS Units – The em unit
⌨️ (00:28:25) 7. The problem with ems
⌨️ (00:30:58) 8. The Solution: Rems
⌨️ (00:35:46) 9. Picking which unit to use
⌨️ (00:39:18) 10. ems and rems – an example
⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML
⌨️ (00:55:02) 12. Basic Styles and setting up the columns
⌨️ (01:02:09) 13. Adding the background color
⌨️ (01:06:21) 14. Setting the column widths
⌨️ (01:10:00) 15. Spacing out the columns
⌨️ (01:14:27) 16. Controlling the vertical position of flex items
⌨️ (01:19:42) 17. Media Query basics
⌨️ (01:29:50) 18. Making out layout responsive with flex-direction
⌨️ (01:36:45) 19. flex-direction explained
⌨️ (01:39:54) 20. Creating a navigation
⌨️ (01:44:40) 21. Using flexbox to start styling our navigation
⌨️ (01:52:19) 22. Making out navigation look good
⌨️ (01:59:38) 23. Adding the underline
⌨️ (02:03:40) 24. A more complicated navigation
⌨️ (02:10:25) 25. Making the navigation responsive
⌨️ (02:17:20) 26. Taking a look at the rest of the project
⌨️ (02:21:34) 27. Setting up the structure
⌨️ (02:29:59) 28. Featured article structure
⌨️ (02:35:07) 29. The home page – HTML for the recent articles
⌨️ (02:37:39) 30. Home Page – HTML for the aside
⌨️ (02:43:45) 31. Starting the CSS for our page
⌨️ (02:59:15) 32. Starting the layout – looking at the big picture
⌨️ (03:07:48) 33. Starting to think mobile first
⌨️ (03:10:37) 34. Styling the featured article
⌨️ (03:17:03) 35. Changing the visual order with flex box
⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins
⌨️ (03:27:05) 37. Changing the visual order with flex box
⌨️ (03:31:00) 38. Styling recent articles for large screens
⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints
⌨️ (03:45:41) 40. Using a new pseudo-class to wrap-up the homepage
⌨️ (03:53:12) 41. Creating the recent posts page
⌨️ (03:56:39) 42. Setting up the About Me page
⌨️ (04:00:54) 43. Fixing up some loose ends
⌨️ (04:05:27) 44. Important Note. The viewport meta tag
⌨️ (04:09:10) 45. Module wrap up
⌨️ (04:12:24) Outro

37:06

Thank you for the link. I definitely could click it through the video ))))

can anyone share the code?

⭐️ Course content ⭐️

⌨️ (00:00:00) Intro

⌨️ (00:02:59) 1. Starting to think responsively

⌨️ (00:06:01) 2. CSS Units

⌨️ (00:09:16) 3. CSS Units – Percentage

⌨️ (00:15:14) 4. Controlling the width of images

⌨️ (00:20:05) 5. min-width and max-width

⌨️ (00:22:54) 6. CSS Units – The em unit

⌨️ (00:28:25) 7. The problem with ems

⌨️ (00:30:58) 8. The Solution: Rems

⌨️ (00:35:46) 9. Picking which unit to use

⌨️ (00:39:18) 10. ems and rems – an example

⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML

⌨️ (00:55:02) 12. Basic Styles and setting up the columns

⌨️ (01:02:09) 13. Adding the background color

⌨️ (01:06:21) 14. Setting the column widths

⌨️ (01:10:00) 15. Spacing out the columns

⌨️ (01:14:27) 16. Controlling the vertical position of flex items

⌨️ (01:19:42) 17. Media Query basics

⌨️ (01:29:50) 18. Making out layout responsive with flex-direction

⌨️ (01:36:45) 19. flex-direction explained

⌨️ (01:39:54) 20. Creating a navigation

⌨️ (01:44:40) 21. Using flexbox to start styling our navigation

⌨️ (01:52:19) 22. Making out navigation look good

⌨️ (01:59:38) 23. Adding the underline

⌨️ (02:03:40) 24. A more complicated navigation

⌨️ (02:10:25) 25. Making the navigation responsive

⌨️ (02:17:20) 26. Taking a look at the rest of the project

⌨️ (02:21:34) 27. Setting up the structure

⌨️ (02:29:59) 28. Featured article structure

⌨️ (02:35:07) 29. The home page – HTML for the recent articles

⌨️ (02:37:39) 30. Home Page – HTML for the aside

⌨️ (02:43:45) 31. Starting the CSS for our page

⌨️ (02:59:15) 32. Starting the layout – looking at the big picture

⌨️ (03:07:48) 33. Starting to think mobile first

⌨️ (03:10:37) 34. Styling the featured article

⌨️ (03:17:03) 35. Changing the visual order with flex box

⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins

⌨️ (03:27:05) 37. Changing the visual order with flex box

⌨️ (03:31:00) 38. Styling recent articles for large screens

⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints

⌨️ (03:45:41) 40. Using a new pseudo-class to wrap-up the homepage

⌨️ (03:53:12) 41. Creating the recent posts page

⌨️ (03:56:39) 42. Setting up the About Me page

⌨️ (04:00:54) 43. Fixing up some loose ends

⌨️ (04:05:27) 44. Important Note. The viewport meta tag

⌨️ (04:09:10) 45. Module wrap up

⌨️ (04:12:24) Outro

very nice tutorial!

I thought this was about thinking responsibly.😂 But I def learned alot, thanks man!

Amazing video !

really helpful video

man this guy is awesome

CSS Tutorials
This channel is for CSS beginners. Important Resources and CSS tricks will be provided here. Happy Web Development 😊
https://t.me/cssTutorials

See How to Develop Facebook Login Page Just in 4 Steps : https://youtu.be/Yj1LAxS76IU

KP rocks