Hey guys, hope you enjoy the project! Change the showcase-form width to 300px in the mobile media query(500px) to get it to look right on really small screens.
Hi, I love your courses, they’ve really been of great help, I want to go into software testing, and cypress was suggested for me, can you make a video on that? Or do you have any suggestions for me, Thanks any assistance will be greatly appreciated
Wow man, thanks so much for this tutorial. You've shown me a new way to work. Look I am new to HTML and CSS and I was trying to find a workflow to make things simple and faster, this video has shown me that. By the way, I am an experienced graphic designer.
Sir, in your videos, you don't teach to make a navbar that is present in modern websites. We really want to learn to create navbar, a good one . Also I can't find tutorial which teaches animation happening when click or with some interaction with javascript, I mean css animation with javascript code, we really want to learn such things, it would be great if you make such a big course on that kind of things too :) , thank you sir for everything, It's great thing that we get such valuable things for free on youtube ☺️
May I share a thought on how I'd like to build a website? First I would build the structure of the whole site, then "color" it. This way I'm able to keep the whole picture and not focus too much on details. Also it would help to see similarities like a set of colors, vertical spacing, paddings and so on. What do you think?
I'm 27 minutes into this tutorial. Of course, those 27 minutes are about 2 hours of my time. Still, I'm so engrossed I've hardly noticed the time. This has to be the best HTML & CSS course by far.
Pretty much I think these videos is just here to demonstrate how different people work with HTML & CSS. You don't really learn how to do anything here. I think you are finding that out. In programming, you only learn by doing jobs and work. Nobody is going to give you work to only do HTML / CSS work. I think the best thing is looking for videos talking about MERN, PHP, Full Stack development, and the like. You only learn by doing everything together and understanding how the elements work together. Similarly, Python and JavaScript and other scripts, just find a MERN or MEAN to instruction to see how all things work together. Learning Python and JavaScript separately is useless in my opinion. I think I would only watch these videos once I am an experienced programmer just to see how someone else might use these entities differently that I do. Once you are programming and doing work, you will mostly be looking into help pages for the product you are using. Understanding how to use those helps is what you really need to understand.
Yeah, sometimes I get crap from JS devs when I do strictly HTML/CSS, but a giant part of my audience is from videos like that as well as my HTML and CSS crash courses which are the most viewed on the channel :)
@@TraversyMedia If you listened to those JS devs, I think right now I would be thinking, "How can I use and together???" lol. Now with your help, I am finally a full stack dev! :) (aka Nano)
Yup me too ..That was my first project ever ..its has been an year after that. It has also only been an year+ since i have started to code (started at 16 ..) and ..Brad ..man he was really a huge inspiration for me . The amount of knowledge i have gain from brad is amazing . He is a great guy!
I very rarely leave comments under youtube videos, but every video of yours make me want to leave a paragraph of appreciation for all your efforts. Thank you for this channel, I feel like we all owe you a great deal for what you are doing. Such high quality content and that too for free...man I can only say God bless you Brad and Thank you!
I have been coding professionally for over 30 years, and I still managed to pick up a lot of cool new stuff from this tut. The longer you work as a coder, the easier it is to fall into a rut and just go with the stuff you’ve used for years. This is a great opportunity to get out of the comfort zone and look at code from a new angle. Your style is very easy to follow and the tutorial was clear, organized, and , most important of all, highly professional. Highly recommend this tutorial to everybody regardless of skill level and experience. You'll get the biggest benefit if you code along with Brad as he builds out the site. Enjoy!
Hey guys how are you doing? Brad, what an amazing tutorial!!. On 1:31:02 if anyone needs the icons on features' page here they are (Just replace the "fa-server" class, that we copied from the first card, to the following) : - fa-server (The one we did at the tutorial); - fa-network-wired; - fa-laptop-code; - fa-database; - fa-power-off; - fa-upload.
Sir i can't say how much this means to me as a beginner, i feel really bad because i am unable to support you but i clicked every ads i could. i wish you good health and happiness. Thank you for your great work.
Thank you Brad you are awesome!!!! I miss your tutorials. I started to code 2 years ago with any previous knowledge about Coding. Now I have a portfolio website and I started already to look for a front end job. It's hard for a rookie with no working experience and now it's even harder, due to the pandemic crisis. You keep me motivated. Thank you again
I initially started this as a fun project to practice my basic HTML and when I heard you mention media queries and responsive design I hesitated because I have never heard of those before. I contemplated just doing the HTML and CSS and coming back to do the media queries once I learned about it but I stuck with it and followed along with the whole tutorial. I've honestly learned so much from this tutorial and I definitely learned more than I expected. You made everything so easy to understand and much simpler than I thought, especially media queries which I thought would be something impossible for me to learn but I now feel comfortable enough to do them on my own. To anyone thinking about watching this tutorial, please do! Especially if you're new to web development like me. The time fly's by because you genuinely learn new skills.
I haven't watched yet, but I think that this video is going to be just what I need right now, AWESOME!! It seems that your videos have very good quality.
I used to watch Trav build websites when i started web development at my IT job....good memories.... I figured i would brush up on some html and css since i been doing programming with python and node.js ... always a good idea to learn the fundamentals when you been grinding on full stack languages and libraries.... THanks trav!
Im on my 6th day of learning html/css and this taught me a lot it took about 4-5 hours for me to finish the vid since i had to replay most parts to understand and will probably take more time if ill practice more but i worths i can feel the proggress i made since i started. Thank you for deciding throwing this video to RUclips
Thank you for making such great videos like this for free. I'm completely new to web development, I was supposed to be working on a data science internship this summer and got put on web development last minute and your videos are so amazing and straight forward!
This is why language is vital. In 15.17 of the video you encapsulate this entire tutorial when you say, 'Our nabber links in the hover state.' That explained everything to me. Suddenly there was light. Without realizing it, probably, you surmised your entire tutorial. Brilliant mate. Well done. However, you do go slightly fast. Some things are done best slowly.
I'm struggling to follow your quick but very precise tutorial. Minute after minute, I try and repeat every line of code. At first it seemed impossible to me but now I understand a lot more. Thank you! You are a great teacher and I confirm your tutorial is amazing! Looking forward to find other videos of yours!
That was 3hrs of my weekend well-spent. I always wanted a customer built stylesheet using pure CSS, instead of Bootstrap. Going to use it on other projects. Thanks.
I also want to thank you for posting this amazing video for free. Many developers don't like posting the important once; they only post once that aren't helpful and reserve the real projects for sale, which is not the best way.
@@TraversyMedia Awesome ! I am at Section 15 Part 8 of the course, so pretty much toward the end. I'll have a look on that one then... Dude, my coding journey started with your html crash course video 2 months ago! And this is changing my life. I am so grateful. Much love to you! Stay Awesome and keep on inspiring people !
Thank you so much for this and all your other tutorials! You really helped me understand and feel comfortable with CSS grid and flexbox with this. Also, it was so valuable to essentially create our own library with the separate utilities stylesheet. Now I also understand Bootstrap and how libraries work so much better, too, so...unexpected benefit. :) A few things I changed: I wanted all the pages to be consistent, so I made all the top sections have a slanted bottom like the homepage. I also went back through after it was all done and renamed .showcase, .features-head, and .docs-head to all be named .top-section. I then went through the CSS .styles and eliminated as much duplicate code as I could find. So along with learning and reinforcing the concepts of the tutorial, because of the way you presented it so clearly, I felt comfortable going in and making some changes and even refactoring...another unexpected bonus. If you'd like to see what changes I made, I'd appreciate any feedback. I'm moving on next to more advanced site building with js and react and I'm sure I'll be learning much more from you as I move along. Let's hope this leads to me getting a job in the near future! :) Here's the link to my github repo: github.com/Jhethaar/Lokuri Here's the link to the Netlify site: relaxed-mcnulty-e82314.netlify.app/index.html Thank you, again, for sharing your knowledge!!
This is a great guide to building a responsive website. One thing I would love to see is a video outlining the process for determining the elements. Like, your nav bar in this was a nav inside a div inside a div but how did you decide that's how it needed to be done? Things like that are where I struggle the most so any way to improve that would be awesome. Thank you for your content, it's by far the best available on the web.
Dear sir, You are awesome teacher, the way you teach is really great and to the point. I can’t believe such valuable lectures are available free on RUclips. Thank you again.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.. ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
quick tip for learning, ctrl + / in your css to write comments, describe what each css property is doing to your styling, greater embed this info in your head
I watched this for about 25 minutes and I already feel that i’ve learn so much. Everything was explained properly. Subscribed and looking forward for next videos from you!
i really admire you, because of your easy understandable language and methods the way you explain things. thanks a lot. I am Yared Asrat from Ethiopia A.A. so you are doing great job in order to change the world from labor to digital.
I am your biggest fan Brad. I am currently taking your Modern HTML and CSS. And your course is just awesome. Now I have the capacity that I can understand even the hardest concept in CSS. The way you taught CSS Flexbox and Grid is damn awesome. Every concept you teach is holly grail for me. Soon I will finish your HTML and CSS. And I have purchased in advance your JavaScript course too. I just wanna know that this tutorial is where? I mean where can I find this video course on udemy cuz I need your whole course at any cost.
Thanks again Brad. This is really helpful. I love how clean the code is. The use of the css classes is so straightforward. I will definitely be purchasing your HTML/CSS course.
This is absolutely great content. God bless you Brad. For me I had little experience with css, nothing beyond basic styling. After watching this video, I feel like a guru already. Lol
51:37 the stats-heading margin can't set to auto because the my-1 is overriding the margin setting. I guess just use !important or simply remove the my-1 class for the h2.
If you keep all the css in one stylesheet then you have to use !important, else you have to link your utilities.css before your style.css link. Thats all.
1:31:05 I tried out as you said and made it. Thank you so much. This is my first project learning web development. I loved the way you created those utilities. Thank you.
this is the best html/css website tutorial ever! love the way you explain things in small bits and altogether the website looks great! thanks for your efforts sir!
Thank you very much. I was wondering what should i choose for my project - MDBootstrap vs Material-UI vs Bootstrap - but this lesson, thought me, that i can do it from scratch and i should not afraid.
I think this is one of the "collapsing margins" case. Where child's (h1) margin extends beyond parent's (.container) margin and in this case extra margin doesn't affect height of parent thus background-color has no effect. You can fix this by either adding "overflow: auto;" to parent element (how Brad did) or "display: inline-block;" to child (in this case h1).
I'll just comment and say good content for sure. I watched your crash course for beginners and was invested, I was like yeah I got this! Then I watched this video and realised I don't have any idea what's going on anymore and that's where I quit. Haha. Props to those of you who can grasp coding, I wish I could be the same 😛
Thanks a lot Brad. I have been subbed to you for years but I haven't done any web design for a long time. Just watched this tutorial and it is awesome and very well explained. I took some notes and learned a lot. You are an awesome human being.
I don’t mean to butt in… but, overflow: auto seems to just add a scroll bar. Maybe try this: don’t add overflow: auto. Don’t use a margin, instead of margin add padding - padding: 10px 0px;
"0:01" Your tutorials are awesome! Thank you for taking your time to share them :) Btw, I'm so glad that I found this awesome and free tutorial also for starting web design business and getting the first clients! You can read it here - *𝗪𝗜𝗟𝗟𝗦𝗠𝗘𝗧𝗛𝗢𝗗𝗦.𝗖𝗢𝗠* Hope it helps guys! :) Leson patikilye ou yo awizom! Mèsi pou pran tan ou yo pataje yo :) Btw, mwen tèlman kontan ke mwen te jwenn leson patikilye sa a ak gratis tou pou kòmanse biznis konsepsyon entènèt ak ap resevwa kliyan yo an premye! Ou ka li li isit la :)
you are my inspiration towards coding, I learn a lot about coding and more than being strong hard in tuff time. when I get some stress at work I always remember you a word (impostor syndrome), I'm happy to hear you back, Thank you so much for everything you have done, A happy subscriber
I've been missing this. From this I can go to or apply those other things. Starting from those other things makes me realize how much I need this. Thanks Brad.
took me three days but I finished it. This was super awesome. I'm glad you posted on youtube instead of udemy even tho you make more from the other site. THANK YOU BRUV MUCH LOVE!
Just watched it on Friday evening, definitely not a wast of time. Clear explanation, it all made sense. I’ll try to reproduce parts of it on my new site tomorrow. Thanks a lot !
I love how Brad always makes tutorial with explanations, but there is something I wanna ask, when we want to make the new element in the .showcase, should we add to both *.showcase::before* and *.showcase::after?* Because I tried to make the element only on *.showcase::before* and the result was the same. Thank you to anyone who wants to help me with this question :)
AHA! after 3 minutes of trying to know the answer, the result is we make double element when we code like: *.showcase::before* , *.showcase::after* { ... background: yellowgreen; transform: skewY(5deg); } *I tried .showcase::before and .showcase::after to make a new different element. Just try this code, you will see the difference clearly.* *.showcase::before* { ... background: yellowgreen; transform: skewY(5deg); } *.showcase::after* { ... background: purple; transform: skewY(-2deg); } Anyway, thank you, Brad, for your tutorial. You help me since the day-1 I code :)
Wow! I was JUST looking at your 'Build an HTML website with a responsive layout' from 3 years ago and was bummed that it was a little outdated. I searched for "how to build a responsive website flexbox" and this popped up and I saw it was posted TODAY! Kinda crazy. Anyway, thanks for this!
Ran into a bit of a "gotcha" moment at 51:30 in the video. setting the .stats-heading to margin: auto did not give me equal margins (the h3 test did not center). Turns out the my-1 utility class we had just made was interfering, since it is defined with margin 1.5rem 0; Since both of these have the same CSS specificity (both acting on a single class property), the one that was defined last took precedent. I put my link to the utilities style sheet after the one for style.css, which means the my-1 definition came last. Lesson learned: Pay attention to your specificity and the order in which you are importing your CSS.
Excellent video!...after a very long hiatus in developing and coding been getting up to speed with all the changes in HTML and CSS (last time I did I used HTML 4.01 and CSS was in it's infancy), and I must say this video is right up my alley as to how well explained it is and why things need to be coded in a certain way...it's making getting up to speed a breeze. Well done!
57:00 go back even further, remember working with frames? I actually find myself feeling feelings of nostalgia when working with PHP and including header and footer files in the layout. It feels a lot like working with frames back in the day.
I haven't even go through this video that much but I already have a feeling that I'll get the best out of it since I went through a lot of your videos guy. I've learnt and grew a lot of my programming skills from you guys. keep up the best work guys :)
Great video, thanks! If you didn't know, GitHub now has a really neat CLI, it's pretty awesome not having to leave the terminal as much, I recommend it!
Thank you for uploading this great video!! I am a beginner so this video was really appreciated. When you wrote the css code .showcase-form input[type='text'], .showcase-form input[type='email']{} I just remembered that there was a sudo selector called :not() that would have been perfect to use instead. You mentioned that you wanted to target the input elements but not then one containing [type="submit"]. This could be done by writing: .showcase-form input:not([type='submit']){} I tried it out and it worked! :) Thanks again!
![Lethal Company Music Video 🎵 "Follow The Orders" [VERSION A]](http://i.ytimg.com/vi/QeooZB4Z7RA/mqdefault.jpg)
Hey guys, hope you enjoy the project! Change the showcase-form width to 300px in the mobile media query(500px) to get it to look right on really small screens.
Hi,
I love your courses, they’ve really been of great help, I want to go into software testing, and cypress was suggested for me, can you make a video on that? Or do you have any suggestions for me,
Thanks any assistance will be greatly appreciated
Wow man, thanks so much for this tutorial. You've shown me a new way to work. Look I am new to HTML and CSS and I was trying to find a workflow to make things simple and faster, this video has shown me that. By the way, I am an experienced graphic designer.
Sir, in your videos, you don't teach to make a navbar that is present in modern websites. We really want to learn to create navbar, a good one . Also I can't find tutorial which teaches animation happening when click or with some interaction with javascript, I mean css animation with javascript code, we really want to learn such things, it would be great if you make such a big course on that kind of things too :) , thank you sir for everything, It's great thing that we get such valuable things for free on youtube ☺️
May I share a thought on how I'd like to build a website? First I would build the structure of the whole site, then "color" it. This way I'm able to keep the whole picture and not focus too much on details. Also it would help to see similarities like a set of colors, vertical spacing, paddings and so on. What do you think?
2hours for you, others may take 1 week so it wroth around $500+
“But I decided to throw it up as a RUclips video” - Brad. You are a legend!!
I'm 27 minutes into this tutorial. Of course, those 27 minutes are about 2 hours of my time. Still, I'm so engrossed I've hardly noticed the time. This has to be the best HTML & CSS course by far.
Pretty much I think these videos is just here to demonstrate how different people work with HTML & CSS. You don't really learn how to do anything here. I think you are finding that out. In programming, you only learn by doing jobs and work. Nobody is going to give you work to only do HTML / CSS work. I think the best thing is looking for videos talking about MERN, PHP, Full Stack development, and the like. You only learn by doing everything together and understanding how the elements work together. Similarly, Python and JavaScript and other scripts, just find a MERN or MEAN to instruction to see how all things work together. Learning Python and JavaScript separately is useless in my opinion. I think I would only watch these videos once I am an experienced programmer just to see how someone else might use these entities differently that I do. Once you are programming and doing work, you will mostly be looking into help pages for the product you are using. Understanding how to use those helps is what you really need to understand.
@@kevinerose Yeah but atleast someone will start from html and css first as a beginner
@@kevineroseno
I spent 5hrs but I finished though. But I am not a beginner nor an intermediate, just in between
About 1.5 years ago, I watched your Acme Design website video, and once again we are back at the same time. :)
Yeah, sometimes I get crap from JS devs when I do strictly HTML/CSS, but a giant part of my audience is from videos like that as well as my HTML and CSS crash courses which are the most viewed on the channel :)
@@TraversyMedia If you listened to those JS devs, I think right now I would be thinking, "How can I use and together???" lol. Now with your help, I am finally a full stack dev! :) (aka Nano)
Yup me too ..That was my first project ever ..its has been an year after that. It has also only been an year+ since i have started to code (started at 16 ..) and ..Brad ..man he was really a huge inspiration for me . The amount of knowledge i have gain from brad is amazing . He is a great guy!
@@shaderone07 Thanks :) That's awesome to hear.
Same here, Acme taught me so much!
I very rarely leave comments under youtube videos, but every video of yours make me want to leave a paragraph of appreciation for all your efforts. Thank you for this channel, I feel like we all owe you a great deal for what you are doing. Such high quality content and that too for free...man I can only say God bless you Brad and Thank you!
agree with you bro..
Need a little help about grid-template-columns
If you type in 'Lorem' in Visual Studio code and hit tab, it will automatically paste the famous Latin placeholder content in the
I have been coding professionally for over 30 years, and I still managed to pick up a lot of cool new stuff from this tut. The longer you work as a coder, the easier it is to fall into a rut and just go with the stuff you’ve used for years. This is a great opportunity to get out of the comfort zone and look at code from a new angle. Your style is very easy to follow and the tutorial was clear, organized, and , most important of all, highly professional. Highly recommend this tutorial to everybody regardless of skill level and experience. You'll get the biggest benefit if you code along with Brad as he builds out the site. Enjoy!
Hey guys how are you doing? Brad, what an amazing tutorial!!. On 1:31:02 if anyone needs the icons on features' page here they are (Just replace the "fa-server" class, that we copied from the first card, to the following) :
- fa-server (The one we did at the tutorial);
- fa-network-wired;
- fa-laptop-code;
- fa-database;
- fa-power-off;
- fa-upload.
amazing tutorial to understand concepts of pro web developer .. thank you so much
Have you made any video on this?
I am very lucky to have found a teacher like you. Today, four days later, I completed my first web project. Thanks
This channel is the BOMB! You're an amazing teacher Brad, I feel like I owe you a great deal for all of your help over the years.
Sir i can't say how much this means to me as a beginner, i feel really bad because i am unable to support you but i clicked every ads i could. i wish you good health and happiness. Thank you for your great work.
Thank you Brad you are awesome!!!!
I miss your tutorials.
I started to code 2 years ago with any previous knowledge about Coding.
Now I have a portfolio website and I started already to look for a front end job.
It's hard for a rookie with no working experience and now it's even harder, due to the pandemic crisis.
You keep me motivated.
Thank you again
I initially started this as a fun project to practice my basic HTML and when I heard you mention media queries and responsive design I hesitated because I have never heard of those before. I contemplated just doing the HTML and CSS and coming back to do the media queries once I learned about it but I stuck with it and followed along with the whole tutorial. I've honestly learned so much from this tutorial and I definitely learned more than I expected. You made everything so easy to understand and much simpler than I thought, especially media queries which I thought would be something impossible for me to learn but I now feel comfortable enough to do them on my own. To anyone thinking about watching this tutorial, please do! Especially if you're new to web development like me. The time fly's by because you genuinely learn new skills.
This has been my favorite tutorial of all time. I also think I learned more about shortcut keys in VSCode than any other tutorial out. Great content!
Thanks Brad. My features-head and features-sub-head @media(max-width : 768px) doesn't collapse. Has any one encountered this problem?
Brad Traversy is teaching better and more practical content than most universities at this point!!
Brilliant, finally somebody who talks through it without cheesy dance type music
Outstanding! Also learnt that 'div*n' makes as many 's as you would like so: 'div*3' hit return and 3 divs appear.
I haven't watched yet, but I think that this video is going to be just what I need right now, AWESOME!!
It seems that your videos have very good quality.
Thanks man 🙏🏼
@@TraversyMedia Thanks to you!
it's awesome
Buy one of his courses on udemy if you can afford to. He kicks out a lot of great content, and deserves support.
I used to watch Trav build websites when i started web development at my IT job....good memories.... I figured i would brush up on some html and css since i been doing programming with python and node.js ... always a good idea to learn the fundamentals when you been grinding on full stack languages and libraries.... THanks trav!
I really like these "back-to-basics" codealongs. Super useful for beginners and a nice way to chill 'n code for the others. You're the man Brad.
This show a professional with years of experience in this field.
Such a great Teacher
This tutorial is awesome thanks took me 2 days and made it twice to understand everything i like the small bootstrap like css style design workflow
Im on my 6th day of learning html/css and this taught me a lot it took about 4-5 hours for me to finish the vid since i had to replay most parts to understand and will probably take more time if ill practice more but i worths i can feel the proggress i made since i started. Thank you for deciding throwing this video to RUclips
Thank you for making such great videos like this for free. I'm completely new to web development, I was supposed to be working on a data science internship this summer and got put on web development last minute and your videos are so amazing and straight forward!
This is why language is vital. In 15.17 of the video you encapsulate this entire tutorial when you say, 'Our nabber links in the hover state.' That explained everything to me. Suddenly there was light. Without realizing it, probably, you surmised your entire tutorial. Brilliant mate. Well done. However, you do go slightly fast. Some things are done best slowly.
I am in the middle of your Udemy Course right now. Definitely this one gonna be my next project. Thank you Brad!!
I'm struggling to follow your quick but very precise tutorial. Minute after minute, I try and repeat every line of code. At first it seemed impossible to me but now I understand a lot more. Thank you! You are a great teacher and I confirm your tutorial is amazing! Looking forward to find other videos of yours!
You're a godsend Brad. Love these long videos. Learning material for days!
That was 3hrs of my weekend well-spent. I always wanted a customer built stylesheet using pure CSS, instead of Bootstrap. Going to use it on other projects. Thanks.
Yes, back to the Roots!
I also want to thank you for posting this amazing video for free. Many developers don't like posting the important once; they only post once that aren't helpful and reserve the real projects for sale, which is not the best way.
Damn it, I was just finishing your HTML/CSS course on Udemy and I got this notification :D
This was initially going to be in that course :) So just think of it as an extension of the course
Haha
@@TraversyMedia Awesome ! I am at Section 15 Part 8 of the course, so pretty much toward the end. I'll have a look on that one then... Dude, my coding journey started with your html crash course video 2 months ago! And this is changing my life. I am so grateful. Much love to you! Stay Awesome and keep on inspiring people !
Me too... Just finished the course yesterday
I WaS jUsT wAtChInG yOUr OtHeR vIDeOs
When searching for tutorials abput Front End, your tutorials are first on my list. Thank you very much on helping us learn more about Web Development.
Thank you so much for this and all your other tutorials! You really helped me understand and feel comfortable with CSS grid and flexbox with this. Also, it was so valuable to essentially create our own library with the separate utilities stylesheet. Now I also understand Bootstrap and how libraries work so much better, too, so...unexpected benefit. :)
A few things I changed: I wanted all the pages to be consistent, so I made all the top sections have a slanted bottom like the homepage. I also went back through after it was all done and renamed .showcase, .features-head, and .docs-head to all be named .top-section. I then went through the CSS .styles and eliminated as much duplicate code as I could find.
So along with learning and reinforcing the concepts of the tutorial, because of the way you presented it so clearly, I felt comfortable going in and making some changes and even refactoring...another unexpected bonus.
If you'd like to see what changes I made, I'd appreciate any feedback. I'm moving on next to more advanced site building with js and react and I'm sure I'll be learning much more from you as I move along.
Let's hope this leads to me getting a job in the near future! :)
Here's the link to my github repo: github.com/Jhethaar/Lokuri
Here's the link to the Netlify site: relaxed-mcnulty-e82314.netlify.app/index.html
Thank you, again, for sharing your knowledge!!
This is a great guide to building a responsive website. One thing I would love to see is a video outlining the process for determining the elements. Like, your nav bar in this was a nav inside a div inside a div but how did you decide that's how it needed to be done? Things like that are where I struggle the most so any way to improve that would be awesome. Thank you for your content, it's by far the best available on the web.
Thank you for this amazing tutorial. The way you have mastered CSS is absolutely incredible.
he is more than a teacher. may God bless the work of your hands. Mohammed from Kenya
When I heard Brad's voice at the beginning of this video...
I felt that
calm
Dear sir,
You are awesome teacher, the way you teach is really great and to the point. I can’t believe such valuable lectures are available free on RUclips.
Thank you again.
Thank you Brad. This project puts many concepts together and is a great way to solidify the html/css fundamentals. 🙏
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
quick tip for learning, ctrl + / in your css to write comments, describe what each css property is doing to your styling, greater embed this info in your head
Looks amazing!! Love the shape of the blue header at the top, really fresh!
yes it looks great
I watched this for about 25 minutes and I already feel that i’ve learn so much.
Everything was explained properly.
Subscribed and looking forward for next videos from you!
Hey Brad it's really great to see you back making videos, I hope things are going well for you and your family. Take good care of yourself buddy.
i really admire you, because of your easy understandable language and methods the way you explain things. thanks a lot. I am Yared Asrat from Ethiopia A.A. so you are doing great job in order to change the world from labor to digital.
Thank you Brad, I look forward to coding along with this one. I hope you are doing well :)
Im better than I was a couple of months ago.
great course
Thank you Brad. I had some weaks break from learning web but today I sat, play your video and motivation comes back.
I learned so many tricks and shortcuts ill be using in my project now. Thanks so much!!!
Hey Brad... Am from Nigeria, your courses are really strengthening my coding journey
I am your biggest fan Brad. I am currently taking your Modern HTML and CSS. And your course is just awesome. Now I have the capacity that I can understand even the hardest concept in CSS. The way you taught CSS Flexbox and Grid is damn awesome. Every concept you teach is holly grail for me. Soon I will finish your HTML and CSS. And I have purchased in advance your JavaScript course too. I just wanna know that this tutorial is where? I mean where can I find this video course on udemy cuz I need your whole course at any cost.
this man is the goat, just started your modern javascript from the beginning course, it's been really helpful. thanks a lot man for all your good work
How wise is the one who shares. Thanks a lot for sharing this tutorial. The best I've ever seen so far.
Thanks again Brad. This is really helpful. I love how clean the code is. The use of the css classes is so straightforward. I will definitely be purchasing your HTML/CSS course.
Brad. I do know a lot about web development but I like this video. I thank you from the bottom of my heart for making this tutorial.
Brad dropping gems 🔥
Hey, this isn't Ruby we're talking about!
quality gems
This is absolutely great content. God bless you Brad. For me I had little experience with css, nothing beyond basic styling. After watching this video, I feel like a guru already. Lol
Awesome 😍..... Happy to hear your voice again ❤️
Love what you can demonstrate with vanilla HTML/CSS we need more tutorials like these!
51:37 the stats-heading margin can't set to auto because the my-1 is overriding the margin setting. I guess just use !important or simply remove the my-1 class for the h2.
I was losing my mind trying to figure this out! Thanks! (:
Making sure the utilities.css link is above your styles.css link in the html file also solves this.
If you keep all the css in one stylesheet then you have to use !important, else you have to link your utilities.css before your style.css link. Thats all.
1:31:05 I tried out as you said and made it. Thank you so much. This is my first project learning web development. I loved the way you created those utilities. Thank you.
How is it posted 46 seconds ago and there’s already 27 likes lol. Love this channel 🤙🏻
Because that’s how much of a legend he is
No heart,. ill heart you
They know it's really good content already :)
He got a like before uploading video. He's special.
this is the best html/css website tutorial ever! love the way you explain things in small bits and altogether the website looks great! thanks for your efforts sir!
Simple, neat and clean! Incredible!!
Thank you very much. I was wondering what should i choose for my project - MDBootstrap vs Material-UI vs Bootstrap - but this lesson, thought me, that i can do it from scratch and i should not afraid.
I would love to see this function with MERN.
You're a saint, my man. The work you are doing for us is astounding. I hope you will have a great life.
Anyone know why adding overflow:auto to the container removed the space above the navigation bar @ 10:58 ?
I think this is one of the "collapsing margins" case. Where child's (h1) margin extends beyond parent's (.container) margin and in this case extra margin doesn't affect height of parent thus background-color has no effect. You can fix this by either adding "overflow: auto;" to parent element (how Brad did) or "display: inline-block;" to child (in this case h1).
yea, I was wandering about that also
I think overflow hidden should also work
It feels good to watch Brad again, things just click more when it's good ol brad
How did overflow: auto work here, can someone explain to me? Thanks
Like everything.
IT just does
I'll just comment and say good content for sure. I watched your crash course for beginners and was invested, I was like yeah I got this! Then I watched this video and realised I don't have any idea what's going on anymore and that's where I quit. Haha. Props to those of you who can grasp coding, I wish I could be the same 😛
12h10 - 20h19: just finished.
Thanks a lot Brad. I have been subbed to you for years but I haven't done any web design for a long time. Just watched this tutorial and it is awesome and very well explained. I took some notes and learned a lot. You are an awesome human being.
I don't get this stuff 'overflow: auto' on a container. Why it is working like that??
All the same, still confused about that one. Gonna have a look on W3 Schools this afternoon to clarify some stuff...
I don’t mean to butt in… but, overflow: auto seems to just add a scroll bar. Maybe try this: don’t add overflow: auto. Don’t use a margin, instead of margin add padding - padding: 10px 0px;
Have the same confusion. How does "overflow: auto;" work like that in this situation?
Incredibly detailed explanation of how the functions work. Excellent production, thank you.
"0:01"
Your tutorials are awesome! Thank you for taking your time to share them :) Btw, I'm so glad that I found this awesome and free tutorial also for starting web design business and getting the first clients! You can read it here -
*𝗪𝗜𝗟𝗟𝗦𝗠𝗘𝗧𝗛𝗢𝗗𝗦.𝗖𝗢𝗠*
Hope it helps guys! :)
Leson patikilye ou yo awizom! Mèsi pou pran tan ou yo pataje yo :) Btw, mwen tèlman kontan ke mwen te jwenn leson patikilye sa a ak gratis tou pou kòmanse biznis konsepsyon entènèt ak ap resevwa kliyan yo an premye! Ou ka li li isit la :)
you are my inspiration towards coding, I learn a lot about coding and more than being strong hard in tuff time. when I get some stress at work I always remember you a word (impostor syndrome), I'm happy to hear you back, Thank you so much for everything you have done, A happy subscriber
I've been missing this. From this I can go to or apply those other things. Starting from those other things makes me realize how much I need this. Thanks Brad.
took me three days but I finished it. This was super awesome. I'm glad you posted on youtube instead of udemy even tho you make more from the other site.
THANK YOU BRUV
MUCH LOVE!
Just watched it on Friday evening, definitely not a wast of time. Clear explanation, it all made sense. I’ll try to reproduce parts of it on my new site tomorrow. Thanks a lot !
I love how Brad always makes tutorial with explanations, but there is something I wanna ask, when we want to make the new element in the .showcase, should we add to both *.showcase::before* and *.showcase::after?* Because I tried to make the element only on *.showcase::before* and the result was the same. Thank you to anyone who wants to help me with this question :)
AHA! after 3 minutes of trying to know the answer, the result is we make double element when we code like:
*.showcase::before* ,
*.showcase::after* {
...
background: yellowgreen;
transform: skewY(5deg);
}
*I tried .showcase::before and .showcase::after to make a new different element. Just try this code, you will see the difference clearly.*
*.showcase::before* {
...
background: yellowgreen;
transform: skewY(5deg);
}
*.showcase::after* {
...
background: purple;
transform: skewY(-2deg);
}
Anyway, thank you, Brad, for your tutorial. You help me since the day-1 I code :)
I saw when Brad shared this on Twitter months ago. I can't say enough how happy I am to see this course. Neat!
Eix man this is the cleanest code I have ever seen,so so clean I am not convinced you had to learn this I think its just your second nature
I think you need to add the link to the images used and the icons so we can download and follow up...its an amazing video ever seen.
I'm doing fine in my academics all because of you. Thank you very much and keep up the good work.
Wow! I was JUST looking at your 'Build an HTML website with a responsive layout' from 3 years ago and was bummed that it was a little outdated. I searched for "how to build a responsive website flexbox" and this popped up and I saw it was posted TODAY! Kinda crazy. Anyway, thanks for this!
Ran into a bit of a "gotcha" moment at 51:30 in the video. setting the .stats-heading to margin: auto did not give me equal margins (the h3 test did not center). Turns out the my-1 utility class we had just made was interfering, since it is defined with margin 1.5rem 0; Since both of these have the same CSS specificity (both acting on a single class property), the one that was defined last took precedent. I put my link to the utilities style sheet after the one for style.css, which means the my-1 definition came last.
Lesson learned: Pay attention to your specificity and the order in which you are importing your CSS.
Excellent video!...after a very long hiatus in developing and coding been getting up to speed with all the changes in HTML and CSS (last time I did I used HTML 4.01 and CSS was in it's infancy), and I must say this video is right up my alley as to how well explained it is and why things need to be coded in a certain way...it's making getting up to speed a breeze.
Well done!
Learning React and really felt the need to freshen up a lil' bit my html and css. Brad, once again, thank you for everything.
57:00 go back even further, remember working with frames? I actually find myself feeling feelings of nostalgia when working with PHP and including header and footer files in the layout. It feels a lot like working with frames back in the day.
Brad's way of explaining is the best!!!!
Pretty new to HTML and CSS. This is the best video to get started. Thanks for this!
I haven't even go through this video that much but I already have a feeling that I'll get the best out of it since I went through a lot of your videos guy. I've learnt and grew a lot of my programming skills from you guys. keep up the best work guys :)
Great video, thanks! If you didn't know, GitHub now has a really neat CLI, it's pretty awesome not having to leave the terminal as much, I recommend it!
Yeah, some things I just get so used to doing it takes a while for me to change 😊
This one comes in a perfect timing. Weekend's coming and i have a lot of time to do this one. Thanks brad!!
Thank you for uploading this great video!! I am a beginner so this video was really appreciated. When you wrote the css code .showcase-form input[type='text'],
.showcase-form input[type='email']{} I just remembered that there was a sudo selector called :not() that would have been perfect to use instead. You mentioned that you wanted to target the input elements but not then one containing [type="submit"].
This could be done by writing: .showcase-form input:not([type='submit']){}
I tried it out and it worked! :) Thanks again!
Thanks for this! I simply couldn't watch this tutorial and walk away without supporting the channel.
So good to see Brad release another solid tutorial video. Hope you are feeling better.
I must say the project is great and you took every step gradually, in a way one can understand. thanks for the course, it's amazing.
Your are the king of Web❤️ excellent and mind blowing teaching 🙏🙏🙏🙏🙏🙏