Skip to content
OverviewSolutions
14
Comments
6
Kevin Tatagiba
@kevintata

All comments

  • Kevin Tatagiba•270
    @kevintataPosted over 1 year ago

    Hey! Great job on completing the challenge!

    Try using the style guide to get the correct colors. (background, container, text etc) Check all the border radius' Add padding or a margin to the main white container Get the text down to the right size using margin on it

    Bonus tip: Put the footer (challenge by frontend mentor coded by ritwik murugesh) outside the main container, that way you can get closer to the original!

    Congratulations, Code on!

    Marked as helpful
    0
  • Kevin Tatagiba•270
    @kevintataPosted about 2 years ago

    👨‍💻 Hey man! Great job on the challenge!

    Flexbox is a very powerful and useful tool!

    Some tips I have are 🤔

    👨‍💻 1 - Separate the main from the container id and use a div for that function!

    <main>
     <div id= "container">

     </div>
</main>

    📐 2 - Set display flex to your main and use justify content and align items both to center your project!

    main{
     display:flex;
     justify-content:center;
     align-items:center;
}

    😃🎨 3 - All the exact colors can be found in the style guide!

    (name looks brazilian... se quiser falar em portuguese tô a disposição!)

    Marked as helpful
    2
  • Kevin Tatagiba•270
    @kevintataPosted about 2 years ago

    Hey man, Congrats on the solution!

    I'd recommend checking out flexbox, it'll make this project much easier, put both cards into one container (div) Then set the div to

    div {
      display:flex;
      justify-content: center; 
      align-items: center; 
      flex-direction:row; 
}

    and boom perfectly aligned!

    Marked as helpful
    1
  • Kevin Tatagiba•270
    @kevintataPosted about 2 years ago

    Hey man! Great job on this project, here are somes tips i'd give you

    Border radius on the main white card is off by a little, maybe try 15-20px. Colors on the h1 and paragraph are also wrong, try checking the style guide for the exact references.

    I saw you asked about CSS and class names,

    As for CSS, follow the order of the page. Start with any global or root commands I usually go body, containers, children in the containers, and keep going But the most important thing is that you are comfortable and can locate whatever you need quickly.

    For class names, make them logical and as easy to understand as possible, you don't want to get lost trying to decipher class names while coding

    Marked as helpful
    0
  • Taskin Sultana•190
    @TaskinSultanaSubmitted about 2 years ago

    I have faced width issue in images in flexbox...I'm confused how to place images in this challenge..I have use background property to place the image..but it doesn't getting me the full width and height...Need some solutions for it....and I'd be greatfull if you can give me some feedbacks to improve 🙏

    Stats preview card component using Flex

    3
    Kevin Tatagiba•270
    @kevintataPosted about 2 years ago

    Hey! To put your div and image right next to each other using flexbox, Use Flex-direction: row; That will wake your elements line up next to each other. Hope this helps!

    0
  • ubongedem78•30
    @ubongedem78Submitted about 2 years ago

    I found using certain CSS properties difficult, but hopefully, I implemented them properly in this challenge. This is my second submission for Frontend Mentor. Feel free to criticize & leave comments that can help me further as I go on this path. I am unsure of my alignments and margin usage. I would also like to know some best practices for IDs and classes. I faced some difficulty trying to implement some of the properties.

    Testimonial Card Challenge using CSS and HTML

    2
    Kevin Tatagiba•270
    @kevintataPosted about 2 years ago

    Hey! As for IDs and classes I would recommend being more specific with the names to make your life easier. Also using ID's when being used for a single object and classes when you would like multiple objects to share the same css. Example:

    <div id="daniel-container"> <article class = "verified-graduate"> <article class = "verified-graduate"> <article class = "verified-graduate"> <article class = "verified-graduate"> <article class = "verified-graduate">

    Try naming everything with a class or ID so you can have more control over styling.

    To get the round edges on each box all you have to do is add a border-radius. (Like you did with the profile pictures but not so big) EXAMPLE: border-radius: 8px;

    To make the pictures smaller add a height. EXAMPLE: height: 25px;

    Hope this helps!

    0