07ritwik• 10
@07ritwik
Submitted
HI I am noob to this trying to learn so plz.. share your feedback😇 and guide me❤
Kevin Tatagiba
@kevintata
All comments
- Kevin Tatagiba• 270
@kevintata
Posted
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 - David ferreira• 40
@davidferreirad1
Submitted
using flexbox for the first time, I couldn't make the site responsive, however, I'm studying to improve.
Kevin Tatagiba• 270@kevintata
Posted
👨💻 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 - Gehad• 70
@Gehadmo2
Submitted
Give me your feedback please
Kevin Tatagiba• 270@kevintata
Posted
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 @tartufu
Submitted
I am unsure on how to properly organise my css and class names.
This is a small project, but i recognise as projects get more complex it will become a lot messier.
Kevin Tatagiba• 270@kevintata
Posted
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
@TaskinSultana
Submitted
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 🙏
Kevin Tatagiba• 270@kevintata
Posted
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
@ubongedem78
Submitted
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.
Kevin Tatagiba• 270@kevintata
Posted
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
