Getting Started with CSS v2

Chapter 3: About Me section

Beautiful CSS always starts with great HTML markup... still! In this chapter, we'll mark up our About Me text and add some basic styling, an image, and make it all responsive.

Part 1: Marking up the HTML

I've given you some starter text, SVG images, and a photo. How would you mark this up based on what you understand is the purpose of this text?

I have given you icons for LinkedIn, Github, Bluesky, and email. If you want different icons, find a SVG source online and substitute. I got my icons from Fontawesome, but there are other sources if you prefer.

Part 2: Basic CSS styling

Image showing styling for headings, text, background, and icons.

We start with basic styling for our site including headings, fonts, body background, and our SVG icons. The H2 text should be blue (windsurfing), while the other text should be black (onyx). The Inter font should be used throughout. For now, style this as all text and for a mobile/tablet screen.

Part 3: Making the design responsive

image of the navbar at mobile dimensions, showing all text and images centered. image showing the text and social icons on the left and the image on the right.

We'll need to add a few HTML elements to our design to group the text and social icon bar and to establish parent-child relationships for our grid-based layout. Remember to use the little arrows by each line number in CodePen to flatten your HTML and make it easier to read the relationship between HTML elements when styling. We'll include only one breakpoint, which works for this design. You could easily have more breakpoints if you need more for your designs or your preferences.