In this lesson, students will learn about the fundamentals of web design, and consider the ways that they already interact with web sites in their daily lives.
Students will be able to:
In this lesson, students will explore what the internet is and how it can be used for socially beneficial activities, as well as how the internet can be used in potentially harmful ways. Students will examine how computers are connected with local and global networks to create a very large web of networks we know as “the internet”.
Students will be able to:
In this lesson, students learn what a URL is, and what is happening when they visit a URL.
Students will be able to:
In this lesson, students will explore the program that allows them to use the internet at all – the browser. They will explore what a browser is capable of doing, and compare several different browser programs.
Students will be able to:
In this lesson, students will learn about the the rise of e-commerce and the different types that exist.
Students will be able to:
In this lesson, students complete a summative assessment of the unit’s learning objectives.
Students will be able to:
In this lesson, students will be introduced to HTML: the language for building web pages. Students will discover why HTML is important and how it works in order to start building their own web pages.
Students will be able to:
In this lesson student upgrade from simple tags to full HTML documents. Students learn some new tags that let them put information in different places on the web page, and they learn about the nested tree structure of an HTML document.
Students will be able to:
In this lesson, students learn about formatting tags that let them modify the appearance of text and make their web pages look clear and aesthetically pleasing.
Students will be able to:
In this lesson, students learn how to add hyperlinks to their web pages using the <a> tag.
Students will be able to:
In this lesson, students learn how to add images to their own web pages using the <img> tag!
Students will be able to:
In this lesson, students will learn what copyright laws are and how to avoid copyright infringement. They will explore why copyright laws are important and how they protect the creators. They will practice finding and citing online images.
Students will be able to:
In this lesson, students learn how to add lists to their web pages and practice making different kinds of lists.
Students will be able to:
In this lesson, students learn how to create and add tables to their web pages!
Students will be able to:
In this lesson, students will use HTML styling to make their pages visually appealing and unique.
Students will be able to:
In this lesson, students will dissect how colors are represented on a webpage. They will learn about how red, green, and blue are mixed to create colors, and how the levels of red, green, and blue are specified using RGB values and hex values.
Students will be able to:
This lesson is a summative assessment of the unit’s learning objectives.
In this lesson, students will begin using CSS to add styling to their HTML pages.
Students will be able to:
In this lesson, students will learn CSS superpowers! CSS tag selectors can be used to select all elements of the same kind (<table>, or <h1> for example) and give them all the same style.
Students will be able to:
In this lesson, students will learn how to use CSS class selectors to apply CSS styling to all HTML elements that share a specified class. This allows for more specific styling.
Students will be able to:
Using CSS to select an element by ID helps to select a single element to format on a webpage. This is helpful when there is a need to be very specific in applying the CSS rules for the webpage.
Students will be able to:
In this lesson, students will learn how CSS rules are applied when more than one rule applies to an element.
Students will be able to:
In this lesson, students will learn why multi-file websites are important and how they can create them.
Students will be able to:
In this lesson, students complete a summative assessment of the unit’s learning objectives.
Students will be able to:
In this lesson, students will preview some of the advanced HTML/CSS features they will be learning how to use in this module!
Students will be able to:
In this lesson, students will learn why multi-file websites are important and how they can create them.
Students will be able to:
In this lesson, students will learn how to embed content from other websites into their own websites using IFrames.
Students will be able to:
In this lesson, students will learn how to use divs to group and style multiple elements.
Students will be able to:
In this lesson, students will learn how to use spans to group and style multiple elements of inline text.
Students will be able to:
<span> tag to style multiple elements of inline textIn this lesson, students learn about HTML5 semantic tags and create web pages that leverage these tags to enhance the structure of their HTML documents.
Students will be able to:
In this lesson, students learn how to add audio and video to their webpages using the audio and video html tags.
Students will be able to:
In this lesson, students wlll learn how to combine CSS selectors so they can style multiple selectors and combinations, or specific parent/child selectors.
Students will be able to:
In this lesson, students will learn the Don’t Repeat Yourself (DRY) principle.
Students will be able to:
In this lesson, students will learn about special selectors such as :hover and :focus, and how these selectors can be used to style elements as the user interacts with them on the page.
Students will be able to:
In this lesson, students will learn how to use the visibility property to make elements visible or invisible on their page.
Students will be able to:
In this lesson, students will learn how they can use documentation as a resource to learn more about HTML and CSS features.
Students will be able to:
In this lesson, students will learn how to use the inspector tool to explore and modify code inline.
Students will be able to:
In this lesson, students will learn what the box model is and how they can use it to add a border around elements and to define space between elements.
Students will be able to:
In this lesson, students will learn how to include images in their programs and manipulate their pixels using WebImage. Students will learn how image filters manipulate stored pixel data.
Students will be able to:
In this lesson, students will learn how to add simple animations to their websites.
Students will be able to:
In this lesson, students will combine special selectors like :hover with animations to create sites that respond to the user’s actions.
Students will be able to:
In this lesson, students learn about information architecture and site maps and how they contribute to the navigation and structure of websites.
Students will be able to:
In this lesson, students complete a summative assessment of the unit’s learning objectives.
Students will be able to:
In this lesson, students will learn about various software development life cycle models and what tools can be used at different stages of the process.
Students will be able to:
This project is meant to be a challenge that touches multiple concepts from the course to produce a digital artifact. In this Practice PT, students will be developing their first digital artifact: their very own website! This website will start off as their own personal homepage, and as students progress through the course, they will keep adding links to their favorite projects. By the end of the course this homepage will serve as their own personal portfolio website showcasing their work!
Students will create their own website from scratch, hosted at their own custom domain.
In this lesson, students will learn how to print messages out onto the console using the Javascript command println.
Students will be able to:
start functionIn this lesson, students learn how to assign values to variables, manipulate those variable values, and use them in program statements. This is the introductory lesson into how data can be stored in variables.
Students will be able to…
In this lesson, students learn how they can allow users to input information into their programs, and use that input accordingly.
Students will be able to…
In this lesson, students learn about the different mathematical operators they can use to perform mathematical computations and create useful programs that compute information for the user.
Students will be able to…
In this lesson, students will learn more about boolean values. Booleans refer to a value that is either true or false, and are used to test whether a specific condition is true or false.
Students will be able to…
In this lesson, students will learn about logical operators. Logical operators allow students to connect or modify Boolean expressions. Three logical operators are the !, ||, && characters.
Students will be able to…
In this lesson, students learn how to use comparison operators. Comparison operators let students compare two values.
Students will be able to…
In this lesson, students learn about if statements as a way to make decisions and execute specific code depending on the validity of a condition.
Students will be able to…
In this lesson, students will learn in greater detail about for loops. For loops in Javascript are written and executed in the same manner as Karel exercises, except now students will explore modifying the initialization statement, test statement, and increment statements of the loops.
Students will be able to…
i inside the for loop code to do something different on each iterationIn this lesson, students learn about functions and parameters in the context of JavaScript, which builds on their prior knowledge of working with functions in Karel. This lesson focuses specifically on defining and calling functions, and passing simple, single parameters to functions.
Students will be able to…
In this lesson, students will work with, define and call their own functions that take in multiple parameters as input and print out output.
Students will be able to:
In this lesson, students learn about return values so they can write functions that do some work and send the result back or use later in the program.
Students will be able to:
In this lesson, students learn about lists/arrays and how to access an element in an array with an index so they can create ordered collections of items and use them in their programs.
Students will be able to:
In this lesson, students continue to work with array indexing to get and assign array values so they can incorporate arrays/lists into their programs and handle data more efficiently.
Students will be able to:
In this lesson, students learn how to add and remove elements at the end of an array using the push and pop methods.
Students will be able to:
push methodpop methodIn this lesson, students will be able to get the length of an array and learn how to loop through an array so they can have more functionality with arrays in their programs.
Students will be able to:
In this lesson, students learn how to incorporate JavaScript into their HTML pages using the script tag.
Students will be able to:
In this lesson, students learn how to modify HTML tags on a webpage using the DOM. The DOM, or Document Object Model, translates HTML files into accessible objects that can be manipulated or added to a webpage.
Students will be able to:
document.getElementByIddocument.getElemenyByTagNameIn this lesson, students will learn how to create elements using the Document Object Model.
Students will be able to:
document.createElementIn this lesson, students learn how to style elements in HTML using JavaScript and the Document Object Model.
Students will be able to:
setAttribute appropriately to style elements in JavaScriptIn this lesson, students learn how to use functions to make their webpages more dynamic.
Students will be able to:
In this lesson, students learn how to use the keyword this to pass elements as parameters in their click events.
Students will be able to:
thisthis is used with onclick and with eventListenersIn this lesson, students will implement the skills they’ve learned from the previous lessons to create a working, clickable keyboard.
Students will be able to:
In this lesson, students learn about another event listener - keyboard interactions. Students learn how to listen for a keyboard press, and how to access information about each keyboard stroke.
Students will be able to:
keydown and keyup events to read keyboard informationkey.code and key.key, and when it’s appropriate to use eachIn this lesson, students learn how to animate web page elements using timers.
Students will be able to:
In this lesson, students learn how to use the position style in CSS to improve animations.
Students will be able to:
position attributesposition to animate elementsIn this lesson, students test their knowledge of concepts from this module with a unit quiz.
Students will be able to:
In this lesson, students learn how libraries can be used to make JavaScript easier to read and write, and how they can incorporate them in their own projects.
Students will be able to:
In this lesson, students learn how to iterate through selected jQuery elements using the .each function.
Students will be able to:
each function to iterate through selected jQuery elements and appropriately use the each function parameters.each should and should not be used for any given jQuery selection.In this lesson, students learn how to animate elements using jQuery.
Students will be able to:
In this lesson, students learn how callback functions are used in programming to execute code segments after a particular action has been completed. Students learn how programs can execute synchronously and asynchronously, and how to use callback functions to control program execution flow.
Students will be able to:
In this lesson, students learn how to better organize their HTML files by separating their scripts into a separate js file.
Students will be able to:
js files with the correct syntaxjs files in the correct order, and explain why the order of script loading impacts usability and performanceIn this lesson, students will learn how to use Chart.js to create and customize data charts, exploring the basics of data visualization and applying these skills to real-world examples.
Students will be able to:
In this lesson, students test their knowledge of concepts from this module with a unit quiz.
Students will be able to:
In this lesson, students learn how to write a resume. Students will use this skill to develop an interactive resume on a website.
Students will be able to:
In this lesson, students learn about website layouts, and how to construct a website so that it is aesthetically pleasing. Students will use these concepts to evaluate the quality of formatted resumes.
Students will be able to:
In this lesson, students will draft their interactive resume and make changes based on constructive feedback.
Students will be able to:
In this lesson, students learn about the pros and cons of data collection and the different ways that data can be stored.
Students will be able to:
In this lesson, students learn how to store data using localStorage.
Students will be able to:
localStorage and setItemlocalStorage and getItemIn this lesson, students learn how to store objects and data structures in local storage using JSON.
Students will be able to:
JSON.stringifyJSON.parseIn this lesson, students will learn how to store data using objects.
Students will be able to:
In this lesson, students learn how to use forms to collect data from users.
Students will be able to:
form tagforminput tags to request data from usersIn this lesson, students will implement the skills they’ve learned from the previous lessons to create an online survey.
Students will be able to:
In this lesson, students learn how to store and retrieve data using Firebase. Firebase is a cloud data storage system that enables programmers to save and retrieve data using only JavaScript.
Students will be able to:
In this lesson, students learn how to navigate through data nodes in Firebase using ref().
Students will be able to:
ref() to navigate data nodesIn this lesson, students will implement the skills they’ve learned from the previous lessons to create a program that tracks the number of times elements are clicked.
Students will be able to:
Date object classIn this lesson, students learn how to iterate through objects using the for/in loop.
Students will be able to:
In this lesson, students learn how to request API data from a URL, and how to access that data using getJSON.
Students will be able to:
getJSONIn this lesson, students will learn about web development stacks and create basic server-side programs.
Students will be able to:
In this lesson, students test their knowledge of concepts from this module with a unit quiz.
Students will be able to:
In this lesson, students are introduced to a data collection project that will require them to create a website that collects user data.
Students will be able to:
In this lesson, students learn about user personas and how they are used by companies to make predictions about user interactions.
Students will be able to:
In this lesson, students will draft and complete their data collection websites.
Students will be able to:
In this lesson, students will collect data on their project websites from users, and provide feedback to classmates on the quality of their data collection process.
Students will be able to:
In this lesson, students learn about the different types of data that they can collect from users, and how they can use that to make informed decisions about their website.
Students will be able to:
In this lesson, students will write up a report about their data collection findings.
Students will be able to:
In this lesson, students will be introduced to Bootstrap, including who uses Bootstrap and why people would want to use Bootstrap.
Students will be able to:
In this lesson, students will learn how to add Bootstrap to a webpage and create the basic structure using Bootstrap’s container classes.
Students will be able to:
container to gather the pieces of the sitecontainer and container-fluidIn this lesson, students will learn how to use Bootstrap’s grid system to create the layout of their webpages.
Students will be able to:
In this lesson, students are introduced to page headers, buttons, and icons. They will use different typographies to style the header and sub-header of their webpages. They will use and style buttons to increase interactivity on their webpage.
Students will be able to:
In this lesson, students will learn how easy it is to create beautiful and interactive tables using Bootstrap classes. Students will create galleries of images and links using Bootstrap’s thumbnail class.
Students will be able to:
In this lesson, students will learn how to add a navbar (navigation bar) to their websites.
Students will be able to:
In this lesson, students will learn how to make dropdown menus. They will apply dropdown menus to navbars as well as a way of choosing an option elsewhere on the page.
Students will be able to:
In this lesson, students will explore the official Bootstrap templates. They will modify an existing webpage to create their own webpage.
Students will be able to:
In this lesson, students will use everything they have learned so far to complete a few web design challenges.
Students will be able to:
In this lesson, students complete a summative assessment of the unit’s learning objectives.
Students will be able to:
In this lesson, students will learn how to choose a meaningful and appropriate domain name for their website.
Students will be able to:
In this lesson, students will learn the different steps needed to host a website, either online or using a home computer.
Students will be able to:
In this lesson, students will learn about web CMS providers, the different benefits each offer, and how to choose the best fit for their website.
Students will be able to:
In this lesson, students will learn what web optimization and web conversion rate are why they are important and useful.
Students will be able to:
In this lesson, students will learn how to optimize a web site, understand how a search engine works, and use their understanding of F-pattern reading, SEO, and the Yoast tool to further optimize a site.
Students will be able to:
In this lesson, students will look at what it means to make a website accessible for different users with different needs.
Students will be able to:
In this lesson, students will learn about connection and content web security. They’ll also practice basic web security techniques to prevent cross-site scripting.
Students will be able to:
In this lesson, students will learn about The CIA Triad. The CIA Triad is a widely-accepted security measure that should be guaranteed in every secure system. It stands for Confidentiality, Integrity, and Availability.
Students will be able to:
In this lesson, students test their knowledge of concepts from this module with a unit quiz.
Students will be able to:
In this lesson, students will be introduced to the final project, form groups, and create or select the client persona they will assume.
Students will be able to:
In this lesson, students will explore the fundamentals of project management, understand the role of a project manager, and apply project management strategies to their web design projects. Through hands-on activities, students will define project objectives, assign team roles, conduct competitor analysis, create site maps and wireframes, and gather client feedback. This lesson will equip students with essential skills in collaboration, organization, and communication—crucial components of professional web development.
Students will be able to:
In this lesson, students will bring their web design projects to life by coding their websites using HTML, CSS, and JavaScript. They will collaborate in real-time, test their functionality, gather feedback from peers acting as clients, and make revisions to finalize a polished, user-friendly website.
Students will be able to:
In this final lesson, students will showcase their completed websites and reflect on their web development journey. They will create and deliver a presentation that highlights their design decisions, the development process, and the improvements made based on client feedback. This activity reinforces project-based learning skills such as documentation, communication, and self-reflection.
Students will be able to:
