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.
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.
- Why Responsive?
- Design a Layout System
- Implement new layout and styling
- Work on additional pages
- 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
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
This class is part of our Web Development (Front End) TrackSee the whole track
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
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
CSS Deep Dive: CSS Animations