front-end-developer_1_
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Front-End-Developer - Level 1<br />
Grid, theme, and media query practice<br />
In the Grid system and responsive design video, we learned:<br />
The grid system allows us to create rows and columns on our pages<br />
Responsive design makes pages that work well on desktop and mobile devices<br />
Media queries tell the CSS rule to only apply when certain criteria are met<br />
Now it's your turn!<br />
Practice using the Bootstrap grid:<br />
Add columns and rows to your vacation page.<br />
Rework one of your existing pages to use Bootstrap's grid.<br />
Bootstrap is very popular, but there are several other great alternatives.<br />
Make a page about your favorite sports team with Skeleton, which is very easy to set<br />
up.<br />
Make a page about your best fri<strong>end</strong> with Foundation, which may take a bit more reading<br />
and fiddling to figure out, but which is also very popular.<br />
Practice your responsive design:<br />
Pick one of your pages that has images on it. Create a class for images that should not<br />
be shown on small screens. Add a media query that hides these images (using display:<br />
none) on smaller screen sizes.<br />
Grid, theme, and media query practice<br />
74
Change language