CodingNic
Sign In Book Session

Project Setup & Starter UI

Get the Starter Project

Project Setup & Starter UI 20 min read

Get the Starter Project

Get the Starter Project

What you’ll build

Before writing JavaScript, you’ll get the prepared WeatherNow project running locally. The starter contains the complete visual interface, so you can concentrate on application behavior throughout the course instead of rebuilding the design.

Get the starter from GitHub

The course starter will be maintained in the GitHub repository:

https://github.com/codingnc/vanilla-weather-app-starter

You can either clone the repository with Git or download the repository as a ZIP from GitHub.

Download starter code

Option A: Clone with Git

Open a terminal in the folder where you keep your projects and run:

bash
git clone https://github.com/YOUR_GITHUB_USERNAME/weather-app-vanilla-js.git
cd weather-app-vanilla-js

Option B: Download the ZIP

Open the GitHub repository, choose Code → Download ZIP, extract it, and open the extracted folder in your editor.

Open the project

Open the project folder in VS Code or your preferred editor. You should see:

text
weather-app-vanilla-js/
├── index.html
├── style.css
├── script.js
├── assets/
│   └── clear-weather-background.jpg
└── .gitignore

index.html contains the prepared page structure. style.css contains the complete visual design. script.js contains the JavaScript scaffold that you’ll progressively turn into the finished application.

Run it locally

Because the project uses browser JavaScript and external API requests, run it through a local web server rather than opening index.html directly with a file:// URL.

If you use VS Code, install Live Server, right-click index.html, and choose Open with Live Server.

You can also use any local static server you already use for frontend projects.

What you should see

The WeatherNow interface should load with:

  • WeatherNow branding
  • The Find the Weather Anywhere heading
  • City search controls
  • The Use My Location button
  • The current-weather card
  • Weather statistic cards
  • The five-day forecast area
  • The Celsius/Fahrenheit control
  • The prepared glassmorphism styling and responsive layout
  • The landscape background

The search is not supposed to work yet. That is intentional. We will add the application behavior in later modules.

Test

  1. Load the page through your local server.
  2. Open DevTools → Console.
  3. Confirm there are no startup errors.
  4. Resize the browser to a narrow mobile width and then back to desktop width.
  5. Confirm the layout remains usable.

Checkpoint

You are ready for the next lesson when the prepared WeatherNow interface loads locally, the browser console has no blocking startup errors, and you can identify the project files above.