Astro Media

image description

Papakura High School's Website Development Course

By Astro Media NZ

Kia Ora, Welcome. If you are reading this, you are most likely a student from a course that we are teaching at your high school. But if not, feel free to learn along as well. This course will teach you how to make your own website that could be your personal portfolio, a website about your iwi/ancestry or even for a side hustle. We don't want you to make a cookie-cutter barely passable site, we want you to come out with something that will last a lifetime. This website will be a reflection of you, so we want it to be GOATED.

The Requirements:

As of June 2024, there is a NZQA unit standard called Develop, test, and evaluate an interactive website for organisational use (29788) which we will be following also.

The Course Structure

This course will last 13 weeks more or less.

Week 1: Introduction and Setup

Goal: Understand the basics of web development and set up the development environment.

Activities:

  • - Introduction to web development and Astro.js.
  • - Set up the development environment (VSCode, Git, Node.js).
  • - Initialize a new Astro.js project.
  • - Create GitHub repository.
  • - Initialize Astro.js project.
  • - Basic Hello World + DaisyUI setup.

Week 2: Hero Section

Goal: Create the Hero section and learn the basics of HTML and Tailwind CSS.

Activities:

  • - Structure the Hero section in HTML.
  • - Style the Hero section using Tailwind CSS.
  • - Add basic GSAP animations.
  • - Build and style Hero section.
  • - Implement basic fade-in animation using GSAP.

Week 3: About Me Section

Goal: Build the About Me section and deepen understanding of HTML and Tailwind CSS.

Activities:

  • - Structure the About Me section in HTML.
  • - Style the About Me section using Tailwind CSS.
  • - Add GSAP animations.
  • - Build and style About Me section.
  • - Implement slide-in animation using GSAP.

Week 4: My Skills and Experience Section

Goal: Create the My Skills and Experience section.

Activities:

  • - Structure the My Skills and Experience section in HTML.
  • - Style the section using Tailwind CSS.
  • - Build and style My Skills and Experience section.
  • - Implement staggered animations for skill bars.

Week 5: Gallery Section

Goal: Create the Gallery section and learn how to handle images and multimedia.

Activities:

  • - Structure the Gallery section in HTML.
  • - Style the Gallery section using Tailwind CSS.
  • - Add GSAP animations for images.
  • - Build and style Gallery section.
  • - Implement zoom-in animations for gallery images.

Week 6: Contact Me Section

Goal: Create the Contact Me section and learn to use Netlify forms.

Activities:

  • - Structure the Contact Me section in HTML.
  • - Style the Contact Me section using Tailwind CSS.
  • - Add Netlify form integration.
  • - Build and style Contact Me section.
  • - Implement form submission with Netlify forms.
  • - Implement form field animations.

Week 7: Responsive Design

Goal: Make the website responsive.

Activities:

  • - Introduction to responsive design.
  • - Apply responsive design techniques using Tailwind CSS.
  • - Make the Hero, About Me, My Skills and Experience, Gallery, and Contact Me sections responsive.

Week 8: Navigation and Routing

Goal: Implement navigation and routing between sections.

Activities:

  • - Create a navigation bar and learn basic React JS.
  • - Add Iconify icons
  • - Implement smooth scrolling between sections.
  • - Build and style the navigation bar.
  • - Implement GSAP smooth scrolling.

Week 9: Going Crazy with Styling

Goal: Taking your Tailwind and GSAP to the next level.

Activities:

  • - Scroll trigger
  • - Browse random DaisyUI components
  • - Add a beat to your website

Week 10: Final Touches and Polishing

Goal: Refine and polish the website.

Activities:

  • - Get that 90+ lighthouse score
  • - Make sure those animations are smooth
  • - Add a favicon
  • - Check your on-page SEO
  • - Add a 404 page

Week 11: Testing and Debugging

Goal: Test the website and fix any issues.

Activities:

  • - Test your friend's website
  • - Be honest and give feedback
  • - We are also going to come around and give feedback.

Week 12: Deployment

Goal: Deploy the website to Netlify.

Activities:

  • - Set up Netlify account.
  • - Deploy the website to Netlify.
  • - Setup custom domain.

Week 13: Presentation and Review

Goal: Present the project and review the course.

Activities:

  • - Prepare presentation of the website.
  • - Reflect on what was learned.
  • - Create and deliver presentation.
  • - Discuss lessons learned and future improvements.