Build A Responsive HTML & CSS Template With FlexboxGrid



https://i.ytimg.com/vi/qlA7dputiNc/hqdefault.jpg



In this beginner friendly front-end project we will build a responsive HTML5 and CSS3 website template and we will use FlexboxGrid which is a lightweight Flexbox based grid system to align our elements easily. It uses the same classes as the Bootstrap grid.

CODE: Code for this project
http://www.traversymedia.com/downloads/apptheme.zip

SPONSORS:
DevMountain Bootcamp – https://goo.gl/6q0dEa

EDUONIX COURSES: Please use affiliate links from website below
http://www.traversymedia.com/eduonix-courses

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
http://www.paypal.me/traversymedia
http://www.patreon.com/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.linkedin.com/in/bradtraversy

Original source


38 responses to “Build A Responsive HTML & CSS Template With FlexboxGrid”

  1. Anyone else who is watching in June 2019 have problems with font awesome v5.9.0

    The folder naming structure changed.
    Been having to use a cdn been having trouble getting 5.9.0 to load locally.
    All the other versions load locally

  2. when i put background color on nested divs there is no space between them how do i solve it?

    <div class="container">

    <div class="row middle-xs middle-sm middle-md middle-lg center-xs center-sm center-md center-lg">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

    <h2>Top Destinations</h2>

    <hr class="heading-line">

    <div class="contianer two-destinations">

    <div class="row middle-xs middle-sm middle-md middle-lg center-xs center-sm center-md center-lg">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

    ahkjashdkahj

    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

    hjgjghj

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

  3. Brad, you never seize to amaze me. The passion, energy, time, care you put into sharing/teaching us (the masses) your knowledge, both here on YouTube and Udemy is second to none! For that I thank you. I've not only been able to keep up with the latest advancements in Web Design, but I gained new knowledge. All thanks to you!
    Following your HTML course on Udemy, I added some Variables for the some color schemes 🙂

  4. when i host this using github pages for some reason the images do not get displayed properly and it does not look the way it should….any solution for this ?
    i get the following error when i open my console: Failed to load resource: the server responded with a status of 403 ()

    any help ?

  5. When the col can be 12 wide always. I believe you can just specify it with col-xs-12 and leave it with that. You don't need to specify the other screen sizes (like col-md-12, col-lg-12 etc) because it will just take the mobile screen size as the basis. Right?

  6. Hi i trying to create site like about but it wouldn't be responsive when inspect the element and set mobile view.
    in inspect mode in mobile view it looking like 3 column website not single column.

Leave a Reply