Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions7Comments7

All comments

  • Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Posted

    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.html has 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 BEM convention. 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
  • Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Posted

    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 rem or em. They are more versatile and are more responsive than px units.
    • 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

    0
  • Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Posted

    Hey there!

    Really great solution 🚀 I think your code is well laid out and structured.

    A couple of suggestions:

    • Make use of the main tag. It is good practise to use semantic HTML to make the structure of your page more readable. Every page should have a main tag.
    • 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

    0
  • Ashray• 110

    @RayAsh37

    Submitted

    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.

    3-column-preview-card-component-main

    #vanilla-extract

    2

    Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Posted

    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-height on 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

    0
  • Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Posted

    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-height to the p content. 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

    0
  • Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Posted

    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 main tag as this represents the 'content' of your page see here
    • You don't have to set the @font-face everywhere! 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+4 on 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

    0
  • Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Posted

    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 alt tags for your images. It improves accessibility.
    • Finally try using padding on your divs to control how the text breaks when divs are resized. Adding br may not be the best approach here! Just a few tips, hope it was helpful and keep on coding!

    Marked as helpful

    0