[ad_1]
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
Tweets by traversymedia
http://www.linkedin.com/in/bradtraversy
Original source
38 responses to “Build A Responsive HTML & CSS Template With FlexboxGrid”
What do you guys think of the mini-cam? Is it more interactive or is looking at my ugly mug distracting?
Thank you, Sir.
30 m 😀 dic class 😀
its crazy how css grid and flexbox changes the whole game
Awesome man. Thanks!
Ordering Mcdonalds LOL,ive watched this video plenty of times and always makes me laugh!!
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
dick with a class of container LMFAO
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>
I am very depressed brad I can't code my portfolio website I am stuck with a lot of things in this project
How do i change the header text to an image?
If only I fucking cared at this point
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.
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 🙂
Thank you for all your tutorials!
😀 never used any framework because too lazy. 🙁 sad that you had to use a package for such simple stuff…
Does flexboxGrid and bootstrap use the same pre-defined classes? If not, what are thr differences between those two?
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 ?
My primary-text wont work?
Thank you for this course.
You rock man.
Please, can you do elementery or intermidiate course.
I have recently started learning
Hey man, the row class doesn't work for me at 13:15, u know why?
very helpful thank you
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?
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..
all of my text turned into a link ?? how?
Could I implement "position: fixed" to get sticky menu in FlexboxGrid framework?
Newbee here … but this is not FLEXBOX right? this is the CSS Grid?
nice you did very passoinatley
can you recommend some back-end playlists?
also, i would try your SASS videos but.. SASS isn't working for me lately.
V_A_D_I_K_P_S_I_X
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?
i am confused at alightment，center-xs，center-md，center-lg，why the paragraph are centered
you dont explain it well at the part of alignment
you are bad teacher
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.
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.
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!