Multi-column Layouts, CSS Strategies and Responsive Design

Students will extend their knowledge of HTML5 & CSS in building multipage websites. Students will explore CSS strategies for managing multi-column layout, responsive design principles, and how to code a website from a design mockup. The course will also cover pure-CSS parallax scrolling, pure-CSS drop-down menus, pure-CSS mobile menus, HTML forms, embedded media and some introductory image editing. Prerequisite: Website Development I or equivalent knowledge (instructor-approved). Instructor: S. White

5 Classes

Learning Outcomes:

Students will

  1. Display the knowledge of how to build complex page layouts using the fundamental CSS layout tools of float, display, and position along with related
  2. Develop the ability to add interactivity to a web page using CSS transitions with pseudo classes
  3. Demonstrate the critical-thinking ability to determine what semantic and non-semantic HTML structures are required to both accurately markup content and provide appropriate scaffolding for creating the CSS effects they need to build a website in the image of a design mockup
  4. Exhibit familiarity with responsive design fundamentals and techniques including
    • using media queries and breakpoints
    • styling layouts to switch orientation depending upon the screen size
    • coding a pure-css hamburger menu for mobile devices
    • ensuring images, background images, and iframes always render responsively on various device sizes
  5. Understand the requirements of retina-ready devices and how to accommodate them without creating unnecessary performance penalties for non-retina devices
  6. Develop greater awareness and comfortability with debugging processes they can employ to find the solutions when things go wrong
  7. Exhibit ability to execute a few simple image editing skills
    • image resizing
    • b) creation of a simple line gif

General Course Goals:

This course has three primary goals:

  1. Show students how to build a website from a design mockup
  2. Provide students with fundamentals of responsive website design techniques
  3. Challenge students to engage their critical thinking skills to take ownership of their HTML and CSS skills as active problem solvers

Throughout the process of accomplishing these three goals, we will simultaneously broaden and deepen our CSS toolbox.

Regardless of what technologies a website developer knows, more than anything else, website developers are problem solvers. In the field, every website presents a unique set of specifications, and every day, website developers have to use what they know to think through how to solve some new convalescence of factors. This course challenges students to apply what they’ve learned to solve problems presented by a design mockup with no answer key. Students are encouraged to take ownership of their HTML and CSS knowledge by thinking through the problem themselves. They are supported in their discovery process by group discussion and instructor availability to answer questions both in class and between classes.

 

Specific Course Goals:

Upon successful completion of this course, students will be able to:

Understand:

  • - How to use CSS float, display, and position properties to achieve multicolumn layouts and to solve various other layout complexities
  • - How to use CSS media queries to write style rules that only come into play under specific conditions
  • - How to choose breakpoints for their media queries
  • - How to implement CSS transitions
  • - When an image should be placed in HTML code vs used as a background image in CSS
  • - How to use background images as styling effects on HTML elements

Identify

  • - How to resize an image in GIMP2 or similar image editing program
  • - How to create a simple rectangular image in any color in GIMP2 or similar image editing program
  • - How to save an image in gif or other image format in GIMP2 or similar image editing program

Perform:

  • - Building a website from a design mockup
  • - Construction and styling of a pure-css drop-down menu, pure css parallax-scrolling effect, and pure css mobile hamburger menu
  • - Implementation of required styling rules to make a website fully responsive and retina-ready