Developing Web Sites with HTML, CSS and JavaScript

Covering the three underlying technologies of web pages—HTML, CSS, and JavaScript—this book is a one-stop guide to getting started in web development, be it in a class or as a solo-learner. Starting with no prerequisites beyond minimal exposure to programming, this book guides readers in an accessible fashion through modern page layout methods to building a complete site. This book develops an understanding of the structure of a page (how its parts fit together to convey its content to site users), how styles can make the content attractive and appealing, and how short programs and scripts can add everything from simple interactivity to complex calculations to your pages. With a wealth of in-depth examples, review questions, exercises, and online sources and videos, readers are encouraged to excel in all of these areas, learning how to add animations, timing, designs that change in response to the characteristics of a display device, and more. Building knowledge from the ground up, this book appeals to those looking to learn web development from a range of backgrounds, be it academic, professional, or personal.

Table of Contents:
PREFACE INTRODUCTION CHAPTER 1. Introduction to the world-wide web 1.1. The plan of this book......................................................................................................................................... 1.2. Background......................................................................................................................................................... 1,3, Structure of the World-Wide Web.................................................................................................................. 1.4. Page and site design........................................................................................................................................... 1.5. What you’ll need going forward...................................................................................................................... Chapter 1: Test Your Knowledge............................................................................................................................ Chapter 1 Exercises................................................................................................................................................... Term Project Assignment 1...................................................................................................................................... CHAPTER 2. introduction to html 2.1. Basic concepts..................................................................................................................................................... 2.2. The page head..................................................................................................................................................... 2.3. Text elements...................................................................................................................................................... 2.3.1. Block elements.......................................................................................................................................... 2.3.2. Inline elements........................................................................................................................................... 2.3.3. Special HTML characters........................................................................................................................ 2.3.4. Size of an HTML element....................................................................................................................... 2.3.5. HTML comments...................................................................................................................................... 2.4. Two more useful HTML tags........................................................................................................................... 2.4.1. The anchor tag........................................................................................................................................... 2.4.2. Full and partial URLs............................................................................................................................... 2.4.3. The image tag............................................................................................................................................ 2.5. HTML container elements................................................................................................................................ 2.5.1. The concept................................................................................................................................................ 2.5.2. Nesting........................................................................................................................................................ 2.5.3. Semantic containers.................................................................................................................................. 2.5.4. Accessibility and ARIA roles................................................................................................................. 2.6. Going online........................................................................................................................................................ 2.7. Multi-page sites Chapter 2: Test Your Knowledge............................................................................................................................ Chapter 2 Exercises................................................................................................................................................... Term Project Assignment 2...................................................................................................................................... CHAPTER 3. introduction to CSS 3.1. The need............................................................................................................................................................... 3.2. The old way and its issues................................................................................................................................ 3.3. The CSS idea....................................................................................................................................................... 3.4. CSS structure....................................................................................................................................................... 3.5. Some useful selectors........................................................................................................................................ 3.6. Color and Measurement.................................................................................................................................... 3.6.1. Colors........................................................................................................................................................ 3.6.2. Units of measure.................................................................................................................................... ` 3.7. Some useful properties...................................................................................................................................... 3.7.1. Container properties............................................................................................................................... 3.7.2. Text properties......................................................................................................................................... 3.7.3. Downloading custom fonts.................................................................................................................... 3.8. Inheritance........................................................................................................................................................... 3.9. Other places for styles....................................................................................................................................... 3.9.1. External style sheets............................................................................................................................... 3.9.2. Inline styles.............................................................................................................................................. Chapter 3: Test Your Knowledge............................................................................................................................ Chapter 3 Exercises................................................................................................................................................... Term Project Assignment 3...................................................................................................................................... CHAPTER 4. javascript concepts 4.1. The need............................................................................................................................................................... 4.2. Where JavaScript goes and when it runs........................................................................................................ 4.3. Activating JavaScript......................................................................................................................................... 4.4. JavaScript comments......................................................................................................................................... 4.5. JavaScript data.................................................................................................................................................... 4.5.1. Constants and variables.......................................................................................................................... 4.5.2. Declaring with let.................................................................................................................................... 4.5.3. Declaring with const............................................................................................................................... 4.5.4. Declaring with var.................................................................................................................................. 4.6. JavaScript output................................................................................................................................................ 4.6.1. Alert........................................................................................................................................................... 4.6.2. Confirm 4.6.3. Console log............................................................................................................................................... 4.6.4. document.write, document.writeln....................................................................................................... 4.6.5. Output by setting the content of an HTML element......................................................................... 4.7. JavaScript input.................................................................................................................................................. 4.7.1. Prompt....................................................................................................................................................... 4.7.2. Form field input....................................................................................................................................... 4.8. Assignment and operators................................................................................................................................. 4.8.1. Arithmetic operators............................................................................................................................... 4.8.2. String operators....................................................................................................................................... 4.8.3. Logical operators..................................................................................................................................... 4.8.4. Operator precedence............................................................................................................................... 4.9. Modifying HTML element characteristics in JS........................................................................................... 4.9.1. Modifying CSS styles............................................................................................................................. 4.9.2. Modifying HTML attributes................................................................................................................. Chapter 4: Test Your Knowledge............................................................................................................................ Chapter 4 Exercises................................................................................................................................................... Term Project Assignment 4...................................................................................................................................... CHAPTER 5. Lists, tables, and images 5.1. Lists: HTML........................................................................................................................................................ 5.1.1. The Basics................................................................................................................................................ 5.1.2. Some useful HTML attributes.............................................................................................................. 5.2. Lists: CSS............................................................................................................................................................ 5.2.1. list-style-type............................................................................................................................................ 5.2.2. list-style-position..................................................................................................................................... 5.2.3. list-style-image........................................................................................................................................ 5.2.4. Borders...................................................................................................................................................... 5.2.5. The display property............................................................................................................................... 5.2.6. Text size in lists....................................................................................................................................... 5.3. Tables: HTML.................................................................................................................................................... 5.4. Tables: CSS......................................................................................................................................................... 5.4.1. Table cell borders.................................................................................................................................... 5.4.2. Table cell width....................................................................................................................................... 5.4.3. Table padding.......................................................................................................................................... 5.5. Images: HTML................................................................................................................................................... 5.6. Images: CSS........................................................................................................................................................ 5.6.1. Sizing and positioning images.............................................................................................................. 5.6.2. The float property................................................................................................................................... 5.6.3. Image filters............................................................................................................................................. 5.6.4. Getting random photographs................................................................................................................. Chapter 5: Test Your Knowledge............................................................................................................................ Chapter 5 Exercises................................................................................................................................................... Term Project Assignment 5...................................................................................................................................... CHAPTER 6. boxes and colors 6.1. The CSS box model........................................................................................................................................... 6.2. Styling box properties........................................................................................................................................ 6.2.1. Box size and display type...................................................................................................................... 6.2.2. Styling padding........................................................................................................................................ 6.2.3. Styling borders......................................................................................................................................... 6.2.4. Margins: styling and collapsing............................................................................................................ 6.2.5. Box shadows............................................................................................................................................ 6.2.6. Changing the box sizing model............................................................................................................ 6.3. CSS color ............................................................................................................................................................ 6.3.1. Hexadecimal color notation.................................................................................................................. 6.3.2. Opacity...................................................................................................................................................... 6.3.3. Decimal RGB color................................................................................................................................ 6.3.4. HSL and LCH/OKLCH color............................................................................................................... 6.3.5. HWB color............................................................................................................................................... 6.3.6. Other color models................................................................................................................................ 6.3.7. Mixing colors........................................................................................................................................... 6.3.8. Custom properties........................................................................................................................................... 6.4. Resolving conflicting priorities........................................................................................................................ 6.4.1. Overall style priorities ........................................................................................................................... 6.4.2. CSS layers ............................................................................................................................................... 6.5. Property shorthands: beware............................................................................................................................ Chapter 6: Test Your Knowledge............................................................................................................................ Chapter 6 Exercises................................................................................................................................................... Term Project Assignment 6...................................................................................................................................... CHAPTER 7. More javascript 7.1. Events................................................................................................................................................................... 7.1.1. Event listeners.......................................................................................................................................... 7.1.2. Event propagation: bubbling and capturing....................................................................................... 7.1.3. A practical example................................................................................................................................ 7.2. Conditional statements...................................................................................................................................... 7.2.1. The if statement....................................................................................................................................... 7.2.2. Think first!............................................................................................................................................... 7.2.3. The switch statement.............................................................................................................................. 7.2.4. The ternary conditional.......................................................................................................................... 7.3. Adding HTML elements to a page.................................................................................................................. 7.4. Scrolling............................................................................................................................................................... 7.4.1. Reading an element’s scroll position................................................................................................... 7.4.2. Setting an element’s scroll position..................................................................................................... 7.4.3. An Example: Animation on Scroll....................................................................................................... 7.5. More about functions......................................................................................................................................... 7.5.1. Function values and the return statement........................................................................................... 7.5.2. Anonymous functions............................................................................................................................ Chapter 7: Test Your Knowledge............................................................................................................................ Chapter 7 Exercises................................................................................................................................................... Term Project Assignment 7...................................................................................................................................... CHAPTER 8. forms 8.1.About Web forms................................................................................................................................................ 8.2. Form structure..................................................................................................................................................... 8.3. Form elements..................................................................................................................................................... 8.3.1. Input, text type......................................................................................................................................... 8.3.2. Input, password type............................................................................................................................... 8.3.3. Input, checkbox type.............................................................................................................................. 8.3.4. Input, radio button type.......................................................................................................................... 8.3.5. Input, number type.................................................................................................................................. 8.3.6. Input, range type .................................................................................................................................... 8.3.7. Input, button type.................................................................................................................................... 8.3.8. Input, specialized types ......................................................................................................................... 8.3.9. The textarea element.............................................................................................................................. 8.3.10. The select element................................................................................................................................ 8.3.11. The button element............................................................................................................................... 8.4. Form appearance................................................................................................................................................ 8.4.1. Enhancement form elements................................................................................................................. 8.4.2. Forms and CSS ....................................................................................................................................... Chapter 8: Test Your Knowledge............................................................................................................................ Chapter 8 Exercises................................................................................................................................................... Term Project Assignment 8...................................................................................................................................... CHAPTER 9. positioning elements 9.1. Background......................................................................................................................................................... 9.2. Display types (again)......................................................................................................................................... 9.3. The position property......................................................................................................................................... 9.3.1. position:static.......................................................................................................................................... 9.3.2. position:fixed........................................................................................................................................... 9.3.1. position:relative...................................................................................................................................... 9.3.1. position:sticky.......................................................................................................................................... 9.3.1. position:absolute..................................................................................................................................... 9.3.1. Vertical centering.................................................................................................................................... 9.4. CSS Grid.............................................................................................................................................................. 9.4.1. Specifying columns................................................................................................................................ 9.4.2. Specifying rows....................................................................................................................................... 9.4.3. Grid lines and placing items.................................................................................................................. 9.4.4. Naming grid lines.................................................................................................................................... 9.4.5. Named grid areas ................................................................................................................................... 9.4.6. Subgrid...................................................................................................................................................... 9.4.7. Positioning in a grid................................................................................................................................ 9.4.8. Applying Grid.......................................................................................................................................... 9.5. The Z axis Chapter 9: Test Your Knowledge............................................................................................................................ Chapter 9 Exercises................................................................................................................................................... Term Project Assignment 9...................................................................................................................................... CHAPTER 10. Still more javascript 10.1. Loops.................................................................................................................................................................. 10.1.1. for loop................................................................................................................................................... 10.1.2. while and do while loops..................................................................................................................... 10.2. Arrays................................................................................................................................................................. 10.2.1. The JavaScript array concept.............................................................................................................. 10.2.2. Looping through arrays........................................................................................................................ 10.2.3. Array methods....................................................................................................................................... 10.2.4. Comparing arrays.................................................................................................................................. 10.2.5. Filling an array via user input............................................................................................................. 10.2.6. Accessing table cells............................................................................................................................ 10.3. JavaScript timers.............................................................................................................................................. 10.3.1. Waiting before running a function..................................................................................................... 10.3.2. Running a function repeatedly............................................................................................................ 10.3.3. An example............................................................................................................................................ 10.4. More ways to select HTML elements........................................................................................................... 10.5 The this object 10.6. An in-depth example....................................................................................................................................... 10.6.1. The game concept................................................................................................................................. 10.6.2. Game HTML......................................................................................................................................... 10.6.3. Game CSS.............................................................................................................................................. 10.6.4. Game JavaScript................................................................................................................................... Chapter 10: Test Your Knowledge......................................................................................................................... Chapter 10 Exercises................................................................................................................................................. Term Project Assignment 10.................................................................................................................................... CHAPTER 11. pseudo-things, transformations, transitions, and dialog(ue) 11.1. CSS pseudo-classes.......................................................................................................................................... 11.1.1. Link pseudo-classes.............................................................................................................................. 11.1.2. Positional (order) pseudo-classes....................................................................................................... 11.1.3. Other useful pseudo-classes................................................................................................................ 11.1.4. Using :hover to create a drop-down menu....................................................................................... 11.2. CSS pseudo-elements...................................................................................................................................... 11.3. CSS transformations........................................................................................................................................ 11.3.1. Translate................................................................................................................................................. 11.3.2. Scale........................................................................................................................................................ 11.3.3. Rotate...................................................................................................................................................... 11.3.4. Skew........................................................................................................................................................ 11.4. CSS transitions................................................................................................................................................. 11.4.1. The transition property......................................................................................................................... 11.4.2. Smooth scrolling................................................................................................................................... 11.5. The dialog element.......................................................................................................................................... 11.5.1. Dialog basics.......................................................................................................................................... 11.5.2. Dialog boxes and forms....................................................................................................................... 11.5.3. Styling and positioning dialog boxes................................................................................................ 11.5.4. The ::backdrop pseudo-element......................................................................................................... Chapter 11: Test Your Knowledge......................................................................................................................... Chapter 11 Exercises................................................................................................................................................. Term Project Assignment 11.................................................................................................................................... CHAPTER 12. responsive design 12.1. Background....................................................................................................................................................... 12.2. How it works..................................................................................................................................................... 12.3. Writing media queries..................................................................................................................................... 12.3.1. Before you start..................................................................................................................................... 12.3.2. And now, @media................................................................................................................................ 12.3.3. Responsive typography........................................................................................................................ 12.4. A complete example........................................................................................................................................ 12.5. Container queries............................................................................................................................................. 12.5.1. What container queries do................................................................................................................... 12.5.2. Defining a containment context......................................................................................................... 12.5.3. Container dimension units 12.5.4. An in-depth example: Mike’s Used Autos Chapter 12: Test Your Knowledge......................................................................................................................... Chapter 12 Exercises................................................................................................................................................. Term Project Assignment 12.................................................................................................................................... Appendix A: HTML elements APPENDIX B: CSS PROPERTIES appendix C: javascript Symbols and keywords Index part 1: general concepts Index part 2: html Index part 3: css Index part 4: Javascript