Skip to content
OverviewSolutions
7
Comments
7

Kostya Farber 🧟‍♂️

@kostyafarberLondon, United Kingdom220 points

Hey there! My name is Kostya 👨‍💻 and I am a developer living in London. I'm originally from Sydney, Australia 🏝. I love all things technology and using it to solve interesting problems and designing beautiful content.

I’m currently learning...

I am currently learning HTML/CSS, Sass, JavaScript and Java.

Latest solutions

View more solutions

Latest comments

  • Kostya Farber 🧟‍♂️•220
    @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.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 🙂

  • Kostya Farber 🧟‍♂️•220
    @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 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
  • Kostya Farber 🧟‍♂️•220
    @kostyafarber

    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
  • Kostya Farber 🧟‍♂️•220
    @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-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
  • Kostya Farber 🧟‍♂️•220
    @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-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
  • Kostya Farber 🧟‍♂️•220
    @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 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
View more comments