This course will teach students the fundamentals of the Internet and Websites through a hands-on learning-driven approach.
This is a year-long course where students will be able to show off a NextJS website made completely from scratch, that can be found and viewed on the actual internet.
This course is suitable for students aged 12+ years in middle school at least.
Software/Tools we will learn:
○ HTML5, and ○ CSS3 (with Tailwind CSS) ○ Built on a NextJS project ○ Designed with Figma graphic design software ○ And optionally using Typescript (A strongly typed superset of JavaScript) and React ○ Using Git as a version control software and GitHub as an online remote These are the tools for a versatile, future proof framework for web development that is the standard for interactive and fast web apps. They are also what I personally use in order to design, create and ship websites for my projects and clients.
Prerequisite/Corequisites
Students must be in 7th grade or above and show enthusiasm to learn about the subject. Course
Requirements/Materials
Internet connection - Make sure your device can access the WCPSS Guest network.
Participants MUST HAVE either a WINDOWS or MAC laptop! No Chromebooks as the software will not work!
Administrator access to the device (we will walk through software installation and setup in class), or Microsoft VSCode Node Package Manager, and Github CLI preinstalled.
Provided materials not listed
Important Note: This syllabus, along with course assignments and due dates, is subject to change. It is the student’s responsibility to refer to corrections or updates to the syllabus. Any changes will be clearly noted in course announcements.
Student Learning Outcomes & Objectives Student Learning Outcomes Student learning outcomes (SLOs) are the specific knowledge, skills, abilities, or attitudes that students are expected to attain by the end of a learning experience or program of study. ● Proficiency with the basic tools for programmatic website design and development ○ Using Figma to design a wireframe a graphic mockup for a website ○ Understanding HyperText Markup Language (HTML5) elements with the box model and writing HTML to reproduce a Figma design. ○ Understanding how Cascading Style Sheets (CSS3) affect what is displayed on a website, and being able to use Tailwind CSS to style HTML elements ○ The ability to debug errors in code with ease ● Proficiency in demonstrating knowledge of theory: ○ How APIs work, the basic API request types, and how a website is served through all the steps (DNS forwarding, downloading) ○ Understanding of all the frameworks and tools outlined above ● Optional - Understanding of Object Oriented Programming with Typescript ○ Be able to utilize TypeScript, a superset of Javascript to create complex interactive elements in a website. Course Project Objectives ● A complete and functioning website accessible through the internet, as any other website would be. The content on this website will be of the student’s choice.You will meet the goals listed above through a combination of the following activities in this course: - Attend at least 80 percent of classes, and actively work to make up any missed material. - Bring the required resources to each class. - Be ready to learn in class; no extraneous distracting materials such as toys, please - Active participation in each guided and independent project and activity - Asking the teacher any relevant questions Parents, please make sure students follow these guidelines and especially emphasize the component of asking questions; I found the success of an individual student is highly tied to how much they ask about!
