Skip to content
OverviewSolutions
38
Comments
44
P
Katrien Schuermans
@katrien-s

All comments

  • Katrien Schuermans•1,210
    @katrien-sPosted 9 months ago

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

    1
  • Varga József Márk•10
    @markvarga21Submitted 9 months ago
    1. I am always struggling with the responsiveness of a page, because okay, in this solution it looks fine on screens having a width of 400px and 1440px, but other than that, it just almost crashes the whole page. Is it because I use the rem relative units of CSS?

    Responsive QR code page

    1
    Katrien Schuermans•1,210
    @katrien-sPosted 9 months 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
  • Stoic•150
    @Joel12rSubmitted 9 months ago

    Things I found difficult

    • Mostly was the instructions on how to style the list in a way that a new line begins at the same spot as the first line.

    Questions

    • How do I write a list in which the characters start at the beginning of the same line in a way that the second line of the same paragraph doesn't go inward?

    Responsive Recipe Page

    2
    Katrien Schuermans•1,210
    @katrien-sPosted 9 months 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
  • Mukul Jain•240
    @Mukulvjain1Submitted 9 months ago

    Need help please check while it swtched to media query the gap incrses what to doo Open for any feedback to improvise

    NewsLetter Signup Page

    1
    Katrien Schuermans•1,210
    @katrien-sPosted 9 months 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
  • Ezra•10
    @Ezra003Submitted 10 months ago

    Responsive web design.

    Not knowing the right questions to ask when solving problems.

    Making the border for the main content look exactly like in the design.

    CSS Box model practice

    2
    Katrien Schuermans•1,210
    @katrien-sPosted 10 months 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
  • Ortaly•970
    @ortalyartsSubmitted about 1 year ago

    I am not sure if the usage of display:block was the right option or I should better use the css grid.

    Responsive QR code component

    1
    Katrien Schuermans•1,210
    @katrien-sPosted about 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
  • Katrien Schuermans•1,210
    @katrien-sPosted over 1 year 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
  • Mark Colinares•60
    @NewCoderExSubmitted almost 3 years ago

    Good day! This is my very first challenge that I made. I am expecting that there will be lots of mistakes on this code so I hope you can help me improve. Thank you!

    NFT Preview Card Component Challenge

    1
    Katrien Schuermans•1,210
    @katrien-sPosted almost 3 years ago

    Good job for a first challenge. Even though this looked rather simple, there were some tricky parts. I noticed you left them out. The hover on the image and all the other hover-effects. The hover on your h2 and span can be done by the pseudo-selector :hover. The hover on the image would be more complex. Check other solutions to see if you understand how it's been done. There's various ways, so I don't want to push only one solution.

    There are some things you need to be carefull with. You've used a h2, h3 and h4. Be aware there is people who acces websites with screenreaders. They will always prioritize h-tags. It's better here to have all (maybe apart from the h2) written as p. Add classes or use selectors like p span to declare them. Read into accessibility and HTML-semantics.

    You also didn't declare font-sizes. Which is ok to so do here, but do it in your next project.

    As for the naming of your classes. Think about how this little design would be part of a big website. If you begin calling your images first-photo, second-photo, you'll be struggling once the projects get bigger. Class-names should be logical and preferably reusable. In this example we're building an NFT-card. So call first-picture, for instance NFT-artwork. This also makes it easier for other developers to read your code. When using logic names, the code becomes easier to read.

    Marked as helpful
    0
  • Katrien Schuermans•1,210
    @katrien-sPosted almost 3 years ago

    I figured it out by looking at other solutions.

    0
  • Katrien Schuermans•1,210
    @katrien-sPosted about 3 years ago

    This looks good. It's responsive and flows nicely. Only remark I have is that the text-alignment and font-weight in desktop-view is not identical to the design. If only you would adjust that, this would look perfect.

    It's however a bit tricky to be using row-reverse as a flex-direction. What if the css fails to load, would it still look ok? No big deal here, but could be in future projects. Just something to keep attention to.

    Happy coding!

    Marked as helpful
    1
  • Andrei Minciuna•40
    @AndreiM987Submitted about 3 years ago

    I could not round the border top of svg image, instead i convert the svg to jpg and apply css: border-top-left-radius: 10px; border-top-right-radius: 10px; Do you know how to do that?

    Order summary card with HTML and CSS

    1
    Katrien Schuermans•1,210
    @katrien-sPosted about 3 years ago

    Since you set a border-radius on your .container, you can just use overflow: hidden on the .header

    .header {
  overflow: hidden;
}
    Marked as helpful
    0
  • Katrien Schuermans•1,210
    @katrien-sPosted about 3 years ago

    This looks good! It functions, the code is easy to read. There's not much to be added.

    • I would suggest however to look into developing mobile-first. No big deal on this excercise but it might be once you move on to bigger ones.
    • Make the transition from desktop to mobile view a bit more smooth. Use the flexibility of flexbox. Now it just jumps from one static size to another, by using max-width instead of width.
    • Add cursor: pointer; to the button.
    • Maybe use classes to the buttons: .btn, .btn-1, .btn-color, ... This way you can bundle code and avoid repetition.

    Keep going. This looks promising. Happy coding.

    Marked as helpful
    3