Personal Profile Page
In this project, I modified code to a basic webpage to add pictures, content, and a stylish design. It was a wonderful start to the basic building blocks of HTML and CSS.
- Modified HTML to add my own images and content
- Modified CSS to customize my own styles
- Learned about Github and how to upload projects to it
- Made sure photos were resized and optimized for the web
Mobile First Responsive Layout
In this project, I built a mobile first responsive layout using both HTML and CSS. In it I show an understanding for responsive design by accomodating small, medium, and large screens.
- Wrote all HTML and CSS for project
- Used media queries to create a responsive design
- Continued to build on CSS and HTML skills developing better soft skills and habits
- Used CSS to apply interactive states to psuedo elements
An Online Registration Form
In this project, I built a mobile friendly registration from using a wide variety of HTML elements.
- Matched mockup to desired specs for all screen sizes
- Used HTML and CSS to craft an engaging and responsive form
- Used CSS transitions to affect form elements in different states
- Learned an in depth understand of HTML forms and the attributes that go along with them.
Web Style Guide
In this project, I was responsible for converting CSS into a Sass document, in order to create a reusuable web style guide.
- Learned the basic building blocks of Sass
- Used partials and mixins to create a highly functional Sass document
- Used the Scout App to compile Sass back into a CSS document
- Learned all about nested selectors and variables in Sass
An Interactive Photo Gallery
In this project, I used Javascript and jquery to build an interactive photo gallery.
- Used javascript to build a working search bar that filters photos
- Used a jquery plugin to create lighbox pop up.
- Used CSS Flexbox to create a responsive designe for gallery page
- Learned the basic building blocks for Javascript
Game Show App
In this project, I created a browser version of “Wheel of Success”, a word guessing game where players will click letters from an onscreen keyboard to try to guess a random phrase.
- Used javascript to create an array of random phrases and had one populate on screen
- Used javascript to tell whether a player had won or lost the game
- Using javascript, I allowed the game to reset and be replayable
- Used CSS transitions to change letters as they were guessed
WebApp Dashboard
In this project, I took a mockup and some icons and built a beautiful web dashboard. It is complete with javascript driven charts and graphs.
- Learned the building blocks of SVG graphics and using them in CSS
- Use local storage with Javascript to store the users profile settings and recall them.
- Used javascript to create an autofill function when messaging the user
- Learned the basics of the CSS grid system to create interesting websites
Use an API to Create an Employee Directory
In this project, I used the Random User Generator API (https://randomuser.me/) to grab information for 12 random “employees,” and use that data to build a prototype for an Awesome Startup employee directory.
- Used fetch to request a JSON object and it's data
- Used Javascript to create a functioning search bar
- Used Javascript to build my own popup modal that would cycle through the employees
- Learned the building blocks of JSON and Asynchronous Javascript programming