Pinned Repositories
action-hero-card-with-actions
Create a card interface with a toolbar of actions using <img srcset> and SVG icons.
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.
assignment2
Plants and what not
background-images
Use multiple images as background to create more complex design solutions.
banner
Use a type system with a little bit of CSS to create a banner.
Box-Model-
BOXES
but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
call-to-action-banner
Use CSS position along with float to create a call to action banner.
columns-of-cards
Use the CSS float property to create a column layout with four cards inside.
oryn's Repositories
oryn/me-oh-my-html
Write all the necessary HTML for the content in the All ’bout them semantics group activity.
oryn/background-images
Use multiple images as background to create more complex design solutions.
oryn/saas-website
Code the SaaS website you designed in your Interaction Design course.
oryn/events-calendar
Use HTML table elements to create a calendar of events.
oryn/data-table
Create a chart of data using HTML table elements.
oryn/volunteer-form
Create a large-scale volunteer registration form for a not-for-profit organization.
oryn/icon-navigation
Combine together grids, modular type & CSS components to make a responsive navigation with icons.
oryn/contact-form
Create a functional website contact form using Formspree as the message sender.
oryn/registration-form
Create a registration form using HTML’s form & input elements with functionality supplied by Formspree.
oryn/list-groups
A small, super simple exercise to get practice using list groups.
oryn/icons
Use CSS modules & Modulifier to create a very basic list with icons.
oryn/lists-n-grids
Create a list-based layout using grid and type systems.
oryn/content-page
Using a big chunk of content and Typografier, design the content to it looks properly formatted.
oryn/banner
Use a type system with a little bit of CSS to create a banner.
oryn/modular-nav
Create a modular navigation using the grid and type systems.
oryn/section
Using the finalized HTML and basic CSS, complete the layout by adding Typografier & associated classes.
oryn/grid-ception
Using the Gridifier system and embedding grids within grids to make more complex layouts.
oryn/grid-layout
Create a grid-based, responsive layout using the Gridifier tool.
oryn/responsive-image-section
Create a responsive section that has an image on it's left half.
oryn/html-writer
Write all the necessary HTML for the content in the Semantics Schemantics group activity.
oryn/restaurant-website
Create a wireframe/prototype for the restaurant website you planned and designed in another class.
oryn/responsive-image-caption
Create a responsive image and caption using the CSS position properties and media queries.
oryn/responsive-icon-cards
Use media queries and display to create responsive icon cards.
oryn/responsive-section
Use media queries and float to make a responsive section on a website with three columns.
oryn/typographic-insets
Use the CSS float property to add some insets into a piece of text.
oryn/responsive-header
Use float and media queries to make a responsive website header.
oryn/image-grid
Use float and media queries to make a grid of images responsive for different screen sizes.
oryn/hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
oryn/exploding-robot-head
Use position relative & absolute to make this robot head explode when hovered.
oryn/call-to-action-banner
Use CSS position along with float to create a call to action banner.