Web Design

What does HTML do?

Gives the page structure (the skeleton). It marks up content like headings, paragraphs, and images.

What does CSS do?

Controls how the page looks: colors, fonts, layout. It's the clothes on the HTML skeleton.

What does JavaScript do?

Adds behavior and interactivity: form checks, sliders, video players, animations.

What does a UX designer focus on?

How the site works: goals, users, and how people move through it.

What does a UI designer focus on?

How the site looks: colors, fonts, logo, brand.

Frontend vs. backend development?

Frontend = what runs in the browser (HTML/CSS/JS). Backend = servers and databases.

What is a wireframe?

A rough page layout using boxes, with no colors or fonts. Shows where things go.

What is a site diagram (sitemap)?

A chart showing how all the pages on a site connect. The site's family tree.

What does a content strategist do?

Makes sure all text, down to button labels, fits the brand and goals.

What's the #1 planning rule from Ch. 1?

Plan how the site works before deciding how it looks.

Internet vs. web?

The internet is the network of connected computers. The web is one service that runs on it (email is another).

What is a server?

A computer/software that stores websites and sends pages when a browser asks.

What is a browser (client)?

Software that requests and displays web pages, like Chrome or Safari.

What does the S in HTTPS mean?

Secure. Data between the browser and server is encrypted.

What does DNS do?

Translates domain names (google.com) into number IP addresses. Like a phone book.

What are the 3 parts of a URL?

Protocol (https://) + domain (www.example.com) + path (/folder/page.html).

What is index.html?

The default page a server shows when you go to just a domain or folder.

What is a web page actually made of?

Separate files (HTML, CSS, images) that the browser requests and assembles.

What does a 404 error mean?

Page not found. (200 = OK, 301 = moved, 500 = server error.)

What's the big idea of Ch. 3?

You never know how someone will view your site, so plan for every device, browser, speed, and ability.

What device do most people browse on now?

Phones. That's why you design mobile-first.

Why follow web standards?

So your site works consistently across browsers. The W3C sets the rules.

What is progressive enhancement?

Start with a basic version that works everywhere, then add extras for browsers that can handle them.

What is responsive web design?

One site that rearranges itself to fit any screen size. One column on phones, multiple on desktop.

What is accessibility (a11y)?

Making a site usable for everyone, including people with disabilities. Examples: alt text, captions, keyboard navigation.

What are the 4 categories of disability to design for?

Vision, mobility, hearing, cognitive.

Why does site speed matter?

Slow sites lose visitors and rank lower on Google. Keep images small and files light.

What is a website blueprint?

A plan of the whole site's structure and content before you build. Like a house blueprint.

Why do many sites fail, according to the blueprint video?

People build as they go instead of planning first.

What is Tier 1?

The home page. There's only one.

What is Tier 2?

Main sections linked from the home page (e.g., About, Ministries).

What is Tier 3?

Detail pages under each main section. Most of the site lives here (e.g., Kids, Youth, College).

How deep should a site structure go?

No more than 3 levels. No Tier 4.

Should pages link to each other?

Yes. Interlink them: Tier 3 back to Tier 2, Home, or other Tier 3 pages.

Why does a clear 3-tier structure help?

Easy for visitors to navigate and easy for search engines to understand.

What are the 4 steps to get a site live?

Domain, hosting, install WordPress, build the site.

What is a domain?

Your site's name/address, like yourname.com. About $13/yr.

What is hosting?

An always-on computer that stores your site's files. Domain with no hosting = blank site.

What is WordPress?

A CMS (content management system) that lets you build and manage a site without coding. It's free.

Theme vs. plugin?

Theme = the site's overall design. Plugin = an add-on feature (contact form; page builder).

Pages vs. posts in WordPress?

Pages are permanent (Home, About, Contact). Posts are blog entries.

Why set permalinks to 'Post name'?

Clean, professional URLs like yoursite.com/about instead of index.php and dates.

Why save a logo as PNG?

It keeps a transparent background. A JPEG shows a white box behind it.

What is a favicon?

The tiny icon in the browser tab. Should be a 512x512 square.

Why have a personal portfolio site?

People Google you. Your own site controls what shows up and looks professional. Keep it simple: Home, About, Resume, Contact.