Skip to content
OverviewSolutions
40
Comments
55
P
Katrien Schuermans
@katrien-s

All comments

  • P
    Kiara•220
    @Kiara523Submitted about 1 month ago
    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-sPosted about 1 month ago

    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
    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 2 months ago

    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.

    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 2 months ago

    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
    0
  • P
    SKszymek•180
    @SKszymekSubmitted 2 months ago
    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-sPosted 2 months ago

    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
    0
  • ephraimdjeket•270
    @ephraimdjeketSubmitted 2 months ago
    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-sPosted 2 months ago

    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
    1
  • davilucas•80
    @Davilucca22Submitted 2 months ago
    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-sPosted 2 months ago

    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
    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted 2 months ago

    This looks good. But, can you add in the correct font-family on your h1 and price? And fix the border of your button? While you're at it, add cursor: pointer to get the pointer when hovering the button.

    Happy coding!

    Marked as helpful
    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted 2 months ago

    This isn't finished right? It sure doesn't look like the design. Was this intended?

    Your HTML reads ok. The CSS is readable to, but since it's incomplete, it's hard to say what it would look like once you finish the project.

    Anyhow, I see you've been adding a width: 100vw on your body. That's not necessary. It will always be 100% iof your screen-width, unless you change it. But there is no need to change width of a body-element.

    Happy coding!

    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted 2 months ago

    This looks good. Not that much to add actually.

    But, if you want to up your responsiveness. There are a few ways to no longer need to adjust your elements-width in a media-query but do it in one line on the element itself using min or max. To get yourself started, check the video 'These CSS PRO Tips & Tricks Will Blow Your Mind!'

    Which means you're .profile-code could end up looking like this:

    .profile {
  width: min(327px, 456px);
}

    Since you had added a 3rd width, you probably want to use clamp() to define your width. It's also being explained in of the video's on that YouTube-profile.

    Happy coding!

    Marked as helpful
    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted 2 months ago

    Honestly, no matter which screensize I look at your project, it's all messed up. When I look at your code, I have tons of questionmarks and 'why did you do it like this?' popping up. It's very hard to find a where to start giving you feedback.

    • You centered the .main-card using position:absolute. You could do that, if you know how positioning works. But it is also one of the hardest things to learn as a beginner so it's advised to use it as least as possible. Tip: The fastest way to center vertically & horizontally with CSS

    • A lot of your elements have a transform which you've used to put them in position. You could do this a lot more simple using padding on your main-card.

    • If you declare the font-family on your body, there is no need to declare it anywhere else again, unless the item has a different font-family.

    • When writing HTML, id's are most commonly used for when you need access to that element in JavaScript. For CSS, use classes

    Difference Between IDs and Classes While classes and IDs may seem similar at first glance, they have distinct purposes and use cases:

    Classes: Classes are designed to group multiple elements together. They allow you to apply shared styles or behaviors to various elements throughout your webpage.

    IDs: IDs, are used to uniquely identify individual elements. They provide a way to target specific elements for styling or manipulation.

    We've all been here, messing up and being a bit clueless. We only learn by making mistakes. So surely don't give up, because coding is fun.

    Have a few more lessons and try again. One of the better online tutors is Kevin Powell and he just released an HTML & CSS for Absolute Beginners

    0
  • Mateo•50
    @lordymarcSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Today I learned how to create a README, Github Pages and Figma (sorta kinda). Nicee. Thanks for reading.. I'm too insecure to hear any feedbacks and tell everyone and their mama where i screwed up bye

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

    Life has been rough lately...mmmh yeah

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

    Everything one could think of

    QR code component using rare skills

    2
    P
    Katrien Schuermans•1,400
    @katrien-sPosted 2 months ago

    Give yourself a pat on the back, cause this looks good. Your code is nicely structured and readable. Very clean.

    Though I did wonder why you used row-gap on your body until I noticed it was to create a gap between the container and attribution. You could've used a simple margin-top or -bottom here. Though no big deal in this little exercise.

    Happy coding!

    Marked as helpful
    1
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 1 year ago

    Check this Kevin Powell video: Are you using the right css unit and have a browse through his more recent vids.

    1
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 1 year ago

    It has nothing to do with using rem. As you're supposed to be using them when you want to make things responsive. This seams to me to be the culprit: width: 17svw; on your #qr. Which on smaller screens you give a 75vw. This means on tablets and smartphones, the qr will take up about 75% of the screen width. But on desktops, it will shrink down to 17%. What you need to do here is, give your div id='qr' a max-width. There is various ways you could write this, but an example could be:

    * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#qr {
	width: 95vw;
	max-width: 350px;
	margin: 0 auto;
}

    Here we tell the div you need to be 95% of the viewport, until your maximum 350px wide.

    Are you familiar yet with how the box-model works in css? CSS Box Model And what the purpose is of this code I added:

    * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

    Also, don't use div to write headings or text. There are html-tags especially for text. HTML Text Formatting

    Marked as helpful
    1
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 1 year ago

    Answer to your question: don’t put all your li-content in a span. Just wrap a span around the words that need to be bold. All the rest of the text can just be inside the li: ´<li><span>Total: </span>Approximately 10minutes</li>´ If nothing needs to stand out, don’t use span. It is ok to have text inside an li-element. Also in the <ol>, there is no need to type the numbering yourself. It happens automatically.

    This is a helpful article: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/

    Marked as helpful
    1
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 1 year ago

    Desktop looks good. Mobile is where things really go wrong. I remember myself struggling quite some with this exercise, so don't feel down for not entirely achieving the result. It's part of the learning process.

    It seems to me you got yourself in a lot of trouble with the extensive use of setting widths and heights using %. Are you familiar with working with flex or grid?

    As for the image, you have been given 2 images: one for mobile, one for desktop. You need to use those. Have a look here to understand how te be using them: Responsive images

    I don't understand why you set this width & height on your container. If you're going to use full-width, you don't need to specify it, as your webpage will always take up full-width. The height might be more usefull on your body or html-element, if you're using it to center your container.

    .container {
  width: 100vw;
  height: 100vh;
}

    Also specifiying height on your main, seems overkill. A flex-element will always take up all the space it needs. And it's very rarely necessary to set a height.

    Are You Making These CSS Height Mistakes?

    One of the most common CSS issues people run into

    Try again. Look into how using flex or grid. Whether it's necessary to set width and height. And have a little round of applause for yourself when things look good. Happy coding!

    Marked as helpful
    1
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 1 year ago

    Hey, what you did looks good. Though when you finish an exercise, fill out the readme-file as instructed. It's important to create a habit from the beginning, as readme-files are vital later on in your career.

    • One thing that I immediately noticed, is the use of nothing but <div>s in your html, beside the <Main> (which has no need to be capitalized). If working with text, use the correct html-tags. As it's important to write your html readable for screenreaders. It's vital to use semantic html correctly. (HTML tags for text)[https://flaviocopes.com/html-text-tags/]
    • Why did you split up your css in 3 files? For a small project like this, there's no need.
    • You declared a cursor: pointer on the hover-state of .course. You can move that to .course itself.
    • What is this url-reference doing here? cursor: url(/assets/images/cursor.png), pointer; (The assets folder won't open on GitHub so I can't see what you're linking to)
    • The font you used, 'figtree', hasn't been installed?
    • I suppose by using margin: 100px 545px 100px 545px; on your <main> you were trying to center main in the middle of the page? (How to center a div horizontally)[https://www.youtube.com/watch?v=ULVu2VNM_54]
    • There's also no need to set a width on your body. Your body will always want to take up the full width of the browser window.

    There's room for improvement, but this sure already looks good. It shows you have an eye for design vs. code. Have a look at what could be improved here and move on. There's lots more fun projects waiting for you. Happy coding!

    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted over 1 year ago

    Hi, this actually looks good. I've been going through your code and will point out some peculiarities I found.

    On body you set a font-family: Inter, but declare later on a different font for your h1 and p. Since they are the only text-elements, why wouldn't you declare font-family: 'Outfit', sans-serif; on your body?

    Also, why did you set font-size:90%;? But on h1 you set font-size in px. As for font-sizes, most commonly people use rem-values. This is a responsive unit, that allows the user who's adapted its displat size, still see the font-size as intended. This 90% kind off does that, but it's not the correct unit to use here. Kevin Powell - Are you using the right CSS units?

    Try to be consistent. Your main has a padding:16px; while on your h1 you write padding:1.1rem; Just write it as rem/em everywhere.

    I don't see an issue with you having used display: block. The item sits fine in the middle of the page.

    I'd see, all good besides a few minor issues.. But this looks promising. Keep coding and enjoying.

    Marked as helpful
    0
  • P
    Katrien Schuermans•1,400
    @katrien-sPosted about 2 years ago

    Code looks decent and clean. Very well organised and easy to read. Your page however completely breaks up on tablet-size. Elements go of position, background-image overlaps the text,...

    One advice to prevent this in the future: go for a mobile-first approach. It's a lot easier and it makes more sense when you're moving in your code from mobile to desktop, you always add stuff. You keep an overview. When you go from desktop to mobile, you don't only need to delete stuff, but also rearrange code. Giving yourself a lot more issues to solve.

    Marked as helpful
    1