For this assignment, you will be re-creating visual layouts outlined here using CSS Flexbox and Grid.
To complete the assignment, fork the repository and then clone it down to your machine. From there, you'll be editing assets/css/style.css to update your layout to match the images provided. Each problem has an associated image, and your goal is to replicate the layout as closely as possible utilizing the CSS concepts of Flexbox and Grid.
It's a good idea to add and commit your code anytime you accomplish something you'd be sad to lose. When you've completed the assignment, add, commit, and push your final changes.
To submit your assignment, send Sarah an email at scullen@bitwiseindustries.com with a subject line of Flexbox & Grid Assignment - INSERT YOUR NAME HERE. In this email please include a link to your GitHub repo for this assignment AND provide three fun facts you'd like me to know about you.
-
Take a look at both
index.htmlandassets/css/base.css. There are a number of ways you could simplify the HTML structure (especially re: class names) and many ways you could simplify and consolidate the provided CSS. Experiment with making these optimizations while preserving the existing styling. If you're uncertain how to proceed, try using Google-Fu to investigate and try potential strategies. -
Create a wireframe for one or more layouts you'd like to build with Flexbox/Grid. Use wireframe.cc or a similar free service to do so. Then build out semantic HTML and CSS to match your layout! (If you do this, please include your code within your repository for this assignment, and also include a link to your wireframe(s)!)
-
Research/review CSS the usage of the CSS
positionproperty and practice using it to create fixed-position headers, absolutely-positioned elements, overlapping elements, etc. -
Research how to deploy your assignment to either GitHub Pages or Heroku (free plan). If you're able to deploy, include a link to your deployed assignment in your email submission!