Assignment 03 - Styling and Improving a Web Page with CSS
This assignment is the third step of the course flow: first web concepts, then HTML page building, and now visual improvement with CSS. Your task is to take a meaningful HTML page and make it clearer, cleaner, and better organized through beginner-level CSS.
Connection to the course
Weeks 4 to 6 focused on HTML structure, content, links, images, tables, and forms. Week 7 introduced CSS selectors, colors, spacing, fonts, links, and card-like sections. This assignment asks you to combine those topics into one complete student-made page.
Main idea
You may continue your Assignment 02 page or create a new page. In both cases, the final result must show a clear improvement in layout, readability, spacing, and overall presentation. This is not only about decoration; it is about organizing content better with CSS.
Accepted project directions
- Improve your Assignment 02 page by redesigning it with external CSS.
- Create an academic profile, registration page, hobby page, travel page, or movie/archive page.
- Create another original topic if it has real content and a clear page structure.
Required deliverables
- Submit one HTML file and one external CSS file.
- If you use images, keep them in the same assignment folder and use relative paths.
- Your files must open correctly in a browser without broken links or missing assets.
- The work must remain your own even if you study class examples.
HTML checklist
Page structure
- Use a complete HTML document structure.
- Include a meaningful page title.
- Use headings and paragraphs correctly.
- Create at least three clear content sections.
- Include a navigation area, menu, or internal jump links.
Content requirements
- Include at least one image.
- Include at least one list.
- Include at least one table or one form.
- Use content that fits the page topic instead of placeholder-only text.
CSS checklist
Required selector use
- Use element selectors.
- Use at least two class selectors.
- Use at least one id selector.
- Use at least one grouped selector.
Required styling use
- Apply color and background-color.
- Use font-family, font-size, and text-align.
- Use border, padding, margin, and width or max-width.
- Style links and include at least one hover effect.
- Style at least one box, card, panel, or highlighted section.
- If you use a table or form, style it to improve readability.
Design expectations
- Use enough contrast between text and background.
- Keep spacing consistent so the page does not feel crowded.
- Do not overload the page with too many colors or random styles.
- Make the page look intentional, readable, and organized.
- Show visible improvement compared with a plain unstyled HTML page.
References from the last lesson
You may study the in-class examples from the last lesson before starting. These are references, not files to copy directly:
Evaluation criteria
| Area | What is expected |
|---|---|
| HTML structure | Logical sections, correct headings, meaningful content, and clean document organization. |
| CSS usage | Correct selector use, clean syntax, and visible use of the CSS topics covered in class. |
| Readability | Clear spacing, legible text, balanced colors, and better visual hierarchy. |
| Completeness | Required items are present: image, list, table or form, navigation, card/box styling, and external CSS. |
| Care and presentation | The page feels finished, checked, and intentionally designed rather than randomly decorated. |
Submission note
Submit your work by the deadline announced in class. Before submission, open the page in a browser and check that the HTML file, CSS file, and images all work correctly together.
Final reminder: good CSS does not hide weak structure. The best result will come from a clean HTML page that becomes easier to read and easier to use after styling.