This unit teaches responsive layout techniques, semantic HTML structure, and foundational JavaScript DOM interaction to create accessible, adaptive front‑end interfaces. Students will practice positioning, Flexbox and Grid, media responsiveness, form and media accessibility, and code validation as they prepare to build complete web projects.
Learning Objectives
- Analyze page requirements and implement appropriate CSS positioning, Flexbox, and Grid rules to construct adaptive layouts that meet specified design constraints.
- Apply responsive design techniques—including media queries, viewport and relative units, flexible images, and CSS calculations—to ensure pages render correctly across multiple screen sizes.
- Demonstrate use of semantic HTML, form controls, accessibility attributes, and JavaScript fundamentals (functions, loops, DOM traversal, event handling, and Web Storage) to create interactive, stateful page behaviors.
- Evaluate and improve web pages by validating HTML/CSS, testing accessibility of text and media, and resolving specificity/conflict issues to enhance maintainability and conformance to best practices.
Curriculum
- 1 Section
- 45 Lessons
- 30 hours
Expand all sectionsCollapse all sections
- Unit 3 — Responsive Layouts and Interaction45
- 1.1Positioning Elements20 mins
- 1.2Setting Up and Configuring Flex Containers20 mins
- 1.3Specifying the Grid Rows and Columns20 mins
- 1.4Querying Your Way to Responsiveness: Adaptive Layouts20 mins
- 1.5Adding Structure with HTML20 mins
- 1.6What Else Do You Need?20 mins
- 1.7Finding Your Way around Your New Web Home20 mins
- 1.8Validating Your HTML Code20 mins
- 1.9Inserting Special Characters20 mins
- 1.10Table Refinishing: Styling Your Tables20 mins
- 1.11Making Text Accessible20 mins
- 1.12Putting a Border on It20 mins
- 1.13Selecting Descendants, Children, and Siblings20 mins
- 1.14Popping the Hood: How Styles Get Applied20 mins
- 1.15Here’s Looking at View(port Measurement Units)20 mins
- 1.16Impressing Your Friends with Color Gradients20 mins
- 1.17More Typographical Trickery20 mins
- 1.18What You Can Do with JavaScript20 mins
- 1.19JavaScript Reserved Words20 mins
- 1.20Building Comparison Expressions20 mins
- 1.21Understanding Code Looping20 mins
- 1.22Calling a Function20 mins
- 1.23Traversing the DOM20 mins
- 1.24How Do I Iterate Thee? Let Me Count the Ways20 mins
- 1.25Getting Data from Web Storage20 mins
- 1.26Pausing Your Code20 mins
- 1.27Coding Checkboxes20 mins
- 1.28Stacking Elements20 mins
- 1.29Taking Control of Flex Items20 mins
- 1.30Taking Control: Assigning Grid Items20 mins
- 1.31Working with Images Responsively20 mins
- 1.32Adding Style with CSS20 mins
- 1.33Using the WebDev Workbench20 mins
- 1.34Validating Your CSS Code20 mins
- 1.35A Few More HTML Text Tags to Know20 mins
- 1.36Making Media Accessible20 mins
- 1.37Manipulating Element Margins20 mins
- 1.38Selecting Elements by Attribute20 mins
- 1.39Calculating with CSS20 mins
- 1.40Setting Border Colors20 mins
- 1.41Giving Your Links a Makeover20 mins
- 1.42What You Can’t Do with JavaScript20 mins
- 1.43JavaScript and HTML Keywords20 mins
- 1.44Building Logical Expressions20 mins
- 1.45Using while Loops20 mins
Instructor
Free
Leave a Reply