The foundation of a website consists of a core set of semantic HTML tags. However, to achieve more complex layouts, we need to leverage the power of CSS to give our content the shape we want. Additionally, to add more excitement to our content, we can use CSS to add motion and interaction using keyframe animations.
Objectives
Practice using CSS to create common structural layouts in HTML(grids, columns, etc.)
Practice using CSS to add animation and interactions to HTML in a way that enhances the meaning of our content, rather than detract from the experience.
Practice using media queries to adapt content to a variety of screen sizes.
Assignment
The challenge of this week’s exercise is to create a digital poster for an event that can’t exist. The type of event you want to feature(music, gallery show, broadway performance, etc.) is up to you. Think about what an event means to you now, when group activities are so limited. The poster needs to be visually captivating. It should immediately grab the viewer’s attention and make them want to know more about the event. The poster must function well when viewed at a variety of screen sizes. Think about what you can do in a digital environment that’s not possible in print.
Techniques you’ll need to use:
Flexbox – creating rows and columns, aligning items using margin.
Grid – use CSS grid to help add structure to a series of elements.
CSS animations – create striking visuals with CSS to help grab the viewer’s attention.
Media Queries – your poster needs to be responsive and display properly on mobile devices, as well as desktop.
Positioning – some elements of your poster may require absolute positioning to achieve certain effects, such as overlapping elements.
A number of CSS properties are particularly helpful when creating basic layouts for your website. We will discuss ways to easily create grids, rows and columns, and align items within these containers.
Simple grids with flexbox
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
/* Use border-box sizing for all elements to make adjusting gutter padding easier. */
Objectives
Assignment
Resources
Inspiration
Creating Digital Layouts
Simple grids with flexbox
<div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div></div>/* Use border-box sizing for all elements to make adjusting gutter padding easier. */* { box-sizing: border-box;}
.row { display: flex;}
.col { width: 100%; padding-left: 10px; padding-right: 10px;}