obaidazeino Goto Github PK

accessible-content-for-all

Apply accessibility best practices to some HTML content to make it better for everybody.

animal-rescue-website

Re-design an animal rescue website by applying everything learned this term.

animated-clock

A lesson in using CSS keyframe animations to make a clock face with rotating hands.

arrrgenes-treasure-tours

Fix colour contrast & colour blindness related problems on a piratey tourism website.

background-images

Use multiple images as background to create more complex design solutions.

berry-blobber

Explore using objects and arrays by writing a function to output some berry information.

button-styles

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

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.

code-a-website

Follow some wireframes, a sitemap & given some content, write the HTML for a full website.

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.

contact-form

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

contact-list-generator

Use Javascript to create a data structure representing contact information and display it on the page.

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.

content-to-code

Given a chunk of content, determine the groups & HTML tags—without writing any code.

css-validation-fixes

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

dealing-with-whitespace

Spend some time looking spacing in typography: margins, paddings, line-length, line-height, etc.

designing-form-errors

Write up code for accessible, well designed form error messages with a little Javascript to help.

dinosaur-designs

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

distributed-cards

Use Flexbox in a column direction to create distributed cards.

distributed-navigation

Use Flexbox to create a horizontal navigation with lots of different components.

ecommerce

ecommerce-pattern-library

A term-long project redesigning an ecommerce website focusing on making a pattern library.

euro-just-doing-semantics

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

fancy-hover-boxes

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

fastness-fixer

Fix a bunch of performance problems and pass the performance budget.

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.