Use CSS to create modern layouts. Make them responsive with Media Queries.
⭐️Files you need ⭐️
💻Modern Layouts Code: https://www.dropbox.com/sh/d7lbb1qfqnbow11/AADMR3_MXtBeDdeDL0IgZ55la?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0
This video works as a stand-alone tutorial but is also day 9 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU
CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
source
Please don't use floats for 'modern' layout. Please use flex and grid box models for 'modern' layouts.
Thank u for this awesome video
Like your video's so far but was really hoping this one would be with CSS Grid (or Flexbox at least). Pretty disappointing to see you still use floats.
Anyway, if people want to do a quick exercise: try to make it with the Grid system. CSS Grid is so much better and everybody that has interest in CSS should start learning it asap
You shouldn't use float to create layouts in 2018, seriously. There's Flexbox and CSS Grid for that
Yes, modern layouts should be done with flexbox and/or grid, but I think a complete developer should also know how it's also done with floats. Thanks for this video series!
Could we convert from using 'float' to 'flexbox layout' or 'grid layout' ?
Hey all, I hear that this projects doesn't solve the issue of modern layouts in a very modern way… SO, I made a codepen that refactors this project using grid and flexbox. Feel free to fork and share! https://codepen.io/edgeq/project/details/ZPrRLj/
wow, in layout2, the .layout2 header::after pseudo element works like a invisible stick to stretch the parent header box, some sense of hack to me.
Just used columns tag in the layout#3. More easily
thank you ! what is the name of theme you use on editor
It works even if I don't specify ::after
Very well taught! Brad I wonder why didn`t you use flexbox or Grid!
Smart guy, he teaches you the very, very basics, but if you want more advanced lay out go to his website and pay for the tutorials.
remember, nothing is really free is this world.
Business Opportunity in Ruvol
I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”
It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”
The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.
HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?
I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0
BIG MONEY POTENTIAL IN RUVOL!
It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.
You may contact me at: rodolfovitangcol@gmail.com.
Thanks and God bless!
RODOLFO MARTIN VITANGCOL
The Ruvol Inventor
downloaded the files and it doesn't look like what's in the vid