Welcome to my course project directory!

The following projects have been created as a way to continue my exploration of Web Design.

Main Projects

Midterm Project

Out Midterm project took a dive into the process of building a website, rather than actually building a website. It was an opportunity for us to experience the process of planning out a website's design, creating the graphics and images for it, and more. I created a website for a cosplay company and their contest that was video game themed. It was a fun and interesting experience, as I've never really gotten the chance to design a website from scratch before.
Final Project

Cosplay Microsite

Video Game Microsite

For our final project, we were given the opportunity to create a full website from scratch, or two microsites from scratch. I went with the microsites, as I really liked my Midterm design and I wanted to make it come to life. This was a challenging experience, as I wanted to fully express the knowledge and techniques I learned from this class. I have yet to perfect everything, but I think I was able to show what I have learned with these sites.

Project 1

With this project, our goal was to create a page with HTML going over whatever we wanted, then use CSS (with either a Normalize CSS link or a Reset CSS link) to design the page. I decided to make mine about coffee since it's something I like and the information is easy enough to find. Then I designed it with a lot of browns and warm colors in mind to keep in theme with the coffee idea.

Project 2

With this assignment, we were given the challenge to recreate the layout provided by replacing the float properties with flex properties. I did this by creating a new section around the parts that needed to be flexed, put the "display:flex" property on this new section, and then applied "flex:1" and "flex:2" on the nav and article elements.

Project 3

With this assignment, we were given the challenge of converting the float elements to flexbox or flex grid. We initially had to build the website from the ground up using the float properties as stage one of the project. I ended up using all flexbox elements to replace the float elements rather than flex grid, as flex box was the easiest and worked for all elements.

Project 5

With this project, we were given certain sections of code, instructed to write the rest, and given instructions on how to build the website. This was a practice assignment created to help us better understand the idea of responsive design and sizing for mobile devices. This assignment additionally had a small introduction of sorts to Java, so we could create a flip animation that would work on both desktop and mobile devices.

Project 6

This project, alongside another one (The Sacramento Writers Group Website) was a project where we were instructed to try our best to write the HTML and the CSS for a mobile first responsive design website. So, we do the HTML like normal and then do the CSS based on a mobile screen size, rather than a desktop screen size. Afterwards, we go in and add the media quieries for tablet and desktop sizes. Overall, both websites were a challenge as each website size needed a different format, so a lot of the CSS formatting obviously needed to be redone. Despite the challenge, I did have fun with both websites.

Project 7

With this project, we went over different parallax techniques, and each one gradually got more and more difficult. We got the option to either attempt an easier parallax design, or a harder one. I completed this assignment while trying to replicate example 3. I don't have much positioning experience, so I figured this would be good practice with the new concept and the older technique.

Project 6

This project added onto our existing AudioSpace project by creating a navigation bar. The pages do not go anywhere, but it was great practice for using GitHub to save copies of your progress, using java to add details like hiding the navigation menu on a mobile device unless it's clicked, and basic navigation practice.

Cordelia Michaud

Intermediate Web Design: Course Project Directory

Welcome to my course project directory!

Main Projects

Midterm Project

Final Project

Cosplay Microsite

Video Game Microsite

Assignments and Side Projects

Project 1

Practice Markup

Project 2

Flexbox Challenge: Coffee Roasters

Project 3

Concentric Website

Project 4

Pirate Themed Website

Project 5

Audio Space Website

Project 6

Zen Music Festival: Mobile First Responsive Design

Project 7

The Parallax Challenge

Project 6

AudioSpace: Adding Navigation