intro-frontend-course

Introduction

This week, you’ll take the personal webpage you created in Week 1 and add styling to it using CSS (Cascading Style Sheets). This project will introduce you to basic CSS properties that control layout, color, and typography.

Objective

Enhance the visual appearance of your personal webpage using CSS. Focus on layout, colors, and fonts to make your webpage more visually appealing and professionally polished.

Requirements

Text Editor: Use the same text editor as before (e.g., VSCode, Sublime Text, or Atom).
Web Browser: For previewing your webpage as you style it.

Project Setup

Ensure your project folder from Week 1, which contains your index.html file, is ready.
Create a new CSS file in the same folder and name it styles.css.

Instructions

1. Link CSS to HTML

Add a link to the CSS file within the <head> section of your HTML document to connect your styling with the HTML structure.

2. Define the Scope of Your Styling

Decide what elements of the webpage you want to style, such as the header, sections, lists, and footer.

3. Basics of CSS Styling

Plan to set styles for background colors, text colors, and fonts.
Consider styling elements to improve the layout, such as padding, margins, and alignments.

4. Explore CSS Properties

Look into CSS properties that could enhance your webpage, such as font-family, color, margin, padding, and text-align.

5. Implement Responsive Design (Optional)

Optionally, add styles that make your webpage look good on both desktops and mobile devices, such as setting viewport-relative units like percentages or viewport widths.

6. Preview and Adjust

Regularly preview your webpage in a browser to see how your styles are taking shape. Adjust the CSS as needed based on how you want your final product to look.

7. Validation and Testing

Validate your CSS using a service like the W3C CSS Validation Service to ensure there are no errors.
Test the webpage in different browsers to make sure it looks consistent across them.

Learning Outcomes

Understand how to link a CSS file to an HTML document.
Gain practical experience with CSS properties that control layout, color, and typography.
Learn the basics of responsive design principles.

Documentation

Document the styles you have applied and why you chose them.
Note any challenges you encountered and how you overcame them.

This project will not only improve your skills in HTML and CSS but also prepare you for more advanced frontend techniques. Enjoy the creative process of designing your personal webpage!