Submitted about 3 years ago

Profile Card with CSS Flexbox

Maksym Novikov• 60

@MoranGuy

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would like some feedback on overall HTML/CSS layout. Should I divide page into groups of div's and style them separately using flexbox model, or should I rely more on position: relative with some pixel tweaking? Creating many div's feels bad and counterintuitive for some reason.

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted about 3 years ago

Hey about your question in position: relative well, we usually use them when we want a child element of it, to be relative to its parent, especially when the child is absolute. If you want more pixel tweaking like adjusting right, well you could just make use of transform: translate property, to align your element in the x and y-axis, that way you could avoid positioning it relative. Well nothing wrong with that, margin also is one way of aligning. One more thing, upon seeing your markup, we only use 1 h1 tag per page and I saw you use a few of them and that is not recommended. 1 h1 per page so that semantic of our markup will be clear ^^

Maksym Novikov• 60

@MoranGuy

Posted about 3 years ago

@pikamart Thank you kindly for your suggestions! So, if it's considered a bad practice to use more than 1 h1 element per page, should I better use p with span for styling? I'm talking about 80K 803K and 1.4K text in this matter.

Raymart Pamplona• 16,140

@pikapikamart

Posted about 3 years ago

@MoranGuy div is just fine since p is for paragraphs right but we can use of course. For span well I don't usually use span when I want to style an independent element, I use span when there is part of my paragraph that I want to be style. But still you can use them^

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted about 3 years ago

Hey, Maksym Novikov! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this one! 🙌

I'd like to suggest using CSS background images to add and position the background images in this challenge. It'll keep those images out of your HTML, which will make your markup slightly cleaner, and I think it's easier to manage the images and CSS background images, then. 😀

As a tip—if you use viewport units (such as vw and vh) to position the background images, you can position them in such a way as to minimize the change in their position when the screen is resized. 😉

Keep coding (and happy coding, too)! 😁

Maksym Novikov• 60

@MoranGuy

Posted about 3 years ago

@ApplePieGiraffe Thank you for commenting! Images were a little hard for me to work with on this project. For your suggestion: can I add more than 1 background image to an element? And if I can, how can I style them separately? Could you please elaborate more on this subject? =)

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted about 3 years ago

@MoranGuy

Sure thing! 👍

You can add more than one background image to an element using CSS background images by separating each image with a comma:

background: url(path/to/image-1), url(path/to/image-2);

From then on, you can separate different sets of other background-specific with commas, too, to style each of the background images separately:

background-size: 100%, 50%;    /* 100% is for the first image, 50% is for the second image */

Check out this great article from CSS Tricks or this article from Ahmad Shadeed in order to learn more about using multiple CSS background images.

Hope that helps! 🙂

Maksym Novikov• 60

@MoranGuy

Posted about 3 years ago

@ApplePieGiraffe Wow, thanks a ton! I didn't know that. I'll be sure to try and implement that in my future projects =)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord