Introduction To Responsive Web Design - HTML & CSS Tutorial
video description
Date: 2022-03-14
Related videos
Comments and reviews: 9
Neo
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.
reply
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.
reply
Rabih
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%
reply
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%
reply
Veselina
i can not thank you enough ,Sir! I have been trough tons of videos and tutorials ...for the first time i actually understand WHAT is done and WHY it is done this way! You are an amazing teacher ,and a awesome human being! And i cannot thank you enough ! God bless you and the people you love! Thank you! Thank you! Thank you!
reply
i can not thank you enough ,Sir! I have been trough tons of videos and tutorials ...for the first time i actually understand WHAT is done and WHY it is done this way! You are an amazing teacher ,and a awesome human being! And i cannot thank you enough ! God bless you and the people you love! Thank you! Thank you! Thank you!
reply
Bob
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
reply
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
reply
Exzaf
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
reply
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
reply
Kid
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 :(
reply
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 :(
reply
Udoh
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?
reply
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?
reply
Dibbyarup
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!
reply
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!
reply
Muhammed
just finished, thank you so much !! It's a good course for who knows css and html but just sucks at make responsive websites.
reply
just finished, thank you so much !! It's a good course for who knows css and html but just sucks at make responsive websites.
reply
Add a review, comment
Other channel videos
