ashx3s

Card Design Activity

• Goal: Build a card with sample content
  • use an article tag for the card
• Required Content:
  • An h3 heading
  • a p for main text
  • an image or icon
  • a CTA button
• Styles:

ashx3s

CSS Breakpoints Activity

• Goal: Create a good mobile and desktop experience by change how content is displayed
  • use a screen size to determine your break points

Steps

• Take a card that you've been working on
  • create a breakpoint to optimize your content when it is at a mobile screen
• you can use mobile or desktop first

ashx3s

Mobile Navigation

This is a set of steps for making a vertical mobile navigation. This is a simple implementation that can be extended and expanded on using javascript or a checkbox hack.

• Review this codepen for a working example of this navigation design
• Important this example uses almost no classes to keep it simple. you should be using classes in your code otherwise your header bar styles will dictate all other uses of these same tags throughout your page.

Steps

1. Create your header bar and nav in html

ashx3s

Image Activity

• Goals: Practice adjusting how an image looks and fills space using css
  • Pick 1 image and set it in the foreground using the <img> tag
  • In a different section on the web page, use background-image: url(""); to fill the screen with a background image
• Things to Practice (choose 1 for this session)
  • Make your images render properly at all screen sizes
  • Apply effects such as filter or blur
  • For an extra challenge, experiment using blend modes on your images
• Add text overtop of a background image and make sure it is readable

ashx3s

404 Error Page Activity

Outline

The goal of this activity is to practice placing content over a background image. In order to experiment with this, use either flexbox or css grid to organize content and position items well so that the background and forground have dialog with one another.

Requirements

• Due: January 28 @ 11:59PM
• Your 404 Page must use a background image

ashx3s

User Input Form

Goals

• Create a simple user input form
  • options include:
    • signup form
    • review form
    • information form
• video game character creation

ashx3s

CSS Grid Layout Activity

• This activity is not for marks

Goals

• Practice using CSS Grid for content layout
• Experiment with CSS Grid Layout Ideas

Instructions

ashx3s

CSS Grid Quick Tips

This are some pointers on basic grid usage. For more details, please see css-tricks grid guide

• Code Examples are derived from this github repo
  • there is also some useful examples for setting background images on the gallery.html page

How to set up grid

1. add display: grid; in your css to the class or element that you want to be a grid container

ashx3s

Hero Hunt Activity

• Find 1-3 different hero section designs
• Conduct a first glance assessment of the design (Focus on the first association that you make)
  • What is the main message? (consider tone and personality along with literal meaning)
  • Who is the hero section targeting?
  • How does the hero section engage the user? (what action is the user encourage to do)
• Review the code used in the hero sections
  • Compare the html and css
• Focus on:

ashx3s

Build a Hero Section in Codepen

• Use hero sections found in the hero hunt activity as inspiration, but build with new assets and text
• Your hero section should take up the majority or all of the screen before the fold
• The text should be very clear ontop of the background image
• Your call to action should draw the user's attention
  • approaches to do this (use at least 2):
    • colour
    • contrast
• pseudo class :hover