FEWD Week #3: CSS Layouts

Description

Relaxr was really impressed by your work last week and wants you to continue development on their landing page. Starting in class, you will work to build out a more complex layout for their company site. They decided on creating a blog, and their back-end engineers will be focused on developing the blog's functionality. They want your front-end skills to style their designs using HTML and CSS so Relaxr's engineers can begin integrating. Once again, the designers have handed you a basic design file with instructions and the JPEG below to help you bring the blog to life. Submit the finished version for homework.

Real-World Applications

• Build websites with multi-column layouts
• Turn complex design assets into code
• Style text on your page with Google Fonts

###Technical Requirements

• Use in-line-block or floats in your CSS to achieve a two-column layout
• Use the correct Open Sans Google Font typeface to style the text denoted in the design file and according to the JPEG provided
• Use proper filename conventions (lowercase, .html)
• Use a single external CSS stylesheet to style all pages
• Use a background image for the headers
• Add a hover effect to all the links using pseudo-classes
• Integrate drop caps using pseudo-classes

Bonus

• Link the "Blog" link in the header to the page you've built for this assignment
• Link the "About" link in the header to the landing page you built last week
• Up for a real challenge? Use <script> tags in your HTML and read ahead to make a dialogue box pop up when a user clicks "Sign Up Now!" that reads "We're Not Ready For Sign-Ups...Yet."

Part 2: Make it responsive!

Relaxr's user count has grown, and the number of users accessing the site from a mobile device has surprised everyone, even by today's standards. The product managers at Relaxr have asked you to return to the project and make their site responsive so it renders nicely on mobile devices.

Technical Requirements

• Use media queries at a 768px breakpoint
• As a user changes the size of a browser window:
  • Content remains in appropriate divs
  • Content remains visible to the user
  • Fonts change size appropriately
  • Margins and padding change size appropriately
  • Content does not overlap
  • In the blog section, the two-column layout changes to a single-column layout when appropriate

Bonus

Add more media queries for a 1000px breakpoint and a 480px breakpoint.

Resources

• Starter Code and Design File
• Documentation on integrating Drop Caps
• Documentation on CSS Pseudo-classes
• Starter Code, Assets, and Design File
• Prepare for JavaScript/jQuery
• Read ahead on jQuery basics
• Also see: links to resources in lecture notes