Welcome to Foundations of Web Design
This 8-week course introduces students to the fundamentals of web design, focusing on creating visually appealing and user-friendly websites. Through a combination of theoretical lessons and practical projects, students will learn to build web pages using HTML and CSS, ensuring they are proficient in styling and structuring content.
Students will explore responsive design techniques with media queries, Flexbox, and CSS Grid, enabling them to create websites that adapt seamlessly to various devices. They will also integrate multimedia elements, such as images, videos, and audio, to enhance the user experience.
The course covers JavaScript fundamentals to add interactivity to web pages and introduces version control using Git, with project management on GitHub. Students will develop, debug, and test their web projects, ensuring functionality and user-friendliness. By the end, students will have built and hosted a professional web portfolio on GitHub Pages.
Instructor
David Martinez, IT Graduate
Email: David.Martinez003@umb.edu
Schedule
| Meeting Time: | Tuesday & Thursday 12:30 PM - 2:30 PM |
Location: | IT Technovator @ Wheatley, Third Floor, Room 136 |
|---|
| Week | Overview | Project |
|---|---|---|
| Week 1: Project Planning & HTML Foundation |
Web design overview VS Code & GitHub setup HTML structure & semantic tags Forms & inputs Accessibility basics |
Create HTML foundation (header, nav, main content, form, footer) |
| Week 2: Multimedia & CSS Fundamentals |
Multimedia embedding Content strategy Image optimization GitHub Pages deployment CSS syntax & selectors |
Add multimedia, basic CSS, and deploy to GitHub Pages |
| Week 3: Visual Design & Brand Identity |
Color theory & palettes Typography fundamentals CSS variables Backgrounds & borders Box model |
Apply visual styling with brand elements |
| Week 4: Mobile-First Responsive Design |
Responsive design principles Media queries & breakpoints Flexbox properties Responsive images Mobile UX |
Make site fully responsive using Flexbox |
| Week 5: Advanced Layouts & Page Structure |
CSS Grid fundamentals Grid template areas Combining Grid & Flexbox Advanced techniques Layout patterns |
Implement advanced layouts (galleries, product grids, etc.) |
| Week 6: User Experience & Interactive Elements |
CSS transitions Animations & keyframes Transform properties Hover effects UX-focused interactions |
Add transitions, hover effects, and animations |
| Week 7: Dynamic Functionality & Interactivity |
JavaScript fundamentals DOM manipulation Event handling Form validation Dynamic content updates |
Add JavaScript functionality (validation, carousels, etc.) |
| Week 8: Launch Preparation & Portfolio Showcase |
Performance optimization Accessibility testing SEO basics Analytics setup Project documentation |
Fully optimized and documented project ready for real-world use |