Nivaro AI Website Program - Course Overview

Welcome to the detailed overview of Nivaro's AI Website Program. This course is meticulously crafted to guide middle school students through the fascinating world of web development, culminating in the integration of AI technologies. Let's dive into the journey that awaits!

Course Timeline

Unit 1: Introduction to Programming

  • Lesson 1.1 - Scratch Game:

    • Learn programming fundamentals by creating a Scratch game.
    • Focus on basic loops, variables, and if-statements.
    • Complete a guided tutorial to create your first game.

  • Lesson 1.2 - VS Code Install:

    • Install and explore Microsoft Visual Studio Code.
    • Get familiar with its features and interface.

Unit 2: Web Basics

  • Lesson 2.1 - Introduction to the Web:

    • Understand the significance of the web and how browsers interact with websites.
    • Explore the journey of a URL.

  • Lesson 2.2 - Anatomy of a Website:

    • Learn about the main sections of a webpage: headers, footers, and main content.
    • Delve into different file types (HTML, CSS, JS) and their roles in web development.
    • Introduction to web hosting and domain names.

Unit 3: Deep Dive into Web Technologies

  • Lesson 3.1 - Diving into HTML:

    • Understand HTML elements, attributes, and tags.
    • Practice structuring content with headings, paragraphs, and links.

  • Lesson 3.2 - Styling with CSS:

    • Discover the power of CSS selectors, properties, and values.
    • Learn to transform website visuals: text, backgrounds, and layouts.

  • Lesson 3.3 - JavaScript and Dynamic Content:

    • Introduction to JavaScript and its role in web development.
    • Create basic interactivity through buttons, alerts, and forms.

Unit 4: Advanced Web Development

  • Lesson 4.1 - Introduction to React.js:

    • Embrace the component-based architecture of React.js.
    • Learn to create and implement React components.

  • Lesson 4.2 - Tailwind CSS:

    • Explore the utility-first CSS philosophy of Tailwind CSS.
    • Craft responsive and adaptive designs.

Unit 5: AI in Web Development

  • Lesson 5.1 - AI’s Role in Modern Web:

    • Discover the potential and promise of AI in web applications.
    • Understand the basics of chatbots, their functionality, and integration.

  • Lesson 5.2 - Perfecting Chatbot Interactions:

    • Master the art of designing chatbot prompts.
    • Learn to handle and optimize chatbot responses.

Unit 6: Designing with Figma

  • Lesson 6.1 - Introduction to Figma:

    • Basic navigation and tool usage in Figma.
    • Explore templates and plugins available in Figma.

  • Lesson 6.2 - Advanced Design Principles:

    • Understand the basics of web and UI design.
    • Engage in crafting detailed website layouts using Figma.

Unit 7: Figma and CSS Integration

  • Lesson 7.1 - Integrating Figma Designs with Tailwind CSS:

    • Learn to translate Figma visuals to utility-based CSS.
    • Transition from design concepts to live components.

  • Lesson 7.2 - Making Your Design “Talk”:

    • Strategies for adding interactivity to designs.
    • Implement advanced chatbot functionalities and seamless integration.

Unit 8: Feedback and Iteration

  • Lesson 8.1 - User Feedback and Iteration:

    • Introduction to user-centered design.
    • Conduct user interviews and analyze feedback.

  • Lesson 8.2 - Implementing Advanced Features:

    • Enhance your website based on user feedback.
    • Add more functionality into the chatbot and custom features.

End Goals

  • Create a basic Scratch game.
  • Design a comprehensive and professional-looking website layout using Figma.
  • Develop a foundational understanding of web structures.
  • Seamlessly transition Figma designs into interactive websites using React.js.
  • Construct and style an interactive webpage using HTML, CSS, and JavaScript.
  • Develop a dynamic website using React.js and style it with Tailwind CSS.
  • Create a barebones webpage with a functional AI chatbot.

Was this page helpful?

GPT-TURBO
Nivaro Chatbot