Projects
These projects show my progression throughout the semester as I picked up web design and front-end skills. Each one builds on the last and works toward my final portfolio.
Labs
Lab 1 – Intro to HTML
My first basic webpage using core HTML structure.
Focus Areas:
- Basic HTML document setup
- Headings and paragraph elements
- Understanding how content renders in the browser
Lab 2 – Food & Fitness Website
My first multi-page website, presenting health and fitness info in a clean layout.
Skills Used:
- Linking multiple HTML pages together
- Building a basic nav system with anchor tags
- Using header, nav, main, and footer for page structure
- Organizing content with headings and lists
Lab 3 – Food & Fitness Website (Expanded)
Expanded the Food & Fitness site with more content and better organization.
What's New:
- Added Food and Fitness guidance pages
- Made the navigation consistent across all pages
- Reorganized content into clearer sections
Lab 4 – Food & Fitness Website (Refined)
Cleaned up the Food & Fitness site with better header styling and consistent visuals.
What's New:
- Added a background image to the header with proper positioning, sizing, and no-repeat settings
- Used line-height and text-indent to make the header more readable
- Cleaned up the nav with bold font-weight, custom spacing, and removed link underlines
- Reduced footer font size and centered the text for hierarchy
- Switched headings to a custom font family (Georgia)
- Changed list markers to square bullets
Lab 5 – Food & Fitness Website (CSS3 Styling)
Added advanced CSS3 styling to give the Food & Fitness site more polish and depth.
What's New:
- Centered the page and used max-width to keep content from stretching
- Used the CSS box model (margin, padding, border) for consistent spacing
- Added border-radius for rounded elements, plus box-shadow and text-shadow for depth
- Used RGBA and HSLA for transparency effects
- Applied background sizing, origin, and clipping techniques
- Kept the design and nav consistent across every page
Lab 6 – Food & Fitness Website (Layout Restructure)
Restructured the layout of the Food & Fitness site for better visual balance.
What's New:
- Switched the nav from a vertical sidebar to a horizontal bar under the header
- Centered the page and added a max-width container so content doesn't stretch on wide screens
- Used the box model for consistent padding around the Fitness Guidance sections
- Centered the hero image and the "Food & Fitness" title within the purple banner
- Added background colors to separate the nav and footer from the main content
- Used Flexbox to align nav links in a clean horizontal row
Lab 7 – Food & Fitness Website (Responsive Layout)
Made the Food & Fitness site responsive so it works on any screen size.
What's New:
- Set up a @media query at 1024px to switch between mobile and desktop layouts
- Used CSS Grid (grid-template-columns and grid-template-rows) to position the header, nav, main, and footer on desktop
- Built a mobile-first nav that's stacked and centered on small screens, then becomes a sidebar on desktop
- Added border-bottom separators between nav items on mobile
- Added a linear-gradient background and box-shadow to the cover container for depth
- Added a :visited state to the nav links for completeness
- Used section floats for multi-column content on wider screens
Lab 8 – Food & Fitness Website (Tables & Embedded Media)
Added tables and embedded multimedia to the Food & Fitness site.
What's New:
- Built a class details <table> on the Fitness page with caption, headers, and rows
- Styled the table with border-collapse, zebra striping (:nth-of-type(odd)), a colored header row, and a custom caption
- Embedded a YouTube video on the Home page using an <iframe> with float: right so text wraps around it
- Added a CSS transition on nav links for smooth hover color changes
- Tied table colors to the site's purple/blue palette for a consistent look
Lab 9 – Food & Fitness Website (Forms & Registration)
Built a Registration page with a working form for membership signups.
What's New:
- Created Registration.html with a full <form> using method="post" pointing to a server-side script
- Used HTML5 input types (text, date, email, submit) and a <textarea> for comments
- Matched label and id attributes for accessibility, and added required on the essential fields
- Styled the form with Flexbox (column nowrap) for mobile, then CSS Grid (grid-template-columns: 6em 1fr) for a label/input layout on desktop
- Used the attribute selector input[type="Submit"] to style the submit button on its own
- Added consistent margin-bottom spacing on inputs and textareas
Lab 10 – Food & Fitness Website (JavaScript)
Added JavaScript to make the Food & Fitness site interactive.
What's New:
- Stored class data in JavaScript arrays (Exercise, Description, Time, MonthlyFee) and used document.write() to populate the table cells dynamically
- Added click event listeners with addEventListener() on the Food page sections, triggering alert() popups when users click them
- Used document.getElementById() to target DOM elements for event binding
- Replaced the static Home page list with one generated by JavaScript inside a script block
- Added an inline onsubmit handler to the registration form that fires a thank-you alert
- Fixed a missing label for="myLName" attribute on the registration form
Assignments
Assignment 2 – Personal Portfolio Website
The first version of my personal portfolio, showing coursework, skills, and contact info.
Skills Used:
- Designed a consistent layout across multiple pages
- Built internal navigation between portfolio sections
- Structured personal and professional content clearly
- Set up a working email link with the mailto attribute
Assignment 3 – Personal Portfolio (Enhanced)
Refined the portfolio with cleaner structure and better presentation.
What's New:
- Made the layout more consistent across every page
- Refined internal navigation for a smoother experience
- Tightened up the semantic HTML for clearer page structure
- Validated HTML and fixed structural and syntax errors
Assignment 4 – Personal Portfolio (Visual Styling)
Brought the portfolio to life with color, typography, and the box model.
What's New:
- Added background color, font color, and typography styling
- Improved the nav bar styling
- Centered the layout with max-width and margin: auto
- Used the box model for spacing control
- Added border-radius and box-shadow for depth
- Styled images and list markers, added a favicon
- Validated HTML and CSS using W3C tools
Assignment 5 – Portfolio (Advanced Styling & Layout)
Pushed the portfolio's styling further with advanced CSS3 properties.
What's New:
- Used the box model (padding, border, margin) to create balanced spacing and clear content boundaries
- Switched to background images with custom sizing for better integration and responsiveness
- Added linear gradients, border-radius, box-shadow, and text-shadow for depth and a softer look
- Used RGBA and HSLA transparency for nav overlays and background effects
- Centered content with max-width to prevent stretching on large screens
- Refined width/height on visual assets like the resized map
- Improved typography (size, style, color) and overall element alignment
Assignment 6 – Portfolio (Layout & Navigation Restructure)
Restructured the portfolio with a sidebar nav and added pseudo-class link styling.
What's New:
- Switched the nav from a horizontal banner into a left-floating sidebar (160px wide)
- Converted the nav to a semantic <ul>/<li> structure
- Added pseudo-class states (:link, :hover) with new colors — purple (#2b069c) for default and orange (#eb6912) for hover
- Set margin-left: 190px on the main content area to make room for the sidebar
- Removed default ul styling (list-style-type: none, zeroed padding/margin) for a cleaner look
- Expanded the Technical Skills page with two new sections: Layout & Page Positioning and User Interaction & Performance Techniques
- Added a Lab 6 entry to the Projects page and updated the CSS with new #Lab6img and #Assignment5img selectors
Assignment 7 – Portfolio (Responsive Design with CSS Grid)
Made the portfolio responsive with a mobile-first approach and CSS Grid.
What's New:
- Set up a mobile-first @media query at 1024px
- Used CSS Grid (grid-template-columns: 190px auto) to position the header, nav, main, and footer on desktop
- Built a mobile nav with border-bottom separators that switches to a Flexbox column layout in the sidebar on desktop
- Added a universal * { box-sizing: border-box } rule
- Added a linear-gradient background and box-shadow on the cover at desktop view
- Added border-radius to the footer to match the rounded header
- Added a universal img selector with max-width and height: auto for responsive scaling
Assignment 8 – Portfolio (Tables, Media & Animations)
Added a skills table, embedded video, collapsible sections, and hover animations.
What's New:
- Built a Technical Skills <table> with caption, headers, and rows showing skill areas, examples, and proficiency level
- Used border-collapse and matching border styling for a clean look
- Embedded a YouTube video on the Goals page using an <iframe>
- Added <details>/<summary> collapsible sections on Goals for Short-Term Goals, Career Vision, and Skills to Develop
- Added a 0.5s transition on nav links for smooth hover color/background changes
- Made nav links display: inline-block with custom padding for bigger click areas
- Added hover animations on every project image — translateY(-5px) scale(1.02) with a box-shadow, all transitioning at 0.3s
Assignment 9 – Portfolio (Contact Form)
Added a working contact form to the portfolio using Formspree.
What's New:
- Built a "Send Me a Message" form on the Contact page using Formspree as the action endpoint, so submissions actually email me
- Used HTML5 input types (text, email, submit) plus a <textarea> for the message field
- Added matching label/id pairs and required attributes on the essential fields
- Styled the form with Flexbox (column nowrap) for mobile and CSS Grid (grid-template-columns: 40em) for desktop
- Targeted the submit button with input[type="Submit"] to give it a custom width matching the inputs
- Added consistent margin-bottom spacing on inputs and textareas
Assignment 10 – Portfolio (Final Polish & Card Redesign)
Final redesign — split the projects page into Labs/Assignments dropdowns, added a card-based system, and documented the rest of the semester.
What's New:
- Restructured the Projects page into a two-column grid (.projects-grid with grid-template-columns: 1fr 1fr) splitting Labs and Assignments side-by-side
- Made each column collapsible using <details>/<summary> dropdowns
- Documented the rest of the semester with detailed entries for Labs 7-10 and Assignments 6-10
- Built a card-based design system with rounded corners, box-shadows, and accent-colored top borders used across the About, Goals, and Projects pages
- Built a 3-column .goals-grid (CSS Grid repeat(3, 1fr)) for career goal cards with hover lift animations
- Added a .goal-callout component with a left border accent and tinted background for highlighting key career info
- Restructured the About page with .about-intro (grid-template-columns: 1.5fr 1fr) pairing narrative cards with a photo
- Used aspect-ratio: 16 / 9 in a .video-wrapper to keep the Goals page video properly proportioned
- Added a subtle cloud background image on the body (background-repeat: repeat-y)
- Added a @media (max-width: 1020px) breakpoint to collapse multi-column grids into single columns on tablets and smaller screens