HTML
CSS
JavaScript

Web Development Foundations

6-8th Grade

Balancing project-based learning with engaging activities, students utilize their acquired knowledge to build useful tools and responsive websites.

Web Development Foundations course illustration

Teach Students Programming and Design using Project-Based Lessons

This course teaches students the basics of web design and web development. This course will dive into the following topics: basic art principles, user experience and interface design, responsive layouts, accessibility, HTML, CSS, and JavaScript. At the end of this course, students will be able to build responsive websites and web-based tools that are designed with a target audience and accessibility needs in mind.

Students will

  • Design and develop a collection of projects.
  • Gain an understanding of design principles and accessibility
  • Gain a high competence in HTML and CSS.
  • Gain an understanding of JavaScript centered around web development.
  • Become highly proficient in creating responsive web projects

About

Grade Band: Grades 6-8

Format: Year-long (60 hrs)

Prerequisites: None

Features

Video camera icon

Video-Based Lessons

Badge icon signifying certifications

Earns Certifications

Star icon

Capstone Project

Assignment or quiz icon

Self-Grading Quizzes

Briefcase icon indicating portfolio

Project Portfolio

Topics

HTML

CSS

JavaScript

Web Design

Intrface Design

Certifications

Upon completing this course, students will be prepared to earn the following industry-recognized certification(s):

ICT Web Design Essentials

Certiport IT Specialist - HTML and CSS Certification

KnowledgePillars HTML & CSS Coding Specialist

Course Breakdown

Unit 1:

Designing for the Internet

Unit 2:

Web Development Basics

Unit 3:

JavaScript Basics & HTML Forms

Unit 4:

Design/Develop Responsive Websites

STEAM Connections

STEAM connections embedded in this course reinforce relevant science and math concepts to provide a well-rounded educational experience.

Green Erlenmeyer flask

Science

yellow laptop

Technology

three pink gears

Engineering

purple paint board

Art

math symbols with a blue square

Math

Hands-On Learning

Couse Projects

Through a combination of follow-along projects and self-directed activities, students build a unique coding project portfolio demonstrating the skills and knowledge they acquire.

Web Design Wireframes

Web Design Wireframes

Students create a mood board and a collection of both block and high-fidelity wireframes utilizing their understanding of UI and UX design, the web design workflow, and visual hierarchy.

Mock Business Website

Students build a functional one-page layout for a mock business using their knowledge of UI and UX design and their HTML, CSS and JavaScript skills.

Color Picker

Using HTML, CSS, and JavaScript, students will create a color picker application that can generate RGBA values and hexadecimal color code.

Green Team Website

Students create a responsive static website using HTML and CSS from scratch, exercising their understanding of semantic and non-semantic HTML elements, typography, and positioning.

Web Design Wireframes

Students create a mood board and a collection of both block and high-fidelity wireframes utilizing their understanding of UI and UX design, the web design workflow, and visual hierarchy.

Technical Requirements

Hardware

Operating System

Software Installed

Peripherals

Ready to learn more about what we offer?

Schedule a demo today with one of our education specialists to find out how Mastery Coding can help you meet students where they are.