Cole Allen's repositories
more-than-just-datum
Create a prototype interface for a playground finder app using tables & forms.
events-calendar
Use HTML table elements to create a calendar of events.
data-table
Create a chart of data using HTML table elements.
volunteer-form
Create a large-scale volunteer registration form for a not-for-profit organization.
registration-form
Create a registration form using HTML’s form & input elements with functionality supplied by Formspree.
contact-form
Create a functional website contact form using Formspree as the message sender.
just-your-type
A creative design project that demonstrates the skills learned so far using the Gridifier, Typographer & Modulifier.
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.
button-systems
Explore how to use and change the default set of buttons provided by Modulifier.
content-page
Using a big chunk of content and Typografier, design the content to it looks properly formatted.
trendy-fruit
A coding exercise practicing writing HTML in connection with using Typograifer classes.
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.
using-a-type-system
A quick look at using a generated type system from Typografier in your website to simplify making responsive layouts.
grid-ception
Using the Gridifier system and embedding grids within grids to make more complex layouts.
hot-grid-dle
Create a small layout using grids, hiding and showing units & position.
grid-layout
Create a grid-based, responsive layout using the Gridifier tool.
using-gridifier
A quick look at how using a generated grid from Gridifier in your website to simplify making responsive layouts.
making-responsive-grids
A step-by-step guide to making a responsive grid and the different pieces of code that are needed.
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.
hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
hero-banner
Use CSS position to make a hero banner with text displayed in front of an image.
columns-of-cards
Use the CSS float property to create a column layout with four cards inside.
header-icons
Use float to add navigation and two image icons to the header of a website.
flexing-your-muscles
Follow this lesson to learn some flexbox techniques to apply to different layouts.
link-card
Making a card pattern that is completely clickable.
button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.