Balancing project-based learning with engaging activities, students utilize their acquired knowledge to build useful tools and responsive websites.
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.
Grade Band: Grades 6-8
Format: Year-long (60 hrs)
Prerequisites: None
Video-Based Lessons
Earns Certifications
Capstone Project
Self-Grading Quizzes
Project Portfolio
HTML
CSS
JavaScript
Web Design
Intrface Design
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
Students begin by learning the fundamentals of visual design. Students will learn how to create layouts for the web by gaining an understanding of the user experience and user interface, then they’ll utilize browser-based interface design software to build wireframes and mockups. Students also learn the basics of the design workflow and accompanying principles which culminate in a unit project where they will build a complete wireframe and high-fidelity mockup.
Students transition to developing their web development skills gaining an understanding of the internet, HTML, and CSS. With no prior knowledge necessary, students will begin with the basics of HTML and then incorporate styling basics through fundamental CSS concepts. The unit project will consist of a static website built using HTML and CSS.
Students will pivot to learning JavaScript so they can understand how to incorporate interactivity into their web development process. Students will get an introduction to programming, data types, variables, conditional logic, functions, and interacting with the HTML DOM. This unit will also cover HTML form elements, and will culminate in the creation of an interactive color picker application.
Students continue their learning of design concepts by developing an understanding of visual hierarchy and accessibility before applying those concepts with responsive development using flex box, grid layouts, and media queries. This unit wraps up with practical applications as they build responsive tools and projects, culminating in their own original final project.
STEAM connections embedded in this course reinforce relevant science and math concepts to provide a well-rounded educational experience.
Students learn about interdependent relationships in various ecosystems, and are given the opportunity to analyze cause and effect relationships between natural and human designed systems.
Students will analyze the effect technology has on everyday activities and career opportunities made possible by such technology, as well as issues of bias and accessibility in design, and how to seek feedback to refine a design solution.
Students will create designs and develop applications by identifying and applying human factors, they’ll evaluate strengths and weaknesses of various design solutions, and understand how to defend decisions related to design problems.
Students will generate and conceptualize user oriented design solutions by applying an understanding of artistic principles.
Students learn how to utilize ratio concepts, quantitative relationships, and gain an understanding of the Fibonnaci sequence to create responsive designs.
Hands-On Learning
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.
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.
Using HTML, CSS, and JavaScript, students will create a color picker application that can generate RGBA values and hexadecimal color code.
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.
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.
RAM: 4GB or more
CPU: Pentium 5 or later
Chromebook: Chrome OS 100.0 or later
Windows: 7, 8, 8.1, 10 or later
Mac: OS X El Capitan 10.11 or later
Linux: 64-bit Ubuntu 18.04+, Debian 10+, openSUSE 15.2+, or Fedora Linux 32+
Google Chrome
13" or bigger display
Full keyboard
Three-button mouse with scroll wheel
Headphone jack and headphones
Schedule a demo today with one of our education specialists to find out how Mastery Coding can help you meet students where they are.