ADD103 Projects

Creating Your First Site: Hosting and viewing
Text Formatting: Website that has both HTML and CSS styling, reviewing a game character.
Connecting Files and Folders: Linking to HTML pages, CSS stylesheets, and images, even when they're in a different folder.
Holiday Website: Using colors and fonts with CSS
Editing Images: Image optimization workflow: formats, sizing, and compression.
Using Images: Using img tags correctly: alt text, sizing, and responsive images.
Chrome Developer Tools: Using browser developer tools. Namely, using the Elements editor to live test CSS.
Links: Linking to external sites, as well as internal page anchors.
Lists: Unordered, ordered, and description lists, including nesting.
IFrames: Embedding external content using the iframe element.
Introducing SEO and Content Generation with ChatGPT: Basic search engine optimization: titles, meta tags, and semantic HTML. Covered Image names, and using AI to generate site content.
Tables: Table structure, colspan/rowspan, styling, and calendar layout.
Introduce Yourself: Personal profile page focusing on typography and basic layout. Used a wireframe to plan the design.
Semantic Layout: Semantic content pages with simple nav about 3D printers, laser cutters, and CNC mills. Used AI to generate keywords for SEO.
Selectors and Semantics: CSS selectors, classes vs. IDs, specificity, and the box model.
Advanced Formatting: Rounded corners, Gradients, Shadows, and Background Effects.
Creating a Template / Colors and Fonts: Float-based page layout, color palette practice, and Google Fonts.
Grid Layout - Javascript Image Change: Grid layout practice, image swapping with JavaScript.
Media Queries: Responsive design using media queries for different screen sizes.
HTML Forms: HTML forms and different input types including text, email, radio, checkbox, and select.
Photo-Based Tutorial Site: Multi-page Godot tutorial site with 30 images, planned with a wireframe. Features thumbnail viewer and step-by-step card layouts.
Bootstrap Framework Demo: Bootstrap 5 demo site showcasing colors, nav, images, the grid system, typography, and tables.
Bootstrap Review Site: Bootstrap 5 version of the photo based site