` for the main content - `

` for grouped content I also added useful metadata inside the ``: ```html My Profile ``` This makes sure the browser understands the character encoding and displays the correct page title. ## Accessibility Matters One important thing I learned was how to write accessible HTML. For example, images should always include descriptive `alt` text for accessibility. Instead of describing the purpose (“profile photo”), the `alt` text explains what is actually visible in the image. This helps screen readers and improves accessibility scores. ## Styling with CSS Selectors CSS selectors are how we tell the browser *which* HTML elements to style. This project helped me understand several important types of selectors: ### 1\. Element selectors These target all elements of a certain type such as body and h1. ### 2\. Class selectors These target elements with a specific class, such as .profile.card ### 3\. Descendant selectors These target elements inside other elements such as header h1 This only styles `

` elements that are inside a `
`. ### 4\. Attribute selectors Useful for links and buttons such as a\[target=”\_blank”\], this only styles links that open in a new tab. ## Adding Icons with Font Awesome To make the social links look nicer, I used Font Awesome icons by adding this to my ``: ```html ``` This allowed me to write: ```html ``` Because icons are fonts, I could style them easily using CSS (change size, color, or add hover effects). ## The Importance of Indentation One of the most valuable habits I learned is proper indentation. HTML has a lot of nested elements, and messy indentation makes code hard to read and debug. Clean indentation makes the structure obvious and prevents mistakes. ## Finishing and Saving My Work Once my profile page was complete, I pushed it to GitHub. Then I copied it into the next exercise folder:This let me reuse my work and build on top of it instead of starting from scratch. ## Adding Fonts and Colors with CSS After building the structure of my profile page with HTML, the next step was to bring it to life using CSS. This stage focused on choosing fonts and colors that make the page readable, visually balanced, and more personal. To begin, I copied my existing profile into the new challenge folder and created a CSS file, I then linked this `style.css` file to my HTML document so the browser could apply my styles. ## Styling the Body I started by styling the `` element. Since most text is inside the body, these rules affect paragraphs, list items, and general content. ```css body { background-color: #f7f7f7; font-family: 'Open Sans', sans-serif; color: #333; font-size: 16px; line-height: 1.6; } ``` This showed me that: `font-family` controls the typeface `font-size` controls how big the text is `line-height` controls spacing between lines `color` sets the text color `background-color` sets the page background I also learned about color contrast, which is important for accessibility. Text must be easy to read against the background. Tools like the WebAIM contrast checker helped me test my color choices. ## Styling Headers Next, I styled the headings (`h1`, `h2`, `h3`) separately from the body text. This showed me how grouping selectors works. Instead of writing separate rules for each heading, I could apply the same style to all of them in one line. I also learned that modern websites usually use smaller headers than I expected. Looking at sites like Medium and Airbnb helped me understand that elegant design often comes from subtle sizing, not huge text. ## Styling Links and Hover Effects Links were another important part of the design. This introduced me to pseudo-classes, especially `:hover`, which lets CSS react to user interaction. I also learned about motion sensitivity. If animations or transitions are added, they should respect users who prefer reduced motion. ## Choosing Fonts and Color Schemes To make the page look better, I explored: - Google Fonts for typography - Coolors and Color Hunt for color palettes For example, I imported fonts directly into my CSS file: @import url("[https://fonts.googleapis.com/css2family=Open+Sans:wght@300;400;700&family=Poppins:wght@300;400;500;700](https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&family=Poppins:wght@300;400;500;700)"); Then applied them, this taught me how external resources can be integrated into a project and controlled through CSS. ## Working with the Box Model The next step was to structure the page visually using the CSS box model. I reorganised my HTML into grouped sections: ```html

``` The `container` keeps the page content centred, while each `card` groups related information. I styled the container like this: ```css .container { width: 500px; margin: 0 auto; } ``` This showed me how `width` controls the size of the layout and `margin: 0 auto` centres the content horizontally. ## Designing Cards Each card became a white box with padding, rounded corners, and a soft shadow: ```css .card { background: white; padding: 30px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 20px; } ``` Here I learned how `padding` creates space inside an element, `border-radius` softens edges, `box-shadow` adds depth `margin` creates space between cards. This made the page look more like a real modern website instead of plain text on a background. ## Learning Better CSS Selectors A major lesson in this stage was learning how to name and organise CSS classes properly. It’s a better approach to use reusable classes. Therefore, we should use classes instead of IDs when styles can be reused. Choose names based on what the class does, not where it is and split styles into small reusable pieces instead of one giant rule. ## Using the Browser Inspector From this point onward, the browser inspector became essential. By right-clicking and choosing inspect, I could test CSS changes live, see which rules applied to which elements and experiment before writing final code. This made debugging and design much faster and helped me understand how CSS is actually interpreted by the browser. * * * ## Saving and Moving Forward Once everything was styled and structured, I pushed my work to GitHub: git add . git commit -m "Added fonts & colors to my profile page" git push origin master Then I copied the project into the next exercise folder: cp -r profile ../filepath Later, after finishing the box model and selector improvements, I repeated the process. ## Final Thoughts Building and styling my profile page step by step helped me understand how HTML and CSS work together in practice. What started as a simple page with text and images gradually became a structured and styled layout using fonts, colors, the box model, and well-chosen selectors. This process taught me that good web design is not about adding as much styling as possible, but about making thoughtful choices that improve readability, accessibility, and reuse. Learning to organise my CSS with reusable classes, centre content with containers, and group information into cards gave me a much clearer idea of how real websites are built. Overall, this project showed me that even a small page can teach big lessons about structure, design, and maintainability, and it gave me the confidence to keep experimenting with CSS as I move on to more responsive and dynamic layouts.