Build a Responsive, Mobile First Website - HTML5 & CSS3

[@PeriMoritz]

I had the same problem with emmet and the tag until I researched and found that typing "mn" instead of "main" is the shorthand for the html5 main tag. I hope that helps. Thanks for your awesome tutorial btw.

[@boboboboboboo7522]

thanks boss

[@allisonchen795]

I wonder which emmet did you download?

[@SuburbanPreparedness]

"main" works for me! They must've updated it.

[@kevinzhang8974]

again, very well explained in the simple term ... very easy to understand. I got up @ 6:00 and killed one 1 hour to complete this while 2 kids are still sleeping ... now ... back to reality: awake them up .. prepare the breakfast and drop them to school ... then 1h drive for my daily full-time job ... :-)

[@k1ngjulien_]

I see you are taking brads advice from his learning outside of a fulltime job video 👍

[@prabhukadode723]

where is ur wife ? can she not do anything or help u in doing all these work ?

[@kevinzhang8974]

my wife also had a full-time job ... yesterday is my turn to drop the kids ... she went worked before 6:00 am ... life is tough ... :-)

[@kevinzhang8974]

I followed Brad @ beginning of this year .... I wished I had discovered his channel earlier ... :-) I had duplicated 80% Brad's past 10 months KZbin couses + 2 udemy classes since then... Again, the best part for Brad's material: simple & practice + all latest trend and technology are covered ... Also, Brad shared lots of his advice for developers ... these advices are very helpful ...

[@TaelurAlexis]

prabhu kadode wow lol

[@CloseStudios]

This channel is the reason I didn't quit learning web dev.

[@hector_ojeda_bustos]

The scrolll effect you can do it, with only css: html { scroll-behavior: smooth; }

[@pulatoff7]

can be add time?

[@damirplicanic4190]

Thanks Traversy Media, not only for this video, but many others. My goal is to become full-stack, cause I guess I can't make enough money being Philosophy/Sociology - teacher/professor, but also it is not all in the money. it is about leraning new things, and making something new, and something I can use for my personal use. I can see you are quit good at "knowledge transfer", so everyone can understand. Damir

[@andreacraig5426]

I am extremely excited I tripped on this tutorial! Currently taking a class and my professor is great but sometimes his tutorials are all over the place. REALLY hard to follow. Your flow was easy to follow and understand! Thank you!

[@Baelstrax]

Thank you, I took 8 months to buy myself a laptop, the sacrifice is worth it, I got through the whole video. Your videos are without a doubt valuable. Again, thank you.

[@Fabyfakid]

Ive gone through the tutorials but still felt stuck, really needed stuff like this where you see everything come together

[@kurostaheri-golvrzi8343]

Brad is a gift to this world directly from Heaven. We're incredibly lucky to have him.

[@MaximilianBerkmann]

Not sure if you already knew that since you released that video but Emmet allows you to also write the content of the tag you're "short-handing" like h2{Our work} which would produce: Our work.

[@timothyshores]

I've stumbled upon some of your more advanced tutorials. Thank you for creating the simple beginner friendly tutorials as well. I like how you started off with a brief overview of Emmet in VS Code.

[@kno3754]

You make learning fun. Keep up the good work! p.s please make more videos making websites from scratch.

[@LatNWarrior]

I was webmaster certified before I retired and have learned a lot form your videos; Thank you for your shared knowledge. I am very much interested in CSS grid design. I would really like to see a project with just HTML & CSS without any flexbox. I am very interested in doing it all with CSS; NO Flexbox!

[@jamesequanimity9963]

I love how you tell us what every line of codes are for and because of that you make learning much more easier. Thank you so much :)

[@BadalKumar-pi7ud]

Whenever I need some kind of help related to web development, Brad is the first word that comes in my mind. Brad Traversy - Name is enough !!

[@curtiskil]

Every time I think I've seen all of your projects for JS I end up stumbling across another one 🙌🏼

[@freelancermahi4617]

Sir I'm from Bangladesh. Really i understand all of your tutorials is easily. thank you so much.

[@kevinzhang8974]

I did this tutorial couple of months ago. Today, I re did it again to refresh few things. Again, simple, plain, useful ... Happy Friday!!!!

[@anamamer2600]

what an amazing coincidence. just thought of learning mobile first responsive design. typed in traversy media mobile first knowing full well that only grid css mobile first videos are present but would u look at this. 6 hours since upload. Nice gonna watch it. Also thanks to you i have become very very good at web designing. once i get a job and have my own bank account i'll definitely become a patron. thank you very much for sharing your knowledge with us

[@patcrossart3975]

Lean and relevant, Traversy Media leads the viewer in an easy to follow and logical progression from the beginning to the end. I appreciate that kind of tutorial because it's just like watching over his shoulder as he works and narrates each step he takes. Also, it helps that he stays on tract (rather than diverting into elaborations that too often distract and confuse like rabbit trails). Well done. Thank you!

[@ashishkpkpkp]

This channel will remain forever in my subscription list...

[@umangajitsaria4158]

Amazing, I just revised my entire pack of html and css with this video. Thanks a lot, consider adding 'buy me a coffee' for support because that's better than patreon :)

[@michelle778]

I just started a photography, responsive mobile first project, I guess I watch yours first and copy and paste :P thank you!

[@pavleta777]

So much valuable information, served in a very understandable and simple way which makes it fun to learn! I am studying with so much pleasure! I can't believe it! I have started to build small websites for practice and I haven't even attended any other classes whatsoever! All I know came from this channel! Thank you, Brad, for your time and dedication, you are the best teacher we could pray for! God bless you!

[@tevolutionYT]

I never learned more from a single video!! This is the reason I love youtube

[@deltaninjadrm]

Hey man. I appreciate the video. I started web development 3 days ago, and my knowledge was limited. Thanks to your other videos and this one, I learned a-lot, but I've still got a long way to go. Thank you :)

[@benfrese3573]

Excellent. I know this stuff, but it's always good to see the workflow of someone else. Thank you very much, Sir.

[@LatNWarrior]

I watch you on my TV so am not always able to comment; but I always give the thumbs up because you do put out a great tutorial and I enjoy and learn from the content.

[@kariminic]

A real refresher tutorial on HTML 5 & CSS 3. Thanks Brad

[@pampula9327]

Can't wait to code along this one when I get off of my shift. Thanks for uploading this, it looks really cool!

[@boboz2543]

Traversy Media taught me so much thank you.

[@blairowens22]

This was a HUGE help. Easy to follow and my first full website I created. Thank you!

[@jondarling7933]

Awesome. I dig the way you code over many others in the biz. Thanks a lot man.

[@austing.8517]

You helped so, so much man. You rock. Great pacing. Great video. Super helpful. Thank you!

[@arminb6896]

Simple and clear explanation. Thank you Brad!

[@jacobtran4010]

thank you so much for the clarification. I learn a lot from tis course because u explain Emmitt and among other things.

[@jacobtran4010]

I also just subscribe to your channel and like the content video. Did I recall this channel used to be Travis? he was a designer I think...got a job at Google. I didn't really like his teaching style too much but now I'm glad you take over. I subscribed and hopefully will support your channel by purchasing your course through Udemy as well.

[@Leevy27]

Another great tutorial explaining how to simply design responsive pages without Bootstrap and other crappy framework. Many thanks for this!

[@akeemoyerinde1294]

Brad, if no one has ever told you that you are wonderful, you are. If no one has ever told you that you are awesome, you are. If no one has ever told you that you are lovely, you are. I can explain how I feel for you now but bro, I pray may you offspring get the blessing of God wherever they go.

[@Gabu_]

You've got such a nice and relaxing voice. Always a treat.

[@ColombusLeBus]

Amazing thank you, I can practice my mobile first now

[@parthasarthighosh8316]

Need more mobile first website videos....when position:absolute and position:relative works

[@starthu]

this was a very nice and easy tutorial, i literally coded along with u. thank you very much!

[@kristofferhogberg8011]

Such a rockstar tutorial! Love it!

[@projectDominic]

Thanks Brad, just finished worked great

[@DanielK48]

It seems an awesome video but Ill watch it tomorow cuz it's 1:30 am in Bulgaria now 😀

[@nagahumanbeingzooofparticl8836]

4:44 am here in India

[@TraversyMedia]

I hear ya. I know its a late release today 😊

[@coskuncinar]

its very good video, i watched although its 02:45 in Turkey :)

[@FunIsGoingOn]

3h after that comment its roughly 4:30 here in germany, checked my phone to set alarm clock, and hey, notified about a new video of Brad. ^^

[@e9igma924]

So , what is the time now in Bulgaria?

[@coding_with_thomas]

Great tutorial exactly what i am was looking for, all worked great!

[@AhmedAhmed-wc8yy]

thank you we need a crash course about the blockchain and DAPPS

[@_isaac_muniz_]

Thanks for helping out in my journey

[@GhostlordGames]

Hey Brad, I was wondering, how old are you? When did you start coding? I am 29, about to take a bootcamp in full stack web development for the next 6 months. Changing my career is scary and exciting. Thanks for consistently providing awesome, relevant and informative content about my new passion, even though you have kids and a family to take care of.

[@lettiphas]

How was the bootcamp?

[@ms77grz]

One of the best channels. Thank you very much!

[@thenerd4308]

Thank you for another awesome video. Could you please make an ecommerce website using HTML5, CSS3 & JavaScript/Jquery or WordPress?

[@kayanthepioneer]

Hi , i have searched the entire internet on css skew property but so far been unable to find a good tutorial, so kinda making u this request to upload at least 1 such video which i really wish to be a thorough 1 & covering all the bases as the rest of ur videos which help me in self-tutoring myself in programming. Thanx in advance

[@EasyCodingStudio]

Very helpful love u for making such videos from AFGHANISTAN

[@rohitsrao]

Loving these videos. So many things to learn. Thanks for making them!

[@jonbonzobonham]

I tried for an hour to make the smooth-scroll behaviour work with only css, using scroll-behaviour. I failed again and again. Can someone help me? Html and css are just the same as Brad's. I just want to implement smooth-scroll with css only

[@ebukanwosu8952]

Very nice Brad, Kindly note that I'm waiting patiently and prayerfully for you to create a course on dynamic functional mobile app development with projects

[@krystlemensah1984]

the best guy on youtube by far

[@zackdaspy357]

Awesome! You Have made my Work Easy!

[@fazlerabbi1300]

Really, you are great! Greetings from Bangladesh.

[@jesper504]

I love your work. So happy someone with your knowledge is also a good teacher. I do have a question tho. Why not use just native javascript for the view work button? It's less code and looks better.

[@jimdart8219]

Are you psychic or somthing. Been getting ready to move soon, so I thought I would practice mobile first and media queries and stuff when I had time instead of building projects till I got set up again and had time to focus. Low and behold Traversy Media to the rescue with some more useful information on what I am currently dong. Thanks Brad, it's always nice when you are this in-tune with your followers.

[@gohyewhoe7587]

Thx for the upload. I've learned a great deal watching this tutorial, really good stuff. i found that the part on the flex is pretty difficult to achieve. I've tried using grid & it works better: #landing { background: #fff; display:grid; grid-template-columns: 1fr 2fr; height:100vh; } #landing-text{ text-align:center; margin:auto; } #landing-image{ background-image:url(../img/samsung.jpg); background-position:center; background-size:cover; background-repeat: no-repeat; height:100vh; } p.s. i learned the grid from your other tutorial . : )

[@dioncadiz]

This is what's missing in the udemy course you have with HTML & CSS. The mobile first approach of web design hope you include something like this in your course.

[@DanielK48]

Damn, Brad's style of coding is just beautiful. :)

[@in45do34]

This courses are excellent! I've followd your tutorials from your web development 2020 and I have to say you've done so well with the explanation and how do you get all the sources, etch. I'm truly happy to learn these tutorials :D

[@sviatoslav3347]

new video from Brad, automatically LIKE. Thank you Brad!!!

[@krrishchheda2252]

your tutorial is awesome, this was the video I saw of yours. It build a craze to watch all your tutorial videos Thanks

[@samshanmukh]

Amazing video as always but the screen is little bit small for the text to be visible. Please zoom the screen next time.

[@russelfernandes8483]

As usual another helpful instructional video from Traversy/Brad. Have purchased Udemy Python as well - all top notch. Pace of the instruction, actual programming esp. with the live server, taking time to explain to the beginner what emmett is, etc. Wonderful!

[@kenurizar2501]

Why not use figcaption tag? And enclose the image inside a fig tag? Sorry, new to HTML. Love this videos I’m learning SO MUCH

[@blacklotus1606]

For those who want to do the animation in Vanilla JS : let viewwork = document.getElementById('view-work'); let element = document.getElementById('images'); let elementTop = element.offsetTop; // top position of the div#images viewwork.addEventListener('click', moveTo); function moveTo(){ window.scrollTo({ top: elementTop, behavior: "smooth" }) }

[@SuprunAlexey]

Wooow, nice course!! Very simple project for newbies))

[@197925alexandr]

wow i loved. Excellent explanation .

[@newabyuser]

its hard to keep up with brad...but this is a nice materials. Just finished coding along with him and i picked up new skills from html. Never know you can use import in css like Using namespace in C#

[@ericzorn3735]

Great video! Would love to see more on react and redux connecting with a backend

[@tcp5212]

Never got of my game so fast. Thank you brad

[@Toulkun]

300k subs is too low for you, you need min 5mil. I love your channel keep up the great work, it helps alot.

[@Smiteme]

Really good tutorial, I have one problem. In the mobile version the image stays to the right of the text rather than go to the bottom. I made sure I wrote it down the same but I'm missing something, any idea? Again awesome video, clear, concise and straight to the point.

[@Batkovichable]

Man, I would love to watch a live coding stream by Brad. I know you have said in the past that that's not really your thing, but still ;)

[@robertcoffie8789]

Brad thanks for your videos they have really helped me a lot both here and udemy .Please can you make a tutorials on CSS

[@alanarango4752]

I really enjoyed this video. Your description of properties and their values was easy to understand. I hope to see more of these soon preferably with some JavaScript for animation. I couldn't get the jQuery to work from this video. Future videos that combine HTML/CSS/JavaScript would be great.

[@nedu7971]

Its 12.42am midnight in Nigeria...but I dont care am watching this video right away😀😀

[@Lostincloud0]

Freaking amazing bro. 🙂 🇳🇬

[@shankargs7685]

Hi Brad, Great Video.. !! I have a question, I'm following along however the landing image is not appearing in full screen mode but appears on mobile screen (small window). What I'm doing wrong? P.S - code is exactly same nothing changed.

[@deenapillay5529]

Hi , awesome video. do you have any videos that show you how to add social media buttons to this same responsive build?

[@ernestoorellana344]

Thank you for the tutorial! It was really well explained and easy to follow.

[@prinny04]

Another great video! I struggled to find a typo for about 30 mins, though. LOL. Also, locally, I couldn't make a .js to animate the click. I found a surprisingly simple solution. Just like how you @import the font, I @imported the jquery via a link to a smooth scroll .js. Love easy fixes!!!

[@brianadams2862]

Wow Great video as I leran greater frontend dev for my portfolio thanks

[@benjaminlehmann]

Exceptional. Great contribution. Thanks.

[@markmadrona4263]

Hi brad. thank you for your awesome tutorials.So easy to understand and very helpful. Keep up the good work!

[@Zero-ss6pn]

Brad, you are amazing!!!

[@okeowofelix4537]

Thanks for this tutorial. My chrome cannot be reduced to the extent you shown in the tutorial, please what can I do. The scroll effect is not working. Please help me with it.

[@Kronic19cdg]

This another great video thank you. Im having a problem with flex for the #landing image

[@StoneyBlazer420]

I had the same problem and it turned out that my browser wouldn't let me minimize my window to 500px or less. I changed the min-width in the media query to 550px and it ended up working in my browser.

[@stephh4392]

gonna watch tomorrow, happy to watch your new videos, all good and useful stuff.

[@maxamedqooje5971]

many thanks to you guys, you really helped me to finish my project. both vedios are 100% top, i wish you gonna turn to js and if you have done already please let me get the link, i ilke your explanatiion. thanks once again.👍✌

[@byronquesadachaves6718]

Amazing! Thank you so much, man! Learned a lot from the video.

[@jamalabdullahi8155]

I like beginners work Keep doing sir . Many thanks 🙏🏽 sir

[@kamalhm-dev]

hey brad,just a suggestion, split it into parts that are less than 7 mins each. I know im not the only one who liked it

[@MikeJasnowski]

Great tutorial! Very well explained and pacing was good too.

[@PlayerHeader]

You are an awesome guy keep going you helped me a lot!! Thanks!!

[@basspool3176]

Amazing tutorial. Thank you!!