Evelyn Hopky's repositories
leafy-decorations
Use background images to create design elements on a masthead & banner.
retina-images
A quick look at exporting retina ready images using the compressive JPG technique.
background-images
Use multiple images as background to create more complex design solutions.
modularity-mindfulness
A simple review exercise exploring grids, type systems & modular CSS
me-oh-my-html
Write all the necessary HTML for the content in the All ’bout them semantics group activity.
icon-cards
Combine together grids, modular type & CSS components to make a series of link cards with icons.
icon-navigation
Combine together grids, modular type & CSS components to make a responsive navigation with icons.
list-groups
A small, super simple exercise to get practice using list groups.
icons
Use CSS modules & Modulifier to create a very basic list with icons.
embed-containers
A quick, simple assignment to get practice using embed containers.
lists-n-grids
Create a list-based layout using grid and type systems.
modular-nav
Create a modular navigation using the grid and type systems.
content-page
Using a big chunk of content and Typografier, design the content to it looks properly formatted.
banner
Use a type system with a little bit of CSS to create a banner.
section
Using the finalized HTML and basic CSS, complete the layout by adding Typografier & associated classes.
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.
responsive-image-section
Create a responsive section that has an image on it's left half.
html-writer
Write all the necessary HTML for the content in the Semantics Schemantics group activity.
restaurant-website
Create a wireframe/prototype for the restaurant website you planned and designed in another class.
responsive-image-caption
Create a responsive image and caption using the CSS position properties and media queries.
responsive-section
Use media queries and float to make a responsive section on a website with three columns.
image-grid
Use float and media queries to make a grid of images responsive for different screen sizes.
responsive-header
Use float and media queries to make a responsive website header.
responsive-typography
Use media queries to enhance the typography of a website for different screen sizes.
hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
responsive-icon-cards
Use media queries and display to create responsive icon cards.
exploding-robot-head
Use position relative & absolute to make this robot head explode when hovered.
hero-banner
Use CSS position to make a hero banner with text displayed in front of an image.
typographic-insets
Use the CSS float property to add some insets into a piece of text.