Skip to content
OverviewSolutions
7
Comments
4
ValouZ
@ValouZ

All comments

  • ValouZ•245
    @ValouZPosted almost 4 years ago

    Thanks mate i'll check that

    0
  • Pauline Moss•35
    @PaulineMossSubmitted almost 4 years ago

    This is my first time actually using CSS by myself. I was kind of struggling with the stats at the bottom. Feedback very welcome! 🤞

    Profile Card Component

    2
    ValouZ•245
    @ValouZPosted almost 4 years ago

    Hey Pauline,

    I understand your problem and you will resolve it very quickly trust me. I don't know if you know the display: flex; property but if you don't you should. On your project you used position: absolute; to place evrything but imagine if you have a whole page with a lot of different items. It won't be very easy to manage everything.

    With flexbox, you will discover a whole new wonderful world. Go check those two links to learn it and go check the project i did and how i used flexbox after if you didn't understand.

    • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ to learn the theory
    • http://flexboxfroggy.com/ to practice on a funny game

    I hope it will help you and make everything easier for the next project

    See ya

    2
  • em•70
    @emityiskaSubmitted almost 4 years ago

    My first time ever project. I really struggled with the background part. Please advise on how you make it more responsive/ just on how my code looks like in general(whether it's readable/efficient).

    Profile card component

    2
    ValouZ•245
    @ValouZPosted almost 4 years ago

    Hey,

    For a first shot, that's a really great project.

    • The way i places the bubbles in the background is to use properties top or bottom and left or right but the way you placed them is a good way too. I recommende you to go check those properties maybe it would have help you.

    • Instead of placing a <hr> tag on your bottom card section, you should have done a border-top: 1px solid rgba(150, 150, 150, 0.5); on your div. The result is the same but you use less html and it's easier to place. Not a big thing.

    • I think that the classes followers, likes and photos on your social media section is useless because the three part havev the exact same properties. You used display: grid; to place them bu i think that you could have jump on the display: flex; solution. Everything is done automatically.

    • You can check this site : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ --> trust me on this one

    • And to practice go on this one : http://flexboxfroggy.com/ --> hope you'll enjoy

    If you don't know flexbox, learn them and you will discover a whole new world of hapiness.

    Have a good day and if you want you can go check my version

    3
  • Agata Sokołowska•50
    @agatablazejewskaSubmitted almost 4 years ago

    I'd like to know:

    • is it possible to structure the HTML and CSS in a better way?
    • are there any CSS tricks I could have used for this assignment?
    • your opinion overall :)

    Profile card using Flexbox and BEM

    3
    ValouZ•245
    @ValouZPosted almost 4 years ago

    Hey Agata!

    • I just finished the same project yesterday and i think your version very nice but there is some issue about your site.

    1. The card is way too big on my desktop. It is loading like if it were zoomed, i only see the top of the card. I think there is a problem with your media query because under 1400px it is working very well.

    2. The way you structured your HTML is close to mine and i think its the good solution but you used some tags the wrong way imo. Header, main and footer should be the header, the main and the footer of the whole page and not of an element. Imagine you want to multiply your card. You should not have 2,3,.. header, main and footer. They should be unique. Replace them by simple div

    But if we forget that little structural problem, your HTML is very good.

    2