@angielxxSubmitted about 2 years ago
- Are my class names appropriate?
- I don't know how to organize CSS codes.
Kostya Farber π§ββοΈ
@kostyafarberAll comments
- @kostyafarberPosted about 2 years ago
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 π
0 - Try adding your CSS document wide variables to the
- @Simply-huMANSubmitted about 2 years ago
How's my website design? How is the code for making this website? Is it complex or easy?
@kostyafarberPosted about 2 years agoHey 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 helpful0 - Try to use relative units such as
- @ayseakimsarSubmitted about 2 years ago
I've struggled a bit to make the icon and the transparent color appear simultaneously. Also, I am unsure about the readability of my code. Other than those, it was a fun and quick project. Feedbacks welcome.
@kostyafarberPosted about 2 years agoHey 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 helpful0 - Make use of the
- @RayAsh37Submitted about 2 years ago
Hi everyone, I have been trying to practice layout. I am getting pretty confident with it. I have skipped the mobile layout as I plan to come later and implement it for all of my other solutions later. This was a bit simple compared to the ones I previously encountered.
@kostyafarberPosted about 2 years agoHey 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 helpful0 - @joshuayumul19Submitted about 2 years ago@kostyafarberPosted about 2 years ago
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 helpful0 - Perhaps try adding some
- @petarchouSubmitted about 2 years ago@kostyafarberPosted about 2 years ago
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 helpful0 - You should wrap your content in a
- @hebrohimSubmitted about 2 years ago
At first ,it was very difficult for me to use flexbox for a parent tag and its child tag, I had to visit w3schools to get better understanding of how it works
@kostyafarberPosted about 2 years agoHi 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 helpful0 - Try to remove any code that isn't being used anymore. It makes your code more readable. (e.g,
