Introduction to Frontend

Frontend development is the art and science of building everything a user sees, touches, and experiences in their web browser. It is the bridge between a raw idea and a functional interface.

At CodeHarborHub, we call this the "Visual Side" of the stack.

1. What is the "Frontend"?

When you visit a website, your browser (like Chrome or Safari) receives files from a server. The frontend is the combination of those files working together to create a smooth experience.

It involves:

• Design: How it looks (Colors, Layout, Typography).
• Interaction: What happens when you click or scroll.
• Performance: How fast the page loads and feels.
• Accessibility: Ensuring everyone, including people with disabilities, can use the site.

2. The Three Pillars of the Web

Every single website you have ever visited is built using three core technologies. Think of it like building a House:

HTML (The Skeleton)

HyperText Markup Language is the structure. It defines what goes on the page. Is it a heading? A paragraph? An image? Without HTML, there is no content.

CSS (The Skin & Style)

Cascading Style Sheets make the house look beautiful. It handles the paint, the wallpaper, the furniture placement, and the lighting. Without CSS, the web would be plain black text on a white background.

JavaScript (The Brains)

JavaScript adds logic and behavior. It’s the wiring that makes the doorbell ring, the lights turn on, and the elevator move. It makes the website interactive.

3. The Modern Frontend Workflow

Building websites today is more than just typing code. As a frontend developer at CodeHarborHub, you will learn to use:

Stage	What you'll do	Tools
Design	Plan the layout and colors.	Figma, Adobe XD
Development	Write the code.	VS Code, Git
Responsive	Make it work on mobile phones.	Chrome DevTools
Deployment	Put it on the internet.	GitHub Pages, Vercel

4. What we will build

In this track, we aren't just going to read about code—we are going to create. You will progress through:

1. Static Pages: Simple resumes and landing pages using HTML & CSS.
2. Responsive Layouts: Websites that look great on an iPhone and a 4K Monitor.
3. Interactive Apps: Projects that react to user input using JavaScript.

The "Inspect" Secret

You can see the frontend code of any website right now. Right-click anywhere on this page and select "Inspect". That window shows you the real-time HTML and CSS running this site!