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