CSET-110 Web Development I

Week 3: Positioning and Page Layouts

Main Objective: To learn different layout techniques and patterns and use them to reproduce complex page designs.

Lessons:

  1. Layouts: Floats, Flex, and Grid

Project:

This week, we'll try to style a few different page designs using multiple layout techniques.

  1. Go to the the project repository on GitHub to get the starter code.
  2. Click the Fork button in the top right corner to produce your personal copy of the code.
  3. Click the green Code button and copy the URL to your code.
  4. Open the terminal on your machine and cd to the code directory.
  5. Run this command git clone URL where you replace the word URL with the URL you copied from GitHub.

Assessment:

Follow these guidelines to answer the following questions. Due at the end of class on Friday, October 9th. Your file should be at the following path: cset/110/assessment-3.md.

  1. The tools and techniques for web development have changed a lot over the years. How will you personally try to keep up with those changes and where can you look to find them?
  2. The lecture and readings discussed the limitations of using floats for layout. What are some of these limitations? Provide an example.
  3. Flexbox is built to be language agnostic, so it uses generic terminology like the "Main" or "Cross" axis. Choose a flex property that affects one of these axes on a flex container and explain how it is used. Show how the result can change based on different flex directions and different writing modes.

Reference:

More Resources: