Welcome to Web Development 2

Course Overview

This course is a continuation of Web Development 1 and provides an in-depth exploration of full-stack web application development. Building on the foundations established in the previous course, we will strengthen your intermediate JavaScript skills, explore React for building component-based user interfaces, and use Next.js as a modern full-stack framework.

This course primarily uses Next.js with the App Router, reflecting current industry best practices. Students will be introduced to concepts such as React Server Components, Server Actions, client vs. server components, and file-based routing using the app/ directory.

While the program includes some theoretical content, the course strongly emphasizes hands-on, practical coding and real-world application development.

Core Technologies Used

• JavaScript (ES6+)
• React (functional components and hooks)
• Next.js (App Router)
• Tailwind CSS
• Backend integrations (e.g. Firebase, third-party APIs)
• Git & GitHub (version control and collaboration)

Assessment Breakdown

Your performance in this course will be evaluated based on the following assessments:

• Project Design focuses on planning, architecture, wireframes, and technical decisions.
• Project Delivery evaluates implementation, functionality, code quality, and presentation.

Success in this course depends on consistent engagement with weekly activities and timely completion of labs.

With this course, you'll transition from simply building websites to crafting highly interactive, production-style full-stack web applications.

How to Succeed in This Course

1. Embrace Collaboration
   Except for exams, all work in this course is public, encouraging open collaboration. Don’t hesitate to ask for help or support your peers.

2. Learn from Others
   Because all repositories are public, you can explore and learn from your peers’ approaches, review code, and adopt best practices.

3. Stay Engaged
   Attendance is not mandatory but is highly recommended. Regular participation and consistent effort are key to success.

While formal grades are required by the institution, the primary goal of this course is skill development and long-term competency, not short-term point accumulation.

Group Work & Evaluation

This course is largely group-based, with a maximum of three students per group. If a student cannot find or join a group, they will complete group work individually.

Most work will be completed collaboratively; however, individual grades may differ based on:

• Demonstrated contribution
• Code ownership
• Participation in group activities

Getting Help

Struggling is a normal part of learning. When you encounter challenges, take advantage of the available support systems.

During Class

• Classmates: Learn from each other. Someone else may have solved the same problem you’re facing.
• Instructor: Ask questions freely during class—about course material or broader concepts.

Outside of Class

• Classmates: Study groups and informal discussions can significantly improve understanding.
• AI Tools: Chat-based AI tools and AI-powered documentation can help with troubleshooting and concept clarification.
• SAIT Tutor: Free tutoring services are available if you need extra help outside class time.

If you require accommodations or additional learning support, please reach out early so arrangements can be made proactively.

AI-Assisted Tools

As future web developers, staying current with emerging tools is essential. This course encourages the responsible use of AI-assisted tools such as ChatGPT and GitHub Copilot.

AI tools must not replace your thinking. You may be asked to explain or defend any code you submit, including code written with AI assistance.

Use AI as:

• A coding assistant
• A troubleshooting aid
• A learning supplement

Not as:

• A replacement for understanding
• A substitute for original work

Chat-Based AI Tools

Chat-based tools can assist with:

• Brainstorming ideas
• Debugging code
• Understanding difficult concepts
• Exploring alternative approaches

Always validate AI-generated responses against official documentation and course materials. Prefer capable and up-to-date AI models, but remember that even advanced models can be incorrect or outdated—especially regarding newer features such as Next.js App Router and Server Actions.

• Claude (opens in a new tab)
• Grok (opens in a new tab)
• ChatGPT (opens in a new tab)

GitHub Copilot

GitHub Copilot is an AI-powered coding assistant that suggests code as you type. It is useful for:

• Learning syntax
• Reducing repetitive coding
• Discovering APIs and patterns

However, always ensure you understand the code it suggests. When Copilot provides a solution:

• Read it carefully
• Ask why it works
• Modify it to fit your use case

Specific Use Cases for AI Tools

1. Writing New Code

AI tools may assist you in writing code, provided you understand and can explain it.

Example prompt:

I am a student at SAIT in a 2-year software development diploma program. I am currently taking Web Development 2 and learning Next.js, React, Tailwind CSS, and Firebase. I am learning [current topic]. Help me write a [what you want] that [what it should do].

Follow-up:

I understand that the code does [your understanding]. Can you explain why [your uncertainty]?

2. Debugging

Before using AI, attempt to debug the issue yourself.

Example prompt:

I am a student at SAIT taking Web Development 2. I have encountered a bug in [context]. Here is the error message, expected behavior, and actual behavior. [State what kind of help you want.]

3. Concept Understanding

If a topic is confusing, ask for alternative explanations.

Example prompt:

I am trying to understand [topic]. I know [what you understand], but I don’t know why [what confuses you]. Can you explain this at my level?

4. Additional Examples

Use AI tools to generate additional practice examples on demand.

5. Translation

AI-powered translation tools can help if English is not your first language. However, remember that most programming resources use English terminology, which is important to become familiar with over time.

⚠️ Avoid relying completely on AI tools when learning new topics.
Write code by hand to build strong foundational understanding before using AI suggestions.

AI tools enhance learning—but they do not replace instructor guidance. Always reach out if you have questions or concerns.

Course Philosophy

1. Self-evaluation over traditional grading
   Reflection and growth are emphasized alongside formal evaluation.

2. Hands-on learning through real-world projects
   Learning by doing is central to this course.

3. Learning together
   Collaboration builds both technical and professional skills.

4. Leveraging AI-powered tools
   AI tools support understanding, debugging, and exploration.

5. Adapting to change
   Web technologies are constantly evolving. This course adapts to current industry trends, using React and Next.js due to their widespread adoption.

6. Instructor support
   You are not learning alone. Guidance and support are always available.

📚 Knowledge Check

Which of the following is NOT suggested as a use case for AI-assisted tools in this course?

• AI tools can assist in writing new code, provided the student understands it.
• AI tools can provide alternative explanations for difficult concepts.
• AI tools should be solely relied on when learning a new topic.
• AI tools can generate additional examples on demand.

✔️ Correct answer: AI tools should not be solely relied upon.