This unit introduces fundamental concepts, tools, and workflows for front‑end development using HTML, CSS, and JavaScript. Students will set up local testing environments, apply semantic markup and styling, and begin scripting and debugging while addressing accessibility, validation, and cross‑browser hosting considerations to prepare for more advanced interactive and responsive development in subsequent units.
Learning Objectives
- Analyze the roles and interactions of HTML, CSS, and JavaScript, including the impact of hosting choices, cross‑browser compatibility, and developer testing tools on front‑end behavior
- Apply semantic HTML (page structure, text tags, images, links, tables, forms, and embedded media) and accessibility best practices to build validated, user‑centered web pages
- Demonstrate CSS fundamentals by implementing the box model, selectors, pseudo‑classes, measurement units, color and typography properties, and layout techniques (Flexbox and Grid) to create responsive page layouts
- Implement fundamental JavaScript constructs—variables, expressions, control flow, functions, objects, and arrays—interact with forms, web storage, and the DOM, and employ basic debugging and validation techniques to ensure functional code
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
Free
Leave a Reply