Hey Chicken Nugget Warriors

Tools & Assets

Planning

Development Tools

VS Code Extensions

Learning Resources

Lesson 1 • Foundations

• VS Code install, folder structure, and Live Server run-through
• HTML boilerplate anatomy (doctype, head, body)
• Core tags: headings, paragraphs, lists, images, text formatting
• Why clean indentation + Prettier keep GitHub diffs readable
• Deployment preview using Live Server "Go Live"

Lesson 2 • Semantic Layout

• Built full page structure with header, main, footer, sections
• Reinforced accessible navigation and `alt` text best practices
• Students recreated demo layout + added inline comments explaining intent

Lesson 3 • Notes for This Week

• WhatsApp group: Join the class WhatsApp
• Created HTML styles (basic custom CSS)
• Learned how to inspect websites using DevTools
• Built and refined the navbar and footer

Lesson 4 • CSS & HTML Deep Dive

• CSS Fundamentals: Three types (inline, internal, external)
• Selectors: Element, class (.navbar), styling properties
• Box Model: Content, padding, border, margin
• HTML Structure: Nav, tables, semantic elements
• Advanced CSS: Hover effects, button styling, color systems

Lesson 5 • Client Relations & Performance

• Client Relations: Real-world client assessment focus
• Case Study: Swan Valley Cellars e-commerce optimization
• Performance Issues: Core Web Vitals, LCP, mobile abandonment
• Solutions: Caching, image compression, hosting migration
• Platform Research: Wix, Shopify, Kinsta, WP Engine comparison

Lesson 6 • QA & Accessibility

• CSS Exercise: Text decorations and styling properties
• QA Best Practices: Checklists, risk assessments, functional testing
• WCAG Compliance: Keyboard navigation, alt text, contrast ratios
• Testing Tools: Accessibility checkers, browser extensions, AI tools
• Client Communication: Simplifying technical issues, solution-focused reporting

Lesson 7 • Tech Support & SEO

• CSS Practice: Table styling, borders, padding/margin properties
• Tech Support Role-play: Client communication and troubleshooting
• SEO Optimization: Metadata, keywords, page titles, search visibility
• Navigation Fixes: HTML href attributes, broken links, 404 pages
• Service Management: SLA timelines, NPS feedback, documentation

Lesson 8 • Flexbox & Google Fonts

• Google Fonts: Importing and applying custom fonts from fonts.google.com
• CSS Variables: Using :root selector for color schemes and reusable values
• Flexbox Fundamentals: Flex containers, main/cross axis, flex-direction properties
• Flexbox Properties: justify-content, space-between, space-around, alignment
• Bootstrap Intro: Pre-built components, responsive design, accessibility features

Lesson 9 • Bootstrap Framework Introduction

• Bootstrap Overview: Pre-defined styles, responsive design, and accessibility features
• Bootstrap Templates: Using ready-made templates and classes (W3Schools, Bootstrap docs)
• Responsive Design: Screen size categories (small, medium, large, extra large)
• Bootstrap Components: Navigation bars, buttons, containers, and pre-built elements
• Project Start: Sweetify dessert cafe website with centered logo navbar

Lesson 10 • Bootstrap Components & AI Development

• CDN vs Local Files: Understanding Bootstrap delivery and remote styling integration
• Navigation Enhancement: Building responsive navbars with Bootstrap components
• Favicon Integration: Adding custom icons using Flat Icon resources
• Contact Forms: Text inputs, dropdowns, radio buttons, and submit functionality
• AI-Assisted Coding: Using VS Code's built-in agent and Cursor for rapid development

Lesson 11 • Team Collaboration & Marvin Review

• Breakout exercise: Team discussion about replacing the hosting platform — focus on objectives, responsibilities and role allocation
• Assignment feedback: Individual feedback given; Marvin navigation and file compression discussed
• Tools mentioned: Coding agents as alternatives; Google Anti-Gravity highlighted
• Reminder: GitHub Student Developer Pack discounts available; class dismissed early

Lesson 12 • Final Class Before Christmas Break

• Final class: Reviewed two Bootstrap assignments to start on return (19 Jan)
• Plan: Assignment 2 (original Bootstrap site) first, then Assignment 1 (site clone — likely NIB)
• Guidance: Requirements, student examples, planning tools and testing extensions introduced
• Ideas: family site, activewear brand, sweets café; instructor assisted with Marvin file paths
• Wellbeing: Encouraged students to rest over the break; optional resources available

Lesson 13 • Welcome Back! 🎉🎊

• WE ARE BACK! Tim advised new trainer for back end starts end of February and will announce more later — his name starts with "R" and he's great. Tim will still be around for you to reach out to!
• Travel plans: Students are able to login while travelling (as long as they're enjoying themselves whilst on holiday)
• Bootstrap showcase: Some students shared the work they'd done over the break
• Class focus: Went through resources to start work on make your own website/clone assignment

Lesson 15 • ICT Strategy & Website Migration

• HTML Evolution: Understanding HTML4/CSS2 vs HTML5/CSS3 standards
• ICT Strategy Analysis: Matching technology needs with business goals
• Website Migration Process: 7-step 7-step flow from research to deployment
• Cloud Infrastructure: AWS and Google Cloud for scale and security
• Project Management: Using Trello and Slack to track migration work
• Design Tools: Wireframing with Excalidraw, prototyping with Figma, color selection tips

Lesson 17 • Skywings Warm-Up (Short Class)

• Project preview: Introduced the Skywings resort site and overall scope
• Starter files: Shared the basic folder structure and initial assets
• Class moment: Quick weekend and pet catch-up before tech issues hit