18: How to Create A Responsive Website Using HTML and CSS | Learn HTML and CSS | Full Course

[@Dani_Krossing]

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzbin.info/www/bejne/rGnNdaF4jshjmNU&ab_channel=DaniKrossing

[@luckyhappy65]

Who is still watching it in 2020? Great tutorial!

[@ElronHumpperdink]

happydrawing Jan 2020 my first run through. Awesome stuff!

[@zakariya7130]

i do

[@aizazkhan2583]

me feb 2020

[@aizazkhan2583]

me feb 2020

[@aizazkhan2583]

me feb 2020

[@suparnobhattacharya6345]

I can't thank you enough for making these videos, sir. I don't know but your videos are so damn good that it makes me binge-watching them. Keep up the great work.

[@ryannbanquil2003]

One of the best tutorial I have ever come across. Salamat pre..

[@OurFinancialJourney2500]

I love ur channel every tutorial is in a simple playlist. Every thumbnail is simple you know EXACTLY what ur going to watch. Its easy to follow not to fast or to slow. Thank you soooooooo much man please keep making these coding tutorials.

[@larsosejohansen]

Desktop designing at 1:03:30 (for us that breaks this great tutorial in to pieces)

[@Another.DG.Round.]

godt noen har det xD

[@marksiely4747]

@@Another.DG.Round. what is Desktop designing at 1:03:30

[@leechristms-roblox4661]

I am doing all the lessons thank you mmtuts you are the best they are really helping me

[@aaronashkenazy4924]

your explanations and teachings are the best! gives me confidence to experiment on my own! great job!

[@ashenarchaic7177]

Dani your boi needs help, in creating the mobile version of the website i notice u had a tittle “my portfolio” in your code but it didn’t show on the web page as you run it on the web but mine is showing and its getting me a bit worried, i believe i missed something but don’t seem to know what i have watch over and over please i assist you boi thank you … just know you the best teacher in the world and much love bruv

[@richardferdinand7439]

great teacher!

[@frankcastellanos]

Outstanding!!

[@majdkillawe3193]

i love you man , awesome videos

[@adinoyi93]

Watched a lot of your videos...you've been helping a lot. Please can you make a video on Landing Pages in a website?? Thanks a lot

[@erving_lanc324]

34:47 so can someone clarify the instances where im gonna need to remember this trick he did? He wasn't quite clear on how the alignment gets screwed up when we change devices. Also isn't the section tag technically a box?

[@markgrimshaw2716]

Hi Dani. I've been viewing your tutorials and I am getting lots out of them, so thanks for taking all the time to make them. I wanted to be able to do simple websites for my own personal use. I'm really starting to put things together now, and it's all down to you and the short(ish) videos that you have created here. Bite sized chunks that I can dip into when I have time. Perfect. I did have an issue on the responsive web page where my image was only one line high and I managed to track it to a line in Rich Clarke's excellent reset stylesheet, where he's got the body line-height as 1. If i made that larger, I could see more of my image, but I noticed that you didn't change anything on that line, so I'm wondering if there's another reason for my image not displaying correctly, without changing this line height. Kind regards, Mark

[@nathansanchez1975]

In the header nav ul when I type width: fit-content; it says fit-content isn't a valid value for width property.

[@시원한라떼-h2p]

1:10:24 navbar css ! thanks a lot!

[@TriplabPro]

I am about half way through the video so maybe this has been addressed (apologies if so) but could you have done the navigation and banner using CSS Grid? I am new to CSS and wondering if I should just focus on learning grid

[@yashasvipurohit4130]

Pls tell me which app u are using to design the web.

[@IyanuOredein]

sir, Please do you have a complete Javascript course videos available either paid or free , I want to continue with your video thread. Thank you.

[@deepakjangra1505]

Great..! Literally, I never comment on any video whether I liked it or not. But I do have to appreciate your work, what you're doing... Great job!

[@JalalKhan-br3ld]

wat you think if i use illustrator as my pre layout web and jump to atom making the web further ...rather to use Xd or sketch..

[@Racools]

1:08:00 this is an example of where i wish flex box was used as an example in the future videos where there arent. i tried going back here and making another website but using flex box and not float and the video tutorial about flex box doesnt adress how you would do this

[@brooklynjs6384]

thank you very much

[@williamsdodoo4211]

i am going to use this as my boilerplate

[@lumennganje2721]

Hey why does it seem like I'm the only one left out? Daniel I don't understand which style sheet is for which . I just see you changing device emulators and opening fresh new style sheets. Please explain. I am sort of mixed up but understanding the code quite well

[@Dani_Krossing]

There is only ONE style sheet in this video, I'm not jumping around in different ones. Whenever I change the device version of the website inside the browser, I'm not switching style sheets.

[@TheLeontheking]

did anyone ever had the same really strange error as i had? html is for some reason linking to another style.css outside it's rootfolder.. and the only fix is to rename the stylesheet to something like style2.css and link to that style2.css.. i have absolutely no idea of how and why this error occurs..

[@MylesGmail]

I love ur videos!

[@sammypandey6833]

I didn't understand the task of Display : block or inline-block.... please help me with this....

[@mayankkhandelwal6224]

1:02:45 for overflow:hidden;

[@sayedsulimanvideos]

bro you are great. But i had a problem in this website as i copy same like u . the problem is this when in index-link div i floated the footer is also floated . u understand what i m trying to say u??

[@gunner6967]

that's happened to me, but I add clear:both; in footer in css and it works

[@loquayrocks]

ok, i started learning HTML and CSS on Thursday (today is Saturday). I have done all sorts of courses from Udemy to Linkedin. None have been this good. I've spent the whole day following Dani and creating this site. I have made many errors so have had to pause for long periods whilst trying to find the error (such as a missed semi colon or a tag with no close). I've been at it for twelve hours and completed lessons 13 through to 18.. I'm exhausted.. but want to keep going. Dani, you're a seriously brilliant teacher . I'm jobless at the moment so don't have the money to support your patreon but I promise, when I do get a job, I'm jumping on there! Thanks mate!

[@JonathanSantos-gw6hk]

When I think of legends, I think of mmtuts.

[@ElronHumpperdink]

Jay J Don’t be gae

[@filippians413]

Best HTML/CSS tutorials I've found. So thorough and you don't rush through the material. Thank you.

[@GlaucoLustosa1]

To solve this --> "Nothing change in header nav ul "width: fit-content" in css code to center the links " Portfolio, About me and Contact"" If you use mozzila you must use: width: -moz-fit-content;

[@xLordJeevesx]

Great tip! I was freaking out!

[@renanfuzita7962]

If you are not using Mozzila neither Chrome use display:table;

[@EnricMartin1987]

Thanks, man!

[@vukdjordjevic2792]

Thanks alot, that thing was so anoying.

[@motivees3934]

this to valuable for me

[@plaidev]

7:19 "times new roman (god forbid you ever use that one)" 😂😂😂

[@bluestormdiycrafts5259]

Best tutorial I have ever come across.

[@mrcodexe4984]

#agree with your

[@fajimeyemichael8055]

You love copying and pasting alot😂 I noticed it in your videos . You prefer to copy “index-banner-cases” and paste it somewhere called “index-banner-portfolio “ than just change portfolio to cases manually 😂 It’s cool tho😂 Great tutorial 👍🏾 I finished html and css on sololearn but it’s mostly just an introductory course. I’m looking to follow your html and css course from scratch because i like the way you teach and talk. Thank you

[@jeremyadeler]

Really, thanks you so much! I just started the code. Although I'm French, I understand you perfectly! continue like this, please it's top.

[@patdev2476]

I must say that all your videos are awesome. Keep up the good work.I have learnt a lot from you.Thanks bro.

[@wirito]

I have followed the instructions but the: width: fit-content; at minute 22:32 is not working for me. Any ideas why? I had to use: padding: 0 50px; instead :|

[@rehulus8851]

same

[@michaelbulkley9141]

I am using Firefox. I had to use width: -moz-fit-content; in order for mine to work. There are some variations between browsers.

[@johndavidcausapin8162]

why doesn't my background image show up? Even the if the url is correct, it says file not found on the browser.... please help!!!

[@garysu9519]

Who is still watching in 2022? I bet people will revisit here even if it were 3022. Too great!

[@loquayrocks]

i have to say, it makes me giggle everytime Dani says "curly brackets"... it's the accent I think

[@louzynerd129]

for anyone who is having a problem with media queries not working put this line in your index.html file with the links:

[@George-jx3qn]

Thank you so much

[@rrvital1]

Keep doing what you're doing my friend...amazing content

[@pilsmer]

For some reason ' width: fit-content; ' only works on Chrome...

[@renanfuzita7962]

try to add display: table after width: fit-content;

[@zakariya7130]

@@renanfuzita7962 thanks man

[@zakariya7130]

@@renanfuzita7962 i want to ask you it's gonna effect if i'm using chrome

[@davescorneroftheworld1147]

I have watched many of your videos, I mean A LOT of them. I watched the one where you embedded a KZbin video into a HTML document. That worked GREAT, along with all other videos I have watched. I am working on a website that has a "sticky" navbar. The KZbin video goes OVER THE TOP of the "sticky" navbar and not under it. Is there a way to "layer" content in CSS or HTML? I am sure there is a fix for this but I have no idea what it would be. The temporary web address is: www.HorseShowVideoProductions.com/GotWoodNM I am trying to learn PHP so this website is PHP files. You are teaching me PHP also. Thank you for all the GREAT videos you have done.

[@tylerw2314]

I'm facing this same issue now but don't know what to do. Any help?

[@tylerw2314]

And please for his PHP tutorial links. Thanks

[@davescorneroftheworld1147]

@@tylerw2314 Since then I have NOT used KZbin videos because of several things mostly because after the video has played KZbin files the screen with there stuff. Anyway I think the answer is "Z-Index" I think that is right. That is the way to layer your content. BEST OF LUCK, let me know how it works

[@guessabbenchohra4661]

I w'd like to thank you for the lessons you do, i realy cant stop watchin them, Salam (Peace) from Algeria

[@trvsh8445]

my assignment for this is due tomorrow, thank you for saving my grades :)

[@justforhaha5555]

just started web dev to learn new skills while being stuck at home because of the pandemic and this kind of teacher is all we need guys hahaha thanks for the lesson materials and clear instructions on whats happening in the process .. stay safe and more power to your channel. loving the contents keep it up!!

[@giwrgosiwannidis4684]

I am I the only one having trouble with the photos??Please find me a similar photo that adjusts correctly like yours

[@suparnobhattacharya6345]

same here bruh

[@ronvossen8993]

Nothing change in header nav ul "width: fit-content" in css code to center the links " Portfolio, About me and Contact"

[@MrDflego]

Same here, in the Inspect Element it says invalid property value with a yellow exclamation mark under header nav ul with a line through width: fit-content.

[@GlaucoLustosa1]

You must use width: -moz-fit-content; If you use Mozzila Browser

[@rishabbulusu160]

How do I add variables in css?

[@hozay6552]

Not sure if you ever checked up on this but you use the ':root' selector. developer.mozilla.org/en-US/docs/Web/CSS/:root Assigning it on a property would just be using the var() function and inside will be the variable. (At least from my knowledge)

[@rishabbulusu160]

@Laksh Taneja are you sure it works in css i know it works in java script

[@jemjem8902]

You can use classes or id's

[@AitorMorgado]

I can't thank you enough for these tutorials, they're making me to want to learn more and more. You are a wonderful teacher and I wish you the best!

[@tylerw2314]

Discovering this your youtube channel is a great joy to me, for real I enjoyed all your HTML tutorials. If there are video tutorials for javascript and PHP please I really wish to know the links

[@ahmedboshra7625]

yes he create JS Tutorials and PHP, visit his youtube channel playlist and you will find them

[@impact2631]

If your css image doesn't work try this. background-image:url('../img/background.jpeg');

[@vukdjordjevic2792]

Works :D

[@mandywinks1355]

really amazing tutorial! I have watched a lot of tutorials, and your style of teaching is really resonating w/ me, thanks so much!

[@kyleancheta]

Thanks for this! Probably a little too long for most, but it's been fun following/typing along and making the site "mine", more or less. I'm familiar with HTML/CSS but this is nice since it reinforces concepts and I don't have to think too much (about the design, structure, little nuances, etc.); I just have to follow along, lol.

[@croanna_]

Great tutorial, but I need help... Can you please make a tutorial how to put png logo instead of MMTUTS letters, thank you 😊

[@gibran5208]

Whew took me 4-6 hours to finish this, thanks!

[@aaronfidelis3188]

Just one question : I'm kinda new to this whole thing... I ended up making a website that is not really nice-looking for mobile... How can I make a responsive page then? 😅

[@YEABSIRATESFAYE-l9k]

best video keep it up bro!!!!!👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍🤙🤙

[@myanh2299]

Thanks u a lot to helping me know how to create a responsive website ! I will try on my lastest project. And your voice is very clear , I am not good at English but I can understand what U said..

[@billychubb5916]

any help on why my footer color isnt showing? i copied all the code exactly and checked it

[@titooplata8141]

Hey man Im a year late but I think I figured it out, put the "footer ul li a" styling code in "footer ul li" youre gonna have to mess around with it a bit but I typed in the code there and it worked. Idk if your still into coding but I thought help:)

[@rodrigocastaneda5815]

Bro its not working the html code all looks yellow instead of green meaning that it dont link with the css And the css code is blue and purple and yellow please help

[@ansumanakamara9601]

my background-image: url('img/Ansu.jpg'); is not applying to my html page why?

[@Redmile2006]

I have the same problem. In the class .index-banner, the image will not appear as the background-image for the section tag.

[@Redmile2006]

I just figured out my problem. I had to add ../ before my url because I have a CSS and images folder at the same level, so I had to drop down one folder first to access the images folder.

[@tiensenentertainment1612]

I think you're the best tutor out there, I just learnt HTML +CSS basics so easily it was thrilling

[@zayaronment]

Thank you, it is very good during these quarantines.

[@calibr0636]

Finally done with this long video, copied about 90%of the code but some headers, classes, margins, and padding of mine were different.

[@calibr0636]

It took me 3 days to copy, understand and watch the video

[@AlwafiCharki]

@@calibr0636 Can you please tell me the name of this program that he used as a tool designing in the video ?

[@calibr0636]

Alwafi Charki I actually don’t know, I finished months ago, I now know JavaScript. Just try to understand the different aspects and you’ll get there

[@inmart100]

Great tutorial, but it doesn't work for me this is header nav ul { display: block; margin: 0 auto; width: fit-content; } but i don't why, because i have correct HTML and CSS code as it is on this tutorial. I use VS STUDIO code

[@azeez7675]

Width: fit-content was not working for me. I found out that it's because I was using firefox, but it works fine in Chrome. To make it work in Mozilla, try this instead: width: -moz-fit-content; Hope this helps someone. PS: Thanks a lot Dani

[@nimaojaghi2427]

Hello My Brother You Really After All My Teachers And My Brothers Learn Me Css Code On Html For Responsive For How And I Want To Say To You Thank You Very Very Much Ang God Blesed You And Your Family And I wish Best For You And Your Love .

[@arvincortezcapulong4724]

Hi Dani, The $5 Paatreon subscription, will it get all the turorial materials for this youtube courses for HTML and CSS? and what else? I am new to Patreon. PLEASE REPLY, arvin

[@pristine_the_tech_guy]

Hello mmtuts! i am using chrome book not computer. and i have been using it to do my coding, but my browser is not showing me code when i left click. how can i be able to know the width of all devices? thanks

[@waltergomezu686]

Does anyone know why the code doesn't work on firefox? I was stuck at 22:24, because the part when he wrote: header nav ul { } with the width: fit-content; in the firefox inspector said that is was not a valid property, I don't know if there will be a problem if I launch my page and open it on firefox, but if I open the html file on Chrome it work perfectly. Thank you very much to anyone to replays, I'm just a beginner in code and try to make my own page 🙏🏼.

[@pirat.3946]

Hey at min 1:21:45 hr it doesnt wanna set me such a big wrapper :( like the div on top doesnt recognise the div on the bottom! please help edit: i was able to put such long div in notepad++ save it open it back on atom and the div worked :d

[@Iainn94]

Yeah this part didn't work for me too. The problem is the div is nested within the main but is then ended outside the main (after the footer) so I have no idea why his code didn't fail in the vid :L Solution for me was to separate the banner section out of main.

[@Iainn94]

Update: better solution even was to just have two divs, one inside the main (from the banner down) and the other inside the footer (whole thing)

[@pirat.3946]

@@Iainn94 a great solution! thanks a lot for responding :))

[@Racools]

1:23:30 um....what? maybe im just slow and bad at math but am i the only one that felt like they didnt understand this and the math explanation was just skipped. ik thats not the whole point of the video but still would of loved to know where 60 came from since i been sitting here trying to do the margin math etc and im not getting 60 or 30. and then right after you change it to 20 (per square) but idk what thats supposed to mean. Out of over an hour and a half of the video this is my only small complaint which says alot about the video lol very well done

[@Stefan-xh1hi]

I was about to like the video but soon realized that I had already liked it. Great course! I love it! ❤

[@fatinnurasyiqin6428]

sorry for disturbing you but i have created landing page using html code and i already insert video. video from my laptop . not embed from youtube. when i connect to my mobile phone, the video is not work. does not play anything. but when i connect to laptop. its work perfectly. can you help me? how to make the video play in mobile phone. thank you

[@BStudioCD]

why you are using "width: fit-content" for one case and hasnt use flexbox for whole layout?) caniuse.com/#search=fit-content caniuse.com/#search=flexbox

[@gautamvikhe6043]

at 1.17.23...why cant we just adjust the height of banner in the original media query itself....why do we hve to copy it and then change the height of banner?

[@barcelosm6395]

Just a quick tip for people who are using Firefox and are not seeing the results of "width: fit-content;", use "width: -moz-fit-content;" instead(without the quotation marks, of course).

[@danielchetrari3453]

Thanks a lot, was very confused about this.

[@martynpage4823]

Hi Dani...I have got to this building our first project....I have paid to have access to videos and lesson files but cannot find any images for this video on your site....? can you help me...

[@taki1777]

i don't know why, when I input float:left in header nav ul li{ } it showing different views or underline with yellow color(may be error)

[@MrKratosYT]

bro at 36:19 in my mobile view horizontal scroll is coming how to correct that anyone help me out

[@CodeRed-xj3ut]

Im about to create my own portfolio and do i need to list my skills and rank them? For example html 5 50%? Do i need to add that or just present my works and let them judge it?

[@mykevin1122]

Mmtuts and Traversy Media are my two favorite tutorial channels

[@IyanuOredein]

I have been looking for an html/css tutorial video to make me better at coding, as far as i can say, Your the Best!!!!

[@slavkonovalov1600]

HELP, please! At 22:30 the "width: fit-content" part doesn't work. Any suggestions?

[@nika.silharova7065]

No matter what number I put there, the font-weight won't work...it stays the same in the browser. Can anyone help please?

[@KiwisCode]

Who is still watching it in 2022? Great tutorial!

[@Dani_Krossing]

Me! And thank you! 😊

[@yotsusan_machi]

just css and html??? No javascript and php ??? Wow amazing i will learn html and css to build responsive web

[@mayanwiner]

display table thingy not working for me ... 36:23 added margin top for the h2 : 200px . solved for now .

[@kv8671]

Who's watching in 2021?😊 Just finished my first responsive website thanks Dani

[@nightcoreheaven8351]

I like how he explain every single thing we come across unlike the other tutorials they'll just let us copy -_-

[@JV-nx8xm]

Isnt better to create this easy design for iPhone in %? For different types of devices. For smaller/old devices isnt it too big?

[@codewithzyn]

My header font is not showing up after reloading the website, so how can you fix this issue? Thanks!

[@rollingchoncho]

background-image isn’t working. I used and it shows up so I know I linked it correctly. I tried the “../img” trick but the didn’t do it. How can I fix this?

[@miakomlenac6451]

I have got the same problemand I tried everything. Do you have a solution? Please, or somebody else?

[@rollingchoncho]

mia komlenac I don’t remember my exact fix here but I remember it was a referencing error. It was either in the wrong folder or it was incorrect syntax.

[@fountainboom3925]

watching in 2020,and this is tutorial is so easy to understand. Thanks!!