Skip to content
OverviewSolutions
40
Comments
55
P

Katrien Schuermans

@katrien-sBelgium1,400 points

Transitioning into Front-End Development after a successful career as a Senior Graphic Designer with nearly 20 years in print-centric industries.

I’m currently learning...

CSS/HTML/JavaScript and React

Latest solutions

View more solutions

Latest comments

  • P
    Kiara•220
    @Kiara523
    What are you most proud of, and what would you do differently next time?

    It was fun making it. I think I can do better with class names, I want to improve on that. Also there are different ways to approach this challenge.

    What challenges did you encounter, and how did you overcome them?

    I didn't encounter major challenges, but I've learned more about grid.

    What specific areas of your project would you like help with?

    I want to improve naming classes in html. I think that a good markup helps a lot.

    time-tracking-dashboard HTML CSS Javascript

    1
    P
    Katrien Schuermans•1,400
    @katrien-s

    Not much to add as this looks good. Though, watch out for typing errors. You managed to spell social in various ways.

    Having myself also just finished the exercise it shows pretty well how different JavaScript-approaches lead to the same result.

    Happy coding!

    Marked as helpful
  • P
    Katrien Schuermans•1,400
    @katrien-s

    Not that much to add actually. Your solution looks really good. Are you going to continue writing your js and css inside your html?

    As for your image, look into how to use <picture> to have responsive images instead of showing and hiding mobile and desktop image.

    The padding on your form-container is not equal on both sides. You have set a padding-inline: 3rem 2rem which really shows on mobile view. But it also gives too much white space on desktop view.

    There's something really strange here. When I look at your code on Github and the code of your webpage, I see 2 different solutions. Your webpage does not have inline styles and JS. It shows the too much padding on 'form-container' while on Github it says the padding is on detail. Are you copying in other people's webpages? If so, I stop giving feedback here as I am not looking at your solution but someone else's.

  • P
    Katrien Schuermans•1,400
    @katrien-s

    Your solution is like looking at a squeezed version of the exercise. There's a few things that I immediately to be odd.

    • Don't set a width on body. Your body-element is that entire visible in your browser. That always needs to be a full 100%, which it is by default. And which you don't change. In this exercise you did it obviously to have the component have the right width. But, that component is in your main-element. Guess what is ok to do with the main-element... If you want to change the width do it here.
    • use width on your img instead of max-inline-size, and add an object-fit to have your img fit nicely. Read the article on MDN:
    img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    Did you have the Figma-file to work with? As your typography for your h4 element seems a bit off. Besides, having an h5 on the author-name isn't really correct. You could write this as a p, but add a bold-class to it.

    This is a tough exercise. I didn't read through your javascript because it actually looks really complicated while this is a beginners-exercise. So I'm wondering why your JS-solution looks this complicated. Why are you not using the camelCase naming convention?

    If you pay a bit more attention to the design I think you're well on your way to be a good developer. Keep on coding and more importantly, enjoy it :D.

    Marked as helpful
  • P
    SKszymek•180
    @SKszymek
    What are you most proud of, and what would you do differently next time?

    I'm proud of my self that I end up with that result. Next time I have to learn more about responsive design. I make It but I'm felling not comfortable with It.

    What specific areas of your project would you like help with?

    That's my first landing page so I would be gratefull if somebody check my code. I need help with queries and withds. To be honest I don't know when exacly use percentages and when max-width. Thank's for any advices.

    Resopnsive meet landing page using css grid/flexbox

    1
    P
    Katrien Schuermans•1,400
    @katrien-s

    Hi, you nailed it! There's some little things here and there, but overall looks good. Also your HTML reads very well organized. Same for your CSS.

    Small error in your organisation of HTML could be that you entered your header and footer in main. It's actually possible and sometimes done. But, for HTML to be semantic and in terms of accessibility, you also need to have a header and a footer outside of main. A basic HTML-structure looks like

      <header></header>
  <main></main>
  <footer></footer>

    As for your question about responsiveness. I do see looking at your code you're a bit lost in all the information. First of all, whether you use max-width or min-width depends on whether you style starting mobile first of desktop first. You've been using a lot of media-widths, which is not that necessary. You can get by by using 2 or 3 settings.

    You've been indeed using percentages a lot. I did that too when just starting out, but it's again not always necessary. You actually don't need to declare a width that often.

    Kevin Powell has this awesome course on Responsive Layouts. This is going to help you a lot.

    Marked as helpful
  • ephraimdjeket•270
    @ephraimdjeket
    What are you most proud of, and what would you do differently next time?

    This challenge really helped me understanding grid better. Will try and use grid more often.

    What specific areas of your project would you like help with?

    Do you see where I can improve? Please share :)

    Responsive Testimonials Grid Section

    1
    P
    Katrien Schuermans•1,400
    @katrien-s

    Not much to add, cause this looks good.

    Though, did you use the correct font-sizes? Cause the text is really small and especially on mobile view. And this line: .testimonials-container article:nth-of-type(3) .testimonial-content .graduate-wrapper small of which there are quite a few, that is unnecessarily clunky. Why not create a text-dark or a text-light class and add it to these small-texts. Because once you start typing out 5 selectors to change a text-color, you should rethink and find a more logical solution to what you're doing.

    I don't immediately have more to add cause your solution rocks. Happy coding!

    Marked as helpful
  • davilucas•80
    @Davilucca22
    What are you most proud of, and what would you do differently next time?

    Do que você mais se orgulha?: em conseguir fazer o projeto em pouco tempo

    o que faria diferente na próxima vez?: implementaria javascript.

    four cards

    1
    P
    Katrien Schuermans•1,400
    @katrien-s

    It looks good. But, there's quite some oddities in your code.

    In your header you have to h1-titles. Even if it's possible to write that, it's very bad practice. There can only be 1 h1 on your html-page and it has to be the main title of your page. It's tough to know which one it'd be here. You can style any text-element to look like an h1 without it being it.

    You've put a display: flex on your section. But it only has one child, a div so it is of no use here. Why did you use a flex? What did you want to achieve?

    As for the grid on your main, consider using template-columns: repeat(4, 1fr) instead of 33.33% 33.33% 33.33%. It's actually the same, but it will save you some math and increase readability.

    Why did you set width on your text-elements? Why is there a overflow-x: hidden in your css-reset?

    I think, eventhough it actually looks like it should, you might want to go over your code again. Move your image-div outside the div with all the text. What does section look like then, with and without display: flex. Remove the width: 100% on your .image. You want that to be on the actual img, not on its parent. Just rethink and shuffle the elements and see what happens.

    I know. it's annoying because you finished this exercise and it looks good. But once you move on to tougher exercises, you'll be running in 'CSS is hard'-moments and the sooner you address these moments, the easier writing CSS becomes.

    Don't let this discourage you. The code you've written is very structured and readable. You followed the design and created exactly what it should look like. Which is awesome. So, continue coding, you got this.

    Marked as helpful
View more comments