Okay, so I wanted to mess around with creating a simple profile display, kind of like what you see on social media, but just the basics. I named it “*” because, well, it’s supposed to go on the side of a page.
Getting Started
First, I just sketched out what I wanted on a piece of paper. A circle for the avatar, a spot for the name, and maybe a short bio or status. Nothing fancy.
Then, I created a new HTML file. I’m keeping it super simple, no frameworks or anything, just plain HTML, CSS, and maybe a tiny bit of JavaScript if I needed it.
Building the Structure
I started with the HTML. I made a <div> to hold the whole profile thing. Inside that, I put another <div> for the avatar image, using an <img> tag and setting the source to some random avatar image I found online. Made it a circle using CSS later.
Under the avatar, I added a <p> tag for the name, just hardcoded my name in there for now. Then, another <p> for the short bio. Filled that with some “lorem ipsum” placeholder text.
- created a container div
- added a div and img for avatar
- Hard code a name with a p tag
- Fill bio section with lorem ipsum.
Styling It Up
Next up, the CSS. This is where the circle avatar happened. I gave the avatar <div> a fixed width and height, then used border-radius: 50%; to make it perfectly round. The image inside I set to fill the container, also making that a circle using width and height 100% with an object-fit cover, so I don’t get a stretched-out avatar.
For the name and bio, I just played around with font sizes and margins until it looked okay. I didn’t want to spend too much time on the styling, just wanted it to be presentable.
Making It (Slightly) Dynamic
I thought it would be cool to be able to change the name and bio without editing the HTML directly. So, I added a tiny bit of JavaScript. I’m talking tiny.
Basically, I gave the name and bio <p> tags unique IDs. Then, I wrote a couple of lines of JavaScript to let me update the text content of those elements. It’s not connected to any backend or anything, but I could, in theory, hook it up to a form or something later.
Final Touches
I added some basic styling to make sure all text is readable. A little padding, set the font-family to something common.
Result:
So that’s it! A very simple, very basic profile display. It’s not going to win any design awards, but it was a fun little exercise to go through the whole process, from planning to coding to a (somewhat) finished product. I’m keeping this basic version to mess around with more complicated components.
