libecap Goto Github PK

ecommerce-pattern-library

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

effect-triggers

Make buttons trigger effects on HTML elements on the page.

embed-containers

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

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.

exporting-from-photoshop

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.

first-website

flexing-your-muscles

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

frozen-not-in-time

Create an animated introduction banner about ice cream.

grain-globber

With an already made array of grains, create a layout in the HTML with jQuery & CSS.

graphic-design-portfolio

my graphic design portfolio website

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.

hero-banner

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

hidden-message-fixer

Find the hidden message by fixing the HTML, CSS & Javascript bugs.

hide-show-responsively

Use media queries and responsive design techniques to hide and show content on different screen sizes.

horizontal-nav

Make a horizontal navigation using the CSS flow and display properties.

hot-grid-dle

Create a small layout using grids, hiding and showing units & position.

html-document-setup

Create a valid HTML document with all the right starter code.

html-rearranger

Use Javascript & jQuery to manipulate an HTML file an rearrange the content.

html-validation-fixes

Sift through the files and code and fix all of the errors.

html-writer

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

icons

Use CSS modules & Modulifier to create a very basic list with icons.

image-grid

Use float and media queries to make a grid of images responsive for different screen sizes.

info-panel

Create a small tab-like interface using HTML, CSS & a little bit of JavaScript.

interactive-polaroids

Create interative polaroid images with CSS transitions and transforms.

interactive-svg

Make an embedded SVG graphic with animations & transitions.