Simple Personal Page

Create a simple personal page with your name, photos, objective, and contacts.

The goal

A simple personal page that can be used as your online business card. Add the image background, or you can use an additional image to be added.

What you will learn
  • How to create a basic HTML/CSS project
  • how to add the external style sheets
  • how to use the background images, links, fonts
  • how to make a page responsive.
Preliminary material

Before you start, get familiar with the basics of HTML and CSS (if you never tried them). We found these resources pretty clear:

This is also a good short introduction to HTML: 

We use the Fontawesome version 5.1 for icons and Google Fonts for the font.

For the brand icon styles (brand colors) please use this CSS file: 

Additional ideas

Play with images, fonts, colors, try to implement any crazy ideas. You also can decide differently on how your page would look for different devices.

Acceptance criteria
  1. The project should be implemented solely with HTML and CSS, no frameworks like Bootstrap or Tailwind, or any other, is allowed.
  2. The final page should have at least one image as a background, or just as an image.
  3. The final page should have at least one link.
  4. The final page should look well on any device (but it's up to you, how exactly).
Step 1. The project base
  1. Create a folder with the project name (for example, Tables-1)
  2. Add the images folder inside
  3. Add several images of different sizes into the images folder, as well as a square png picture that will be your favicon.
  4. Add the index.html and styles.css inside
  5. Create the simplest HTML structure in the index.html file (<!DOCTYPE html>, html, head and body tags)
  6. Add the link to your styles file and favicon file to the head.
  7. If you want to use Google fonts, add the corresponding links too (see their website for details).
Step 2. Background
  1. Add the background to the body or insert a block (div) inside. It's up to you how to create the background: using an attribute or an image tag.
  2. Make sure the picture looks good on different devices.
  3. Use media queries if necessary.
Step 3. Info panel
  1. Add the info panel. You can position it on the left or on the right
  2. Fill it up with necessary information: the title, subtitle, text, icons (we use Fonticons).
  3. For icons, color use the styles file mentioned in the project's description.
  4. Make sure the information is visible on different devices.
  5. Use media queries if necessary.
Step 4. Polish the page
  1. Improve the text size for each text element
  2. Add the color line(s) if you want
  3. Provide the icons to look great: add the hover background and rounded corners
  4. Make sure the page looks good on any devices.
Share your experience with this project, help others, ask and answer questions, get feedback
Mattias Grante
Dec 26, 2021 01:08:18
I made it, finally!

You can't believe it but I spent a week on this simplest ever task.

Let me show you what I did. I didn't create a Github account yet so I just attached the screenshots right here:

I know it's not a brilliant webpage but it IS something to me.

About me: I'm a mechanical engineer (well actually, just a technician) but thinking about becoming a developer. I'm 41 years old. I have some background (worked with C++ and Qt in the past), also had several courses in Java in college but now I don't remember anything.

I found the tutorials mentioned in the description of this project super easy. I did all of them on-they-fly just in several days. But then I started my own page from scratch... OMG how hard it was. I turned out I didn't remember anything, any single word or tag. I had to read everything again and I found I saw many things like I saw them for the first time. LOL. 

CSS was another challenge. Again, looked super-easy in the beginning but in practice... just nothing worked. 

Finally, I've got what a wanted (well, up to 70%) but I'm pretty happy with it.

Dec 13, 2021 17:59:16
How to embed css

Hi, i have  a question on embedding styles. Sorry if i use the wrong term. I just saw recently somebody used such code:

<div style="width: 65%; background-color: #6533de"></div>

I wonder if this is a good style or I would use some other approach?


Sergy Dymch
Nov 27, 2021 18:52:36
What should I do to make it responsive

I started working on this project but I don't know how I can use media queries. Even if I can provide some styles for one width and another style for another width, how in practice I use it? (Sorry for my English, I'm not native, and I will ask more questions).