@angielxx
Kostya Farber đ§ââī¸
@kostyafarberAll comments
- @kostyafarber
Hey there! đ
Really great solution. It looks pixel perfect! Your CSS is very structured and looks clean.
Just a couple of suggestions:
- Try adding your CSS document wide variables to the
:root. It's best practise and looks a lot cleaner. - Make sure to remove any comments! The
index.htmlhas some commented out code. It will make it easier to read and more 'production ready'. - If you want follow a convention for naming your CSS look at the
BEMconvention. They provide an intuitive way to name your elements to make their meaning semantic. Check it out here.
Really great work though! đ
Happy coding.
If you found my comment helpful please mark it as helpful đ
- Try adding your CSS document wide variables to the
- @Simply-huMAN@kostyafarber
Hey there! đ
Really good solution, I like the way your code is laid out!
Just a couple of suggestions:
- Try to use relative units such as
remorem. They are more versatile and are more responsive thanpxunits. - Try use a css reset! It will make your life easier and remove any pesky default settings. (e.g here)
- Perhaps add some whitespace between your css declarations. It will make it easier to read.
body { font-family: Outfit; margin: 0; padding: 0; box-sizing: border-box; background: hsl(212, 45%, 89%); } main { margin: 30px; display: flex; justify-items: center; align-items: center; }- Delete any comments! This will make your code look a lot cleaner whilst also making it easier to read.
Great work on this! đ
Happy coding.
If you found this helpful, please mark it as helpful đ
Marked as helpful - Try to use relative units such as
- @ayseakimsar@kostyafarber
Hey there!
Really great solution đ I think your code is well laid out and structured.
A couple of suggestions:
- Make use of the
maintag. It is good practise to use semantic HTML to make the structure of your page more readable. Every page should have amaintag. - Delete your comments from your CSS! It will make it easier to read and reduce unnecessary code :)
- Try using a pseudo element for the hover effect. You can use something like
::before. This will reduce and declutter the html.
Overall really good stuff.
Happy coding!
If you found my comment helpful please mark it as helpful! Thanks đ
Marked as helpful - Make use of the
- @RayAsh37@kostyafarber
Hey there!
Really great solution. I like how clean and organised your css is.
Just a couple of suggestions:
- I would suggest perhaps using a css reset and importing it into your css. It will speed up your development and remove some annoying default settings. look here for more info.
- To get the design looking even more pixel perfect you could reduce the
line-heighton the card content.
Overall really good stuff.
Thanks, happy coding!
if you find my feedback helpful, please mark it as helpful. Thanks :)
Marked as helpful - @joshuayumul19@kostyafarber
Hi there!
Really great solution. Your SCSS is very well organised.
Just a couple of suggestions that you might find useful:
- Perhaps try adding some
line-heightto thepcontent. It would achieve the look in the design photo more closely. - Look into using relative units for your sizes
rem,em. They make for more responsive design across different browsers and devices, check out this article
Overall very strong solution with great code.
Happy coding!
If you find this solution helpful, please mark it as helpful :)
Marked as helpful - Perhaps try adding some
- @petarchou@kostyafarber
Hey there!
Awesome solution. It looks great!
Just a couple of points of feedback if you don't mind!
- You should wrap your content in a
maintag as this represents the 'content' of your page see here - You don't have to set the
@font-faceeverywhere! You can just go on google fonts and use the@import url()in your css. - I would analyse the pixel size using your computer on the image file and set your container to that size to achieve pixel perfect proportions as close to the image as possible (e.g
ctrl+alt+4on a mac) - Consider using a CSS reset to remove some annoying default settings (e.g)
Really good solution!
Happy coding!
if you found my feedback helpful please mark it as helpful :)
Marked as helpful - You should wrap your content in a
- @hebrohim@kostyafarber
Hi there!
First of all well done! It looks great. Just a few suggestions
- Try to remove any code that isn't being used anymore. It makes your code more readable. (e.g,
/* background-color: red; */on line 41 in your CSS file. - I would suggest setting your colours in variables using
:root, and then applying those to your elements. If you were to ever change them you would only have to do it in one place! - Try to add
alttags for your images. It improves accessibility. - Finally try using
paddingon your divs to control how the text breaks when divs are resized. Addingbrmay not be the best approach here! Just a few tips, hope it was helpful and keep on coding!
Marked as helpful - Try to remove any code that isn't being used anymore. It makes your code more readable. (e.g,
