sent0007 Goto Github PK

banner

Use a type system with a little bit of CSS to create a banner.

basic-accessibility

A quick look at some basic additions to a website to make it more accessible.

button-styles

A CSS code exercise looking at using multiple classes to create consistent styles.

button-systems

Explore how to use and change the default set of buttons provided by Modulifier.

call-to-action-banner

Use CSS position along with float to create a call to action banner.

cards

Dig into the browser’s layout models to make a simple, flexible informational design.

columns-of-cards

Use the CSS float property to create a column layout with four cards inside.

components-on-a-grid

Review using CSS Grid & Flexbox to create a website design.

confectionery-website-prototype

Create a wireframe/prototype for a confectionery website—showing what you learned this term.

contact-form

Create a functional website contact form using Formspree as the message sender.

content-page

Using a big chunk of content and Typografier, design the content to it looks properly formatted.

content-semantics

Write the HTML code for the beets activity concentrating on semantics only.

css-validation-fixes

Work through all the validation errors, indentation problems, & file issues.

data-table

Create a chart of data using HTML table elements.

dinosaur-designs

Assets for an in-class pair programming exercise that introduces CSS.

embed-containers

A quick, simple assignment to get practice using embed containers.

euro-just-doing-semantics

Write all the necessary HTML for the content in the Semantics Schemantics group activity.

events-calendar

Use HTML table elements to create a calendar of events.

exploding-robot-head

Use position relative & absolute to make this robot head explode when hovered.

exploration

Exploring html and css

fancy-hover-boxes

An exercise using transitions to create hover boxes that fade from black & white to colour.

first-website

A simple website to demonstrate how to use Github

flexible-info-card

Review your knowledge of Flexbox with this small web design assignment.

flexing-your-muscles

Follow this lesson to learn some flexbox techniques to apply to different layouts.

grid-ception

Using the Gridifier system and embedding grids within grids to make more complex layouts.

grid-layout

Create a grid-based, responsive layout using the Gridifier tool.

header-icons

Use float to add navigation and two image icons to the header of a website.

hear-me-oh-content

Apply content accessibility best-practices while writing semantically appropriate HTML.

hello-world

hero-banner

Use CSS position to make a hero banner with text displayed in front of an image.