Vix's repositories
banner
Use a type system with a little bit of CSS to create a banner.
call-to-action-banner
Use CSS position along with float to create a call to action banner.
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.
data-table
Create a chart of data using HTML table elements.
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.
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.
hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
html-writer
Write all the necessary HTML for the content in the Semantics Schemantics group activity.
icon-navigation
Combine together grids, modular type & CSS components to make a responsive navigation with icons.
icons
Use CSS modules & Modulifier to create a very basic list with icons.
link-card
Making a card pattern that is completely clickable.
list-groups
A small, super simple exercise to get practice using list groups.
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.
registration-form
Create a registration form using HTML’s form & input elements with functionality supplied by Formspree.
responsive-image-caption
Create a responsive image and caption using the CSS position properties and media queries.
responsive-image-section
Create a responsive section that has an image on it's left half.
responsive-photo-gallery
Combine together grids, modular type & CSS components to make a responsive photo gallery.
responsive-section
Use media queries and float to make a responsive section on a website with three columns.
responsive-typography
Use media queries to enhance the typography of a website for different screen sizes.
saas-website
Code the SaaS website you designed in your Interaction Design course.
section
Using the finalized HTML and basic CSS, complete the layout by adding Typografier & associated classes.
typographic-insets
Use the CSS float property to add some insets into a piece of text.
volunteer-form
Create a large-scale volunteer registration form for a not-for-profit organization.