Skip to content
OverviewSolutions
14
Comments
6
Kevin Tatagiba
@kevintata

All comments

  • Kevin Tatagiba•270
    @kevintata

    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
  • Kevin Tatagiba•270
    @kevintata

    👨‍💻 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
  • Kevin Tatagiba•270
    @kevintata

    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
  • Kevin Tatagiba•270
    @kevintata

    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
  • Kevin Tatagiba•270
    @kevintata

    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!

  • Kevin Tatagiba•270
    @kevintata

    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!