This unit develops core front-end skills in CSS layout, typography, color, and responsive design while introducing essential JavaScript programming concepts and DOM interaction. Students practice styling and structuring pages, debugging styles and scripts, and applying accessibility and validation standards to prepare for more advanced interactive development in subsequent units.
Learning Objectives
- Apply CSS resets, measurement units, selectors, box-model properties, and layout systems (float, flexbox, grid) to build validated, responsive page layouts with appropriate typography, color, backgrounds, padding, lists, and tables
- Demonstrate use of debugging techniques, developer tools, and best practices (commenting, validation, editor selection, hosting choices) to identify and resolve styling and markup issues
- Analyze and implement JavaScript fundamentals — including variables, literal data types, numeric and string expressions, arrays, dates, branching (if/else and multiple decisions), functions, and JSON — to manipulate the DOM and HTMLInputElement objects
- Evaluate web pages for accessibility and maintainability by applying semantic structure, ARIA/accessible patterns, validation feedback, and organized code comments to support user needs and future development
Curriculum
- 1 Section
- 45 Lessons
- 30 hours
Expand all sectionsCollapse all sections
- Unit 2 — Foundations of Front-End Development45
- 1.1Using a CSS Reset20 mins
- 1.2Checking Out the Absolute Measurement Units20 mins
- 1.3Using Color to Spruce Up Your Text20 mins
- 1.4The Typographic Trinity: Setting Type Size, Line Height, and Line Length20 mins
- 1.5What Is a Programming Language?20 mins
- 1.6Naming Variables: Rules and Best Practices20 mins
- 1.7Building Numeric Expressions20 mins
- 1.8Branching with if…else Statements20 mins
- 1.9The Structure of a Function20 mins
- 1.10Getting to Know the Document Object Model20 mins
- 1.11Declaring an Array20 mins
- 1.12Dealing with Dates and Times20 mins
- 1.13Introducing JSON20 mins
- 1.14Getting to Know Your Debugging Tools20 mins
- 1.15Taking a Peek at the HTMLInputElement Object20 mins
- 1.16Floating Elements20 mins
- 1.17Do I Still Need Flexbox Now That CSS Grid Is Here?20 mins
- 1.18Setting Up the Grid Container20 mins
- 1.19Going with the Flow: Fluid Layouts20 mins
- 1.20Seeing How It All Works20 mins
- 1.21Choosing Your Text Editor20 mins
- 1.22Finding a Web Host20 mins
- 1.23Don’t Skip Validation!20 mins
- 1.24Commenting Your Code20 mins
- 1.25Building Bulleted and Numbered Lists20 mins
- 1.26Embedding Audio Snippets20 mins
- 1.27Adding More Table Elements20 mins
- 1.28Making Your Page Structure Accessible20 mins
- 1.29Adding Padding20 mins
- 1.30Learning the Standard Selectors20 mins
- 1.31Debugging CSS20 mins
- 1.32Getting to Know the Relative Measurement Units20 mins
- 1.33Styling an Element’s Background20 mins
- 1.34Applying Text Styles20 mins
- 1.35Is JavaScript Hard to Learn?20 mins
- 1.36Understanding Literal Data Types20 mins
- 1.37Building String Expressions20 mins
- 1.38Making Multiple Decisions20 mins
- 1.39Where Do You Put a Function?20 mins
- 1.40Specifying Elements20 mins
- 1.41Populating an Array with Data20 mins
- 1.42Working with Numbers: The Math Object20 mins
- 1.43Adding Data to Web Storage20 mins
- 1.44Debugging with the Console20 mins
- 1.45Programming Text Fields20 mins
Instructor
Free
Leave a Reply