Welcome to the Portfolio Website Workshop! This hands-on session will teach you how to build a beautiful, modern portfolio website using only HTML and CSS.
Daniel Henricks - Tech Lead, Computer Science + Math Senior, and previous intern at Capital One.
- HTML Fundamentals: Structure, semantics, and best practices
- CSS Styling: Layout, colors, typography, and modern design techniques
- Modern Web Design: Gradients, animations, and visual effects
By the end of this workshop, you'll have created:
- A professional portfolio homepage
- Responsive design that works on mobile and desktop
- Modern styling with gradients and animations
- Clean, semantic HTML structure
- A live website you can share with others (if time permits)
Workshop1/
├── index.html # Main HTML file
├── style.css # CSS styling
├── assets/ # Images and fonts
│ ├── head.jpg # Profile picture
│ ├── github.png # GitHub icon. We might add this if we have time
└── README.md # This file.
- A text editor (VS Code) . We will install this.
- A web browser (Chrome, Firefox, Safari, or Edge)
- Download the project files to your computer, or use Git.
- Open
index.htmlin your web browser to see the current design - Open the files in your text editor to start coding
- Refresh your browser after making changes to see updates
- MDN HTML Tutorial - Comprehensive HTML guide
- W3Schools HTML - Interactive HTML tutorials
- HTML Semantic Elements - Learn about semantic HTML
- MDN CSS Tutorial - Complete CSS reference
- CSS Grid Guide - Master CSS Grid
- Flexbox Guide - Learn Flexbox layout
- CSS Gradients - Create beautiful gradients
- Add more sections (Projects, Skills, Learn More)
- Set your name to be rainbow using a gradient!
- Deploy your site using GitHub Pages.
After completing this workshop, we will host:
- Intern Panel next Tuesday, September 23rd, from 5:30 to 6:30 in FGH 134
- Learning JavaScript for interactive features
- Learning a framework, most likely React.
Join our AnchorLink and follow us on Instagram to learn more!