Week 14 — Publishing and Pre-Launch Quality Assurance

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Publishing, deployment-ready structure, relative paths, pre-launch QA

Project files and folder structure

Prepare site-ready/ with index.html, other HTML pages, css/styles.css, assets/, README.txt, and asset-credits.txt.

Syntax to practice

Relative paths, consistent capitalization, stylesheet links, image src paths, remove local-only paths and unused files.

Build it

Prepare the multi-page site for static hosting. Check links, images, CSS paths, titles, responsive behavior, and credits. Test locally and follow the instructor’s publishing workflow if available.

Code along: Document the site structure and pre-launch checks.

Open in Sublime Text: week-14/README.txt

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

PROJECT: Student Portfolio
PAGES:
- index.html
- about.html
- work.html
STYLES:
- css/styles.css
ASSETS:
- assets/
PRE-LAUNCH CHECKS:
- Test all navigation links.
- Test mobile, tablet, and desktop widths.
- Check alt text and asset credits.
- Confirm page titles are unique.
- Confirm no files are missing.

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-14/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Launch Checklist</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body><main><h1>Pre-launch checklist</h1><ul><li>Navigation links work.</li><li>Mobile layout is readable.</li><li>Images have appropriate alt text and credits.</li><li>Titles and descriptions are unique.</li></ul></main></body>
</html>

CSS file: week-14/css/styles.css

body { margin: 0; font-family: Arial, sans-serif; line-height: 1.7; color: #172033; background: #f8fafc; }
main { max-width: 760px; margin: 40px auto; padding: 24px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; }
li { margin-bottom: 10px; }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Expand this to at least ten checks. Test locally, then repeat the checks on the published URL.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• site-ready/ — complete project folder with source files and assets organized into css/ and assets/.
• site-ready/README.txt — description, folder map, local preview instructions, published URL if deployed.
• site-ready/launch-checklist.txt — at least 10 pre-launch checks marked pass/fail.
• site-ready/asset-credits.txt — sources and licenses for third-party assets.

Submission checklist

• No missing files; relative paths work; 10 checklist items; README and credits included; publishing status stated accurately.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.