Warning: not all of these projects are mobile-friendly.

Project 12: Interactive To-do list webapp

Project Description

This project's focus was combining all of the skills I've learned up to this point to build a fully functional and optimized webapp.

Tech Used: HTML, JS, CSS, Webpack, Node.js

Project Links:

Status: Project Re-opened

Note: Style sheet updated. Interface cleaned up. Adding more functionality. WIP.

Project 11: Webpack

Project Description

This project focused on setting up and using webpack methods for creating, bundling, and serving website files/assets.

Tech Used: HTML, JS, CSS

Project Links:

Status: Project Finished

Project 10: Break-out

Project Description

This assignment was built on the last assignment to further develope skills associated with the canvas element in HTML, and presented further chalenges in JS

Tech Used: HTML, JS

Project Links:

Status: Project Finished

Project 9: Ping-pong

Project Description

This assignment was devised to learn methods surrounding the HTML Canvas element and how it can be used to create animations with JavaScript.

Tech Used: HTML, JS

Project Links:

Status: Project Finished

Project 8: Library Book Table

Project Description

Create a table that can track individual JS Objects and use Object Constructors to add new objects. Also includes an html form for adding new books.

Tech Used: HTML, JS

Project Links:

Status: Project Finished

Project 7: Sign-up Page

Project Description

Review intermediate html and css with emphasis on html forms; the focus of the project. Create a sign up page following the provided example image as a design guideline.

Tech Used: HTML, CSS

Project Links:

Status: Project Finished

Project 6: Calculator

Project Description

JavaScript fundamentals review. Create a simple on-screen calculator that can handle basic calculations.

Tech Used: HTML, CSS, JavaScript

Project Links:

Status: Project Finished

Project 5: Etch-a-sketch

Project Description

This was a fun project to practice DOM manipulation. Build a browser etch-a-sketch application using DOM manipulation in JavaScript.

Tech Used: HTML, CSS, JavaScript

Project Links:

Status: Project Finished

Project 4: Odin Shopping List

Project Description

This was not a required project, but it was one that I immediately found interest in. As an avid to-do-lister, I found an appreciation for this simple side-project.

Tech Used: HTML, CSS, JavaScript

Project Links:

Status: Project Finished

Notes: Consider revisiting this one to spruce it up a little

Project 3: Console Game - Rock-Paper-Scissors

Project Description:

For this project, create a rock, paper, scissors game that can be played in the website console.

Update: Project revisited and a user interface was added. Game can now be played on main-webpage

Tech Used: HTML, CSS, JavaScript

Project Links:

Status: Project Finished

Project 2: Flex-box Landing Page Layout

Project Description:

Recreate a landing page website from a provided image. The preportions do not have to be perfect, but should visually make sense. The flex-box method should be the primary tool used to recreate this page.

Tech Used: CSS (HTML provided)

Project Links:

Status: Project Finished

Notes: Consider revisiting and adding mobile phone layouts.

Project 1: Simple Recipe Page

Project Description:

Use HTML to create a very basic recipe website. The website consists of a main index page that links to several recipe pages.

Update: the project was later revisited as a CSS review and basic stylesheets were added.

Tech Used: HTML + CSS

Project Links:

Status: Project Finished

Notes: The project is finished by the criteria of the assignment, but now that I'm looking back at it I'm not happy with it. Revisit and make it look good.