• Saturday , 21 September 2019

Build A Responsive HTML & CSS Template With FlexboxGrid

Code Canyon
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

3d Ocean

Related Posts

38 Comments

  1. Traversy Media
    August 19, 2019 at 15:05

    What do you guys think of the mini-cam? Is it more interactive or is looking at my ugly mug distracting?

  2. Leo
    August 19, 2019 at 15:05

    Thank you, Sir.

  3. Mikheil Orjonikidze
    August 19, 2019 at 15:05

    30 m 😀 dic class 😀

  4. XerosXIII
    August 19, 2019 at 15:05

    its crazy how css grid and flexbox changes the whole game

  5. Giveme Random
    August 19, 2019 at 15:05

    Awesome man. Thanks!

  6. Geek Studio
    August 19, 2019 at 15:05

    Ordering Mcdonalds LOL,ive watched this video plenty of times and always makes me laugh!!

  7. E-Girl Respecter
    August 19, 2019 at 15:05

    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

  8. fahad for development
    August 19, 2019 at 15:05

    dick with a class of container LMFAO

  9. Praneet Singh Roopra
    August 19, 2019 at 15:05

    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>

  10. Mohamed tarek
    August 19, 2019 at 15:05

    I am very depressed brad I can't code my portfolio website I am stuck with a lot of things in this project

  11. hologrxphic
    August 19, 2019 at 15:05

    How do i change the header text to an image?

  12. Ryan Torrie
    August 19, 2019 at 15:05

    If only I fucking cared at this point

  13. OhItsJustDang
    August 19, 2019 at 15:05

    Anyone having trouble having the icons display? Is it an update thing with the website possibly? Other than that, everything's been just fine on my end.

  14. Grampy Gamer
    August 19, 2019 at 15:05

    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 🙂

  15. Rob
    August 19, 2019 at 15:05

    Thank you for all your tutorials!

  16. BloodyClash
    August 19, 2019 at 15:05

    😀 never used any framework because too lazy. 🙁 sad that you had to use a package for such simple stuff…

  17. Frozen Viking
    August 19, 2019 at 15:05

    Does flexboxGrid and bootstrap use the same pre-defined classes? If not, what are thr differences between those two?

  18. Michael Mansy
    August 19, 2019 at 15:05

    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 ?

  19. Miguel Gonzalez
    August 19, 2019 at 15:05

    My primary-text wont work?

  20. Антон Киркевич
    August 19, 2019 at 15:05

    Thank you for this course.

  21. Ulugbek Mannopov
    August 19, 2019 at 15:05

    You rock man.
    Please, can you do elementery or intermidiate course.
    I have recently started learning

  22. Sam A
    August 19, 2019 at 15:05

    Hey man, the row class doesn't work for me at 13:15, u know why?

  23. Ibrahim Guler
    August 19, 2019 at 15:05

    very helpful thank you

  24. Floris
    August 19, 2019 at 15:05

    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?

  25. Senthil
    August 19, 2019 at 15:05

    Great video, Keep your good work sir. I always use this video for my reference, don't understand why some people disliked this video? unreal..

  26. Harjot Dhaliwal
    August 19, 2019 at 15:05

    all of my text turned into a link ?? how?

  27. Dawid Jarmoluk
    August 19, 2019 at 15:05

    Could I implement "position: fixed" to get sticky menu in FlexboxGrid framework?

  28. Obe Juarez
    August 19, 2019 at 15:05

    Newbee here … but this is not FLEXBOX right? this is the CSS Grid?

  29. latchumnaidu yanda
    August 19, 2019 at 15:05

    nice you did very passoinatley

  30. drewski west
    August 19, 2019 at 15:05

    can you recommend some back-end playlists?
    also, i would try your SASS videos but.. SASS isn't working for me lately.

  31. Bondarenko_CJ
    August 19, 2019 at 15:05

    V_A_D_I_K_P_S_I_X

  32. Niguel Gunther
    August 19, 2019 at 15:05

    i have a issue with viewing on iphone. i dont get the nice responsive page i get the normal desktop website just very small.
    what am i doing wrong?

  33. 徐宏杰
    August 19, 2019 at 15:05

    i am confused at alightment,center-xs,center-md,center-lg,why the paragraph are centered

  34. 徐宏杰
    August 19, 2019 at 15:05

    you dont explain it well at the part of alignment

  35. 徐宏杰
    August 19, 2019 at 15:05

    you are bad teacher

  36. 019rush
    August 19, 2019 at 15:05

    Did this without flexgboxgrid to see how good I am with the fundementals of floats/divs and just in general CSS and i've done successfully exactly.

  37. Akbar Shaikh
    August 19, 2019 at 15:05

    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.

  38. graphicsite
    August 19, 2019 at 15:05

    Thank you so much for this! I used your template but want to add a Logo.png instead of rounded Showcase Content! PLS help how to insert it and be responsive! Thank you loads!

Leave A Comment

You must be logged in to post a comment.