A hot new Denver-based Tech Startup, Relaxr, has approached you to help them develop a new landing page for their company. They've handed you the design file for the site, along with the copy and assets - they're located in the repo. You need to take these files and turn them into a landing page:
Note: For a view of the full page, see the jpg provided in the deliverable. Don't be alarmed if your font sizes don't perfectly match what you see in the jpg - trust in the design file!
The scenario presented to you in this lab is very similar to the scenario you would encounter everyday working in a web agency - you’re handed a design file, often with little to no context, with only the knowledge that the client wants it to look "good". This is actually a much better comp than you can typically expect. Since the client doesn’t know what a div is, or what semibold is in numeric font weight, YOU need to act as an advocate for them and pick the best tool for the job.
In completing this lab, you'll be performing these common daily dev tasks:
- Build a website from a design file
- Integrate advanced CSS properties
- Use HTML5 structural elements
- Use CSS boilerplates to "reset" or "normalize" the rendering of your page across different browsers
- Use the Box Model to style element borders and structure your page
To complete this lab, you'll need to:
- Use HTML5 structural elements (
nav,header,footer) - Use a CSS Reset or Normalize file in addition to your
style.cssfile - Use IDs and Classes to select and style elements on the page
- Style your text with the Google Fonts provided by your style guide
- Follow naming conventions, maintain consistency across .html and .css files and use best practices for naming IDs and Classes
- Indent nested elements to increase your code's readability
- Starter code can be found inside of the "starter_code" folder for this assignment.
- Box Model explanation from Mozilla
- Box Model Breakdown
- CSS Tricks difference between IDs and Classes
- What is a CSS Reset?
- Relaxr's design file