Skip to content
Bianca Correia

Learning HTML & CSS Selectors by Building A Profile Page

When I started learning HTML and CSS, I quickly realised that writing content is only half the story.

Bianca Correia7 min read

When I started learning HTML and CSS, I quickly realised that writing content is only half the story. The real magic happens when you learn how to select elements and style them properly. To practise this, I built a simple profile page using semantic HTML and CSS selectors, while running everything on a local server.

This project helped me understand how structure (HTML) and design (CSS) work together.

Project Setup#

Before writing any code, I had to organise my project properly. Inside my profile folder, I created a directory for images:

cd profile

mkdir images

code.

This keeps my project clean and makes it easier to manage assets like profile pictures and icons.

Running a Local Server#

To preview my page in the browser, I used a local web server: serve

This command was already set up as an alias. Once it was running, I could visit my project at: http://localhost:8000

This showed my HTML page exactly as a real website would appear.

Dealing with Browser Cache#

Modern browsers cache files to load them faster. This includes:

  • HTML files

  • CSS stylesheets

  • Images

Sometimes this means my changes didn’t appear straight away. To fix this, I used:

Cmd + Shift + R#

This forces a hard refresh and clears the cache so the newest version of my code is loaded.

Building the HTML Structure#

The goal was to build a simple profile page containing:

  • An image of myself

  • A header and sub-header with my name and job title

  • A short description

  • A button

  • A list of social links

I used proper semantic HTML tags instead of generic <div> elements:

  • <header> for the top section

  • <main> for the main content

  • <section> for grouped content

I also added useful metadata inside the <head>:

<meta charset=”utf-8”>
<title> My Profile </title>

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 <h1> elements that are inside a <header>.

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 <head>:

<link rel="stylesheet" href="filepath">

This allowed me to write:

<i class="fab fa-twitter">Twitter</i>

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 <body> element. Since most text is inside the body, these rules affect paragraphs, list items, and general content.

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.

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”);

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:

<div class="container">
<div class="card"></div>


<div class="card">


</div> </div>

The container keeps the page content centred, while each card groups related information.

I styled the container like this:

.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:

.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.