Set up your local development environment and begin writing well-structured content for your sites.
- Intro to HTML
- HTML Tags
- Setting Up A Text Editor
- Creating Your First Website
- Project: Travel Blog
- Implement an HTML page for your new blog site
- Project: Two Sandals
- Create an HTML page for a hip, new restaurant
Learn best practices for using CSS to style your HTML. Begin using Chrome DevTools to sandbox and debug your code.
- CSS Setup
- CSS Selectors
- CSS Visual Rules
- Chrome DevTools
- Project: Beach Paradise
- Create a travel site using your new-found knowledge of HTML and CSS.
- Project: Dasmoto's Arts & Crafts
- Create a website for a new Arts & Crafts store using HTML and CSS
Command Line + Git
Use the command line and Git to make drafts of your work. With GitHub Pages, deploy your first website to the Internet.
- Command Line Navigation
- Command Line Setup
- Git Basic Workflow
- Git and Github Setup
- Deployment to Github Pages
- Project: Broadway
- Incorporate Git into your workflow and Help Broadway, a new design firm, create a landing page for their site.
- Project: Excursion
- Create and deploy a landing page for a video recording app.
Display and Positioning
Learning to size and position elements with CSS. Leverage Flexbox – a powerful new CSS positioning tool.
- CSS Box Model
- CSS Display
- CSS Flexbox
- Project: My Times
- Create a fully-realized clone of a popular newspaper site from scratch.
- Project: The Tea Cozy
- Create a professionally designed site for a new tea cafe from scratch.
Responsive Design and Browser Compatibility
Learn responsive techniques that make it easy to develop sites that look great on all sizes and browsers.
- Responsive Design - Sizing Elements
- Responsive Design - Media Queries
- Browser Compatibility and Polyfills
- Project: Secret Agent Supply Inc.
- Create a fully responsive site that makes it easy to buy the secret agent supplies from any device.
- Project: Tortoiseshell Optics
- Create a fully responsive site for a new glasses site, Tortoiseshell Optics
CSS Documentation and Debugging
Learn how to use documentation and other online resources to solve unfamiliar problems and debug complicated CSS.
- MDN Documentation and Research
- Project: Fotomatic
- Debug a multi-page site for a new photography startup.
Design and UI Feedback
Analyze the decisions that make sites user friendly and fun to use. Learn advanced color and typographic CSS techniques. Harness the power of pseudo-classes to make your site interactive.
- CSS Pseudo-Classes
- CSS Animation / Transitions
- CSS Typography
- CSS Color
- Design - Color Palettes
Capstone Project (Colmar Academy)
You've been hired to design and implement a completely responsive single page site. Using supplied wireframes, make key design decisions.
- Font Awesome
- Asset Management
- Custom Domains
- Introduction to Bootstrap
- Introduction to jQuery
- Final project
- Choose one of these three projects: