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 delve into intermediate JavaScript, explore the functionalities of React.js - a front-end JavaScript library, and learn to leverage the power of Next.js - a robust full-stack framework.

While the program includes a certain amount of theoretical content, it primarily focuses on practical, hands-on coding.

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

Success in this course hinges on your consistent engagement with weekly activities and timely completion of assignments.

With this course, you'll transition from merely building websites to crafting highly interactive full-stack web applications! I wish you the best of luck and am confident that you'll find the course both challenging and rewarding.

How to Succeed in this Course

1. Embrace Collaboration: Except for the exam, all work done in this course is public, encouraging open collaboration. Don't hesitate to ask for help or offer assistance to your peers.

2. Learn from Others: Since all code repositories are public, you have the unique opportunity to learn from your peers' work. Explore different approaches to the same problems, review code, and adopt practices that resonate with you.

3. Stay Engaged: Attend all classes and engage with the course materials. Attendance is not required, but it is highly recommended. Timely completion of assignments and a continuous engagement with the course material is key to understanding and success.

Remember, this course is not just about the final grade, it's about growing as a developer, learning to collaborate effectively, and continually improving your skills.

Getting Help

No matter how you learn, sometimes you'll hit a snag or a seemingly unsolvable bug. When that happens, remember that you have multiple resources available to help you!

During Class

• Classmates: Your classmates are a great resource. Remember that everyone is learning and someone might have a different perspective or have overcome the exact challenge you're facing. Be open to collaborating and helping each other out.

• Instructor: I'm here to guide you through your learning journey. During class, don't hesitate to ask questions, whether they're about the course content or broader concepts.

Outside of Class

• Classmates: Even outside of class hours, consider setting up study groups or chat sessions with your classmates. This not only helps clarify concepts, but it also builds a community of learners.

• AI Tools: AI tools like GitHub Copilot, chat-based AI tools, or AI-driven documentation tools can be great for troubleshooting code problems, understanding new concepts, or providing new perspectives.

• SAIT Tutor: If you're stuck on a concept or need additional help outside of class time, SAIT provides free tutoring services. Make sure to use this resource if you're feeling overwhelmed or need extra help understanding a concept.

Always remember, struggling is a normal part of the learning process, so don't be shy about reaching out for help.

AI Assisted Tools

As future web developers, it's essential to stay current with emerging technologies that can aid and streamline your development process. In this course, I encourage the use of AI assisted tools like Phind and GitHub Copilot.

Chat-based Tools

These chat-based AI tools can be extremely helpful in various stages of your learning journey. From brainstorming ideas to troubleshooting code, they can provide insightful assistance in understanding and applying the topics covered in the course.

However, it's important to remember that these AI models are tools to aid your development process, not replacements for your own critical thinking and creativity. While they can provide you with a spectrum of answers or solutions, it's crucial that you evaluate the appropriateness of those responses in the context of your specific project or problem.

Using these tools effectively involves leveraging their capabilities to enhance your learning and development processes, while also being critical and mindful of their limitations. Always ensure you understand the code and concepts you're working with, using AI tools as supplementary support rather than complete solutions. This approach will help strengthen your coding skills and enable you to write better, more effective code.

Where available, try to use the most advanced version of the AI model, currently gpt-4. The more advanced the model, the more accurate and relevant the responses will be.

• Phind (opens in a new tab)
• Poe (opens in a new tab)
• ChatGPT (opens in a new tab)

GitHub Copilot

GitHub Copilot is an AI-powered coding assistant. It can be a powerful tool to help you write code more efficiently. It suggests code snippets as you type, based on the patterns it learned from millions of open-source projects. It can be incredibly useful for learning syntax, discovering new methods, and reducing the time spent on repetitive tasks.

However, remember that it's important to understand the code you're writing. Don't rely solely on GitHub Copilot to write code for you. Instead, use it as a learning tool. When Copilot suggests a solution, take the time to understand how and why it works. This will strengthen your coding skills and enable you to write better code, with or without the assistance of AI tools.

Remember, these AI-assisted tools are meant to enhance your learning experience and not to replace the fundamental understanding and application of the knowledge you gain. Make the most of these tools but also be mindful and critical of their limitations.

Specific Use Cases for AI Tools

Here are some specific use cases where AI-assisted tools can be used effectively for learning in this course:

1. Writing new code: When creating new code, you can use tools like GitHub Copilot to assist you, but it's crucial to ensure you understand the code it generates. If you don't, use the AI tool to help explain it. A good prompt could be:

I am a student at SAIT, a Canadian post-secondary school in Calgary, and enrolled in a 2-year software development diploma program. Currently, I am taking a Web Application Development course in my 3rd semester learning Next.js, React, Tailwind CSS, and Firebase. According to the schedule, I am learning [current topic]. Help me write a [what do you want?, e.g. React function] that [what should it do?, e.g. display a search style textbox with placeholder text 'search...'].

And then a good follow-up prompt could be:

I understand that the code you suggested is [explain what you understand]. Can you explain why [explain what you don't understand]?

Or:

The code you gave me doesn't work because [explain why it doesn't work]. Can you help me fix it?

In addition, when GitHub Copilot suggests multiple solutions, try to understand the differences between them and select the most appropriate one for your project.

2. Debugging: When you encounter a bug, first attempt to resolve it yourself. Give yourself a few minutes to analyze and understand the issue. If that doesn't work, you can share your code block with an AI tool. A good prompt could be:

I am a student at SAIT, a Canadian post-secondary school in Calgary, and enrolled in a 2-year software development diploma program. Currently, I am taking a Web Application Development course in my 3rd semester learning Next.js, React, Tailwind CSS, and Firebase. I have encountered a bug [where?, provide context about where you have the bug, e.g. in a React function]. [Provide lots more context: include the error message, what the expected behaviour is, what the buggy behaviour is, possibly include the assignment description.] [Now what do you want? e.g. Give me a hint where the bug may be, tell me what the bug is but don't solve it, or solve the bug and explain why the bug exists.]

3. Concept understanding: If a particular concept seems difficult, don't hesitate to ask the AI tool for alternative explanations. A useful prompt could be:

I am a student at SAIT, a Canadian post-secondary school in Calgary, and enrolled in a 2-year software development diploma program. Currently, I am taking a Web Application Development course in my 3rd semester learning Next.js, React, Tailwind CSS, and Firebase. I am currently trying to understand [topic, e.g. useState]. I know that [explain what you think you know], but I'm don't know why [explain your uncertainty]. [What do you want? e.g. help me understand this better at my level, give me an example that I would understand, or give me a link to a resource that explains this better.]

4. Additional examples: AI tools can provide numerous examples on demand. If you want more practice or exposure to a specific concept, simply ask the AI tool for more examples. A good prompt could be:

I am a student at SAIT, a Canadian post-secondary school in Calgary, and enrolled in a 2-year software development diploma program. Currently, I am taking a Web Application Development course in my 3rd semester learning Next.js, React, Tailwind CSS, and Firebase. I would like to see two examples on [topic, e.g. JavaScript promises].

5. Translation: If English is not your first language, AI-powered translation tools can be invaluable for translating code and documentation. This can help you understand the material more effectively and efficiently. Remember, however, that coding globally is primarily conducted in English. Over time, becoming comfortable with English coding terminology will enhance your ability to participate fully in the global coding community.

I encourage you to utilize AI tools throughout this course. They can be a great aid for learning, debugging, and gaining new insights. However, remember that they might not always be up-to-date with the latest developments, such as the App Router for Next.js.

Despite the assistance AI tools provide, they do not replace the support and guidance of your instructor. Always feel free to reach out with any questions or concerns.

Course Philosophy

I would like to share the guiding principles that form the foundation of this course:

1. Self-evaluation over traditional grading: In this course, I place emphasis on your understanding and growth over traditional grading. You're encouraged to engage in self-evaluation and reflection, making learning a deeply personal and engaging process.

2. Hands-on learning through real-world projects: I firmly believe that the best way to grasp a concept is by doing. You will have the opportunity to work on real-world projects, enhancing your understanding and applying the skills you learn in a practical context.

3. Learning together: Collaboration is key to success in the world of web development. By working together on the group project and assignments, you not only learn from your peers but also develop essential soft skills such as teamwork and communication.

4. Leveraging AI-powered tools: Embracing the potential of AI, I encourage the use of AI-powered tools like chat-based assistants to support your learning journey. These tools can help with code explanation, debugging, and even provide alternative ways of understanding complex concepts.

5. Adapting to change: Web technologies are ever-evolving (opens in a new tab), and so is this course! I am committed to staying relevant and incorporating the most up-to-date content and technologies in our curriculum. The selection of technologies in this course was guided by relevance and industry trends. React.js, as one of the most widely adopted libraries for building user interfaces, is a natural choice given its prevalence in the industry. Next.js complements this by being the most recommended full-stack framework for React as it simplifies project setup. To ensure a smooth transition into React, we first focus on intermediate JavaScript skills, building a strong foundational knowledge.

6. Instructor support: Though there is a significant focus on self-guided learning and exploration, remember that you're not alone. I am here to support, guide, and assist you throughout this journey. Let's learn, grow, and code together!

📚 Knowledge Check