Project Setup & Starter UI

This module establishes the learner’s working environment and explains the prepared interface before any API work begins. The starter already contains the complete WeatherNow layout, glassmorphism styling, responsive rules, weather effect layers, Font Awesome icons, and the clean clear-weather background.

A few terms you’ll see in this module

• HTML provides the structure of the page: headings, buttons, forms, cards, and other elements.
• CSS controls how those elements look. In this course, the CSS is already prepared, so you will focus on making the interface work.
• JavaScript controls behavior. It will read user input, request weather data, and update the HTML.
• DOM stands for Document Object Model. It is the browser’s JavaScript-accessible representation of the HTML page. When we say JavaScript will “update the DOM,” we mean it will find an HTML element and change its text, classes, or content.
• An HTML id is a unique name given to an element, such as cityInput or temperature. JavaScript can use that name to find the element quickly.
• A JavaScript variable stores a value that the program needs to use later. For example, the starter has a variable for the search input element so we do not have to find it again every time.

The learner will inspect the HTML IDs that form the JavaScript/DOM contract and the small JavaScript scaffold that later lessons will extend.

By the end: the project runs locally, the learner knows where the main UI elements live, and no visual work is required for the implementation modules.

Start here: complete the implementation lessons in order. Each lesson assumes the checkpoint from the previous lesson is working.