Build a Responsive Website | HTML, CSS Grid, Flexbox & More



In this project we will build a custom website using HTML5 and modern CSS techniques such as CSS Grid, Flexbox, psuedo selectors, animation and more. We will also deploy to Netlify and add form functionality

Code:

💖 Support The Channel!

Website & Brad Traversy Udemy Course Links:

Follow Traversy Media:

Timestamps:
0:00 – Intro
2:32 – Base & Navbar HTML
6:05 – Base CSS
9:08 – Navbar, Container, Flex
16:12 – Showcase Area & Grid
27:28 – Card & Form CSS
33:07 – Button Styles
35:45 – Skewed Area
39:42 – Stats Section
44:16 – Utility Classes – Margin & Padding
52:33 – CLI Section & Grid Col & Row Span
57:25 – Cloud Section
1:00:50 – Background & Button Utility Classes
1:04:00 – Text Sizes
1:05:28 – Languages Section
1:09:49 – Footer
1:14:08 – Media Queries & Responsiveness
1:21:34 – Features Page
1:29:57 – Features Grid With Spans
1:32:15 – Docs Page
1:42:44 – Alert, Code Block & Text Color Styles
1:49:02 – Make Inner Pages Responsive
1:52:02 – Animations
1:56:42 – Prepare & Deploy To Netlify

38 comments

  1. 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.

  2. Good day Brad, thank you so much for this tutorial currently on it but when I used magin: auto; on the stats-heading it didn't center it because of the utilities my-1: 1rem 0; that has been set but anytime I turn it off it centers
    Would there be a reason for this ???
    Also when I open it on chrome dev the margin: auto; has a strike through line over it
    Sorry for the long question
    Thank you once again

  3. Not really much of a "commenter" but wanted to say thanks for this and the other excellent free content. Picked up a couple of your Udemy courses of the back of this, and really appreciate all the hard work you put in, as well as how clearly you explain everything. As someone who has aggressively avoided front-end development for my entire career, this is exactly what I needed! 🙂

  4. Hello, thanks for your tutorial.
    I want to know your vs code font and settings for getting exactly the workflow you have (font, theme, line spacing, height, …)
    Thank you for your comprehensive care.

  5. 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.

Leave a comment

Your email address will not be published.