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

Construct a Responsive Web site | HTML, CSS Grid, Flexbox & Extra

by



On this challenge we are going to construct a customized web site utilizing HTML5 and fashionable CSS strategies corresponding to CSS Grid, Flexbox, psuedo selectors, animation and extra. We will even deploy to Netlify and add type performance

Code:
https://github.com/bradtraversy/loruki-website

💖 Assist The Channel!
http://www.patreon.com/traversymedia

Web site & Brad Traversy Udemy Course Hyperlinks:
https://www.traversymedia.com

Observe Traversy Media:

https://www.instagram.com/traversymedia
https://www.fb.com/traversymedia

Timestamps:
0:00 – Intro
2:32 – Base & Navbar HTML
6:05 – Base CSS
9:08 – Navbar, Container, Flex
16:12 – Showcase Space & Grid
27:28 – Card & Type CSS
33:07 – Button Types
35:45 – Skewed Space
39:42 – Stats Part
44:16 – Utility Courses – Margin & Padding
52:33 – CLI Part & Grid Col & Row Span
57:25 – Cloud Part
1:00:50 – Background & Button Utility Courses
1:04:00 – Textual content Sizes
1:05:28 – Languages Part
1:09:49 – Footer
1:14:08 – Media Queries & Responsiveness
1:21:34 – Options Web page
1:29:57 – Options Grid With Spans
1:32:15 – Docs Web page
1:42:44 – Alert, Code Block & Textual content Colour Types
1:49:02 – Make Inside Pages Responsive
1:52:02 – Animations
1:56:42 – Put together & Deploy To Netlify

source

36 thoughts on “Construct a Responsive Web site | HTML, CSS Grid, Flexbox & Extra”

  4. I have a question
    Why does the code break when you put the utilities.css after style.css?
    I spent about two days trying to figure out why my code was not working the same way as in the tutorial. Only to find out later that it was due to the order of positioning of the CSS.

    Reply

  8. I have always heard that you should not use px for sizing as it is not relative and can really mess up things. Can someone tell me why he is using px for sizing ?

    Reply

  23. on 14.16 while following along for some reason when i add .navbar.flex {justify-content to space -between and and changing justify-center in .flex to center space between is not left between Loruki and nav bar. Checked everything multipl times. Copied HTML code from github but still not working. Can't find the mistake.

    Reply

  31. Nav bar: overflow center padding… WTF IT DOES NOT WORK i<m on Visual Studio following STEP BY STEP…just 11 minutes following and already things are not according to the video… why oh why

    Reply

  32. This video is absolutely amazing! Does anyone know if he has more videos like this? Or maybe a playlist with more real examples of building a website? Thanks in advance!

    Reply

  33. Is there some kind of extension that is needed in vscode to add utility classes? I am adding them exactly as you are but they don't work for some reason. I have a
    <div class="navbar">
    <div class="container flex">
    <h1 class="logo">Loruki</h1>
    <nav>
    <ul>
    <li>Home</li>
    <li>Features</li>
    <li>Docs</li>
    </ul>
    </nav>
    </div>
    </div>

    I have the corresponding css:
    .container{
    max-width: 1100px;
    margin: 0 auto;
    overflow: auto;
    }

    .flex{
    display: flex;
    align-items: center;
    justify-content: center;
    }
    It looks correct to me but it does not work for some reason.

    Reply

  34. I am encountering a problem with (.showcase.grid) the (positon: visible; ) is not working it doesn't make the card go outside the parent element (like it shown in the video time stamp is 29:23). Iam trying to build the side step by step with the guidance of this video but this problem is stopping me from making any progress has anyone encountared similar problems?

    Edit: i found the solution its in the (.card {
    Box-shadow: 0 3px….

    }
    The number snd the pixel there was a space in it example ( 3 px).

    Reply

Leave a Comment