Skip to content
OverviewSolutions
9
Comments
8
Mary Njoroge
@Maryahcee

All comments

  • Ukan•20
    @ukanleiSubmitted over 2 years ago

    This simple card component was a lot more challenging than it looked. One thing I struggled with the most in this project was organizing my stylesheet. I find myself going back and forth between my codes and mock-ups, thinking I have finished only to realize I have missed some essential styling components. Ultimately, this disorganization has affected my workflow and quality of work.

    Questions:

    1. What are the standards or best practices when it comes to organizing CSS and making it more manageable?
    2. How can I reduce repetition in my CSS?

    Card Component with HTML and CSS

    2
    Mary Njoroge•150
    @MaryahceePosted over 2 years ago

    To avoid repetition in CSS I use class with same name when there are several elements that need same styling design. Also breakdown sections if it's Navbar section check to see what elements have similar design and give them same class name.

    Finish designing one section at a time it makes the work easier and you won't have to keep repeating your self. Cheers! Keep coding!

    1
  • Ukan•20
    @ukanleiSubmitted over 2 years ago

    This simple card component was a lot more challenging than it looked. One thing I struggled with the most in this project was organizing my stylesheet. I find myself going back and forth between my codes and mock-ups, thinking I have finished only to realize I have missed some essential styling components. Ultimately, this disorganization has affected my workflow and quality of work.

    Questions:

    1. What are the standards or best practices when it comes to organizing CSS and making it more manageable?
    2. How can I reduce repetition in my CSS?

    Card Component with HTML and CSS

    2
    Mary Njoroge•150
    @MaryahceePosted over 2 years ago

    Hi the card looks good. At first someone struggles with finding the best working flow. However I have some tips that have helped me become organized while working on my projects. First look and analyize the design and make a sketch of how I will approach the design. Second write down all sections (eg. Navbar, Main, footer.) in the design and what I will use (eg flex or grid) to make them. If you do this routine in your first projects you will notice that in the future you won't necessarily have to do it it comes naturally with more practice. I hope this helps. Happy coding!

    1
  • Eduardo Pinheiro•20
    @EduMPinheiroSubmitted over 2 years ago

    I had some difficulties on this one. Align the icons with the text, I couldn't do it put a circular border around the avatar image

    But I'm really glad I could do this!

    HTML CSS NFT preview card

    2
    Mary Njoroge•150
    @MaryahceePosted over 2 years ago

    To add a divider line before the avatar add a div with an <hr> element, then style it as follows: hr { width: 80%; color: white; }

    0
  • Eduardo Pinheiro•20
    @EduMPinheiroSubmitted over 2 years ago

    I had some difficulties on this one. Align the icons with the text, I couldn't do it put a circular border around the avatar image

    But I'm really glad I could do this!

    HTML CSS NFT preview card

    2
    Mary Njoroge•150
    @MaryahceePosted over 2 years ago

    Hi Nice work here! To put a circular border around the avatar image Add this border-color: white; border-radius: 50%; border-style: solid;

    0
  • Emma•320
    @emjogaleSubmitted over 2 years ago

    Not sure if I have used the background property correctly to position the background image. Any advice on this welcome!

    Responsive page with flexbox layout

    2
    Mary Njoroge•150
    @MaryahceePosted over 2 years ago

    @emjogale nice to know you managed. Happy coding.

    0
  • Emma•320
    @emjogaleSubmitted over 2 years ago

    Not sure if I have used the background property correctly to position the background image. Any advice on this welcome!

    Responsive page with flexbox layout

    2
    Mary Njoroge•150
    @MaryahceePosted over 2 years ago

    Hi, the background looks good to the eye , however you can add center/cover after no repeat. Nice work!

    1
  • Rina•100
    @dodrinSubmitted over 2 years ago

    Hi, Im newbie coder who want to become front end dev. In this project I have a few difficulties that I couldn't figure out.

    1. Overlay is somehow not matching with the image position.
    2. I want the card to be vertically centered when opened with smaller display.

    I appreciate your help and feedback on my project. Thanks!

    NFT preview card component

    6
    Mary Njoroge•150
    @MaryahceePosted over 2 years ago

    Nice work. .container { height: 200px; position: relative; border: 3px solid green; }

    .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } Try this for smaller screen. Make sure you give the container a position of relative first.

    Marked as helpful
    1
  • Mary Njoroge•150
    @MaryahceePosted almost 3 years ago

    Hi, nice work. You should also add the hover state it should look like the attached image under active-state.

    0