Create a Website: Layouts (Responsive CSS)

You are getting the hang of those basic CSS rules, and even though your site is starting to look good, you feel like you could do more. If this is you, then this class is for you. We will not be diving into completely uncharted territory, but we will build upon what was done in the Create a Website: Styling workshop. In this class, we will talk about why responsiveness is the way to design any site. We will look into the different markers that make up a responsive site, before diving into the different ways to change a layout (displays, floats, flexbox, grid). Finally we will work on a couple of exercises to get comfortable with the new concepts taught in the class. This class assumes that you have some basic knowledge of HTML and CSS.

Instructor:
Sandra Bermond | Innovation Co-Lab Program Manager
Sandra manages the Innovation Co-Lab roots program as well as teaches several workshops. She has a background in web design and front-end development, as well as a passion for artistic endeavors regardless of the medium.

This class will be hosted via Zoom. You will receive an email with the Zoom link a day before the class. Attendance will be taken and the session will be recorded.

View Enrollment Sessions
  • CSS
  • Web Development

About Course

Outline

  • Why Responsive?
  • Design a Layout System
  • Implement new layout and styling
  • Work on additional pages

Objectives

  • Change fixed styling to responsive styling
  • Change Displays and Positions to create new layouts
  • Get to know Floats and Clears
  • Be able to customize styling with a finer granularity

Prerequisites

This class requires you have some basic knowledge of CSS. If you have never heard of CSS, or you feel like you could use a refresher, we recommend that you do one of the following before attending this class: Attend Create a Website: Styling OR Watch CSS for Beginners

Examples

layout-example layout-example layout-example

Enroll

Interested in taking this class? Enroll in one of the sessions below!

3/3/2021

5:00 PM - 7:00 PM

Location: Online

18 seats left!

Enroll

3/29/2021

3:00 PM - 5:00 PM

Location: Online

28 seats left!

Enroll

This class is part of our Web Development (Front End) Track

See the whole track

Suggested Courses

Course Graphic

CSS Deep Dive: the Power of Grid

Come learn how you can place html elements wherever you like, however you like on a page regardless of their html order with CSS Grid. Change the vertical and horizontal alignments of any item, and forget about all math calculations!

Learn More
Course Graphic

CSS Deep Dive: Break out of the Box with CSS Shapes

Come to this workshop to learn how to make text follow the curve of an image or create new shapes to build dynamic compositions on the web.

Learn More
Course Graphic

CSS Deep Dive: CSS Animations

Want to have super cool animated effects on your web pages without having to use JavaScript, gifs or videos? Well, look no further than this class, where you will get an introduction to the different types of CSS animations you can use.

Learn More