This unit introduces the core building blocks of front-end web development: HTML, CSS, and JavaScript, along with essential tooling, hosting, cross-browser testing, and accessibility practices. Students will build and test locally hosted, semantically structured pages with images, links, tables, forms, and basic interactivity while preparing for more advanced layout, scripting, and deployment topics in later units.
Learning Objectives
- Analyze the distinct roles of HTML, CSS, and JavaScript in web pages and differentiate common browser behaviors and hosting considerations to inform development and testing workflows
- Apply semantic HTML tags, accessibility attributes, and media elements to create well-structured pages that include images, links, tables, and forms and organize files in a local project folder
- Demonstrate CSS fundamentals and layout techniques—including the box model, units, colors, text styling, Flexbox, Grid, and responsive design—and perform cross-browser testing and validation to ensure consistent presentation
- Evaluate core JavaScript concepts (variables, expressions, control flow, functions, objects, arrays, strings, error types, and web storage) and implement simple DOM/HTMLFormElement interactions and client-side validation
Curriculum
- 1 Section
- 45 Lessons
- 30 hours
Expand all sectionsCollapse all sections
- Unit 1 — Foundations of Front-End Web Development45
- 1.1What Do HTML, CSS, and JavaScript Do, Exactly?20 mins
- 1.2Setting Up Your Test Browsers20 mins
- 1.3Understanding Web Hosting Providers20 mins
- 1.4Cross-Browser Testing Your Code20 mins
- 1.5Getting to Know HTML’s Basic Structure Tags20 mins
- 1.6Applying the Basic Text Tags20 mins
- 1.7Inserting Images20 mins
- 1.8What Is a Table?20 mins
- 1.9What Is a Web Form?20 mins
- 1.10Why to Make Your Pages Accessible20 mins
- 1.11Thinking Outside (but Also Inside) the Box Model20 mins
- 1.12Introducing Yourself to the Web Page Family20 mins
- 1.13Scratching Your Head Over Pseudo-Classes20 mins
- 1.14Commenting Your CSS Code20 mins
- 1.15Getting Comfy with CSS Measurement Units20 mins
- 1.16Specifying Colors in CSS20 mins
- 1.17Taking Care of Your Text20 mins
- 1.18What Is Web Coding?20 mins
- 1.19Understanding Variables20 mins
- 1.20Understanding Expression Structure20 mins
- 1.21Making True/False Decisions with if Statements20 mins
- 1.22What Is a Function?20 mins
- 1.23Working with Objects20 mins
- 1.24What Is an Array?20 mins
- 1.25Manipulating Text with the String Object20 mins
- 1.26Understanding Web Storage20 mins
- 1.27Understanding JavaScript’s Error Types20 mins
- 1.28Looking at the HTMLFormElement Object20 mins
- 1.29Getting a Grip on Page Flow20 mins
- 1.30Introducing Flexbox20 mins
- 1.31Introducing CSS Grid20 mins
- 1.32What is a Responsive Layout?20 mins
- 1.33Why Learn HTML, CSS, and JavaScript?20 mins
- 1.34Creating Your Local Folders20 mins
- 1.35A Buyer’s Guide to Web Hosting20 mins
- 1.36Understanding Validation20 mins
- 1.37Carving Up the Page20 mins
- 1.38Creating Links20 mins
- 1.39Embedding Videos20 mins
- 1.40Web Woodworking: How to Build a Table20 mins
- 1.41Building a Web Form20 mins
- 1.42Understanding Web Accessibility20 mins
- 1.43A Brief Digression on Whitespace20 mins
- 1.44What’s All This About a Selector?20 mins
- 1.45Getting Up to Speed with Pseudo-Elements20 mins
Instructor
Leave a Reply