Wrap-up and resources
Key Takeaways
- 1. Your first web page: HTML from zero: A web page is a text file of tags that tell the browser "this is a heading, this is a paragraph, this is a link". Open the tag, write the content, close it, and each attribute adds information to the element.
- 2. Semantic HTML: meaningful structure, forms and access for everyone: Pick elements by meaning, not looks: header, nav, main, button, label. The right meaning gives you accessibility, search and behaviour for free, and a good form validates in the browser for comfort and on the server for safety.
- 3. CSS from zero: colours, fonts and the box: A rule = a selector that picks elements + properties that change how they look. Every element is a box: content, then padding, then border, then margin. When two rules clash, the more specific wins, then the later one.
- 4. CSS for layout: Flexbox, Grid and responsiveness: Flex for one row or column, Grid for a grid, and mobile first then min-width for larger screens. Variables keep your colours in one place, and logical properties (margin-inline-start) make the page work in Arabic and English.
- 5. JavaScript from zero: values, decisions and loops: A program is instructions run in order: you store values in variables (const by default), always compare with ===, decide with if, and repeat with for. console.log is your window into what is happening.
- 6. JavaScript: functions, arrays and objects: A function is a named recipe you reuse. An array is an ordered list, and an object is a card of properties. Think of arrays as transformations: filter picks, map transforms, reduce combines.
- 7. JavaScript and the DOM: a page that responds: Select the element, listen for the event, change the state, then draw the state. Make data the source of truth and the page its reflection, and use textContent for any text from a user.
- 8. Asynchronous JavaScript: timers, promises and fetch: What takes time (the network, a timer) does not stop the page: you ask for it, carry on, and the answer comes later. Write that with async/await, wrap it in try/catch, and show the user "loading" and "something went wrong".
Glossary
| Term | Definition | Part |
|---|---|---|
| Tag | A word in angle brackets like <p>, usually in an opening and closing pair. | 1 |
| Element | The opening and closing tags with the content between them. | 1 |
| Attribute | Extra information in the opening tag as name="value", like href, src and alt. | 1 |
| Semantic HTML | Choosing elements by meaning: header, nav, main, button. | 2 |
| Landmarks | The page's main regions (header, nav, main, footer) that a screen reader jumps between. | 2 |
| label | The field's name, tied to it with for and id. | 2 |
| Rule | A selector then { property: value; }. | 3 |
| Class | A dot selector .name that picks many elements; the basis of styling. | 3 |
| padding and margin | Padding is inside the border and takes the background; margin is outside and transparent. | 3 |
| display: flex | Lines up the direct children in a single row or column. | 4 |
| justify-content / align-items | Spreading along the main axis / aligning on the cross axis. | 4 |
| fr | A Grid unit meaning a share of the remaining space. | 4 |
| console.log | Prints a value to the Console so you see what happens inside the program. | 5 |
| const and let | const for what is not rebound, let for what changes. No var. | 5 |
| typeof | Returns a value's type: string, number, boolean... | 5 |
| return | Hands back the function's result and ends it. | 6 |
| Arrow function | (a) => a * 2: a short function without the function keyword. | 6 |
| callback | A function you pass to another function to call later. | 6 |
| DOM | The object tree the browser builds from HTML. | 7 |
| querySelector | Returns the first element matching a CSS selector, or null. | 7 |
| classList.toggle | Adds the class if missing and removes it if present. | 7 |
| The event loop | Runs waiting tasks from the queues once the current code is done. | 8 |
| Promise | An object for a later result: pending, then fulfilled or rejected. | 8 |
| async | A function that always returns a Promise and allows await inside. | 8 |
Resources for this lesson
Grouped by type. Start with the official docs for precision, or an article or video for the explanation.
Official docs2
Books4
javascript.info: JavaScript FundamentalsThe clearest free explanation of the basics, chapter by chapter with exercises.javascript.infojavascript.info: Objects: the basicsObjects, references and copying, clearly explained.javascript.infojavascript.info: Array methodsEvery array method with examples and exercises.javascript.infojavascript.info: Promises, async/awaitThe clearest chapter on promises and async, with graded examples.javascript.info
course8
Done with this lesson?
Sign in to save your progress.