Skip to content
OverviewSolutions
10
Comments
12
P
Tomislav Šuto
@RetroApe

All comments

  • P
    Tomislav Šuto•260
    @RetroApePosted 4 months ago

    Hi Alqorni.

    I see you've been doing a lot of challanges last two weeks. Nice work, keep it up.

    When checking your solution, I noticed that you are using 'width' with percentages a lot. Although it is not a mistake because it can be used if one wants to have certain kind of effect when resizing a window, it is almost never used. Why? - Because using width automatically makes your element unresponsive.

    I've done a lot of research and everyone is using max-width and min-hight when they want their element to have certain width and height; this will still leave some room for the element to resize when viewport width goes under max-width. As for units, rem is used for accessibility reasons.

    When resizing the window, the good thing is that the text is always visible, which is the most important thing. You did that nicely. There is an exception. When resizing height of the viewport; when height reaches below 640px, the text starts clipping. This is because height is set to 70%.

    I tried removing it, but then the element's height goes all the way from top to bottom. Then I saw that there is a previous height that's been set to 100%. Well, I removed all width and height percentages on .bigcontainer and instead put max-width: 950px under @media query and to me it seems to be better. This way, the card will also not stretch when increasing the width of the viewport.

    This is all done by looking at the Dev Tools on the browser. If you do not know about it, I recommend you check it out. It is not complcated and it can help you a lot when trying to find the issue with CSS. This video explains it nicely.

    Also, one good thing to have in mind is that HTML by its own is completely responsive. The moment you start writing CSS, you are either moving away from that responsiveness or you are keeping it responsive. There are videos about that as well (～￣▽￣)～

    I hope I have helped you in some way :)

    All the Best!

    0
  • Toye Ayomide•90
    @Toye-devSubmitted 4 months ago
    What specific areas of your project would you like help with?

    I had a really really hard time getting the share feature of the minimized screen to revert back to its default state in the enlarged screen. No matter what trick I tried, I couldn't figure it out. I ended up duplicating the same features in my html for the media query features.

    I'm pretty sure that was wrong.

    Article preview component using html, css and js

    1
    P
    Tomislav Šuto•260
    @RetroApePosted 4 months ago

    Hi Toye.

    I am not sure what is the problem with the share feature, but you have a bigger problem on your hands. I have seen your preview-card doesn't have width or height set. It only acts as a flex container. So basically, image and text are just "glued" together..... Scratch that. Image is actually behind the text. Why did you do it this way?

    You already know how to do it the right way and you have done it in Blog Preview Card.

    It is the same thing, only difference is that the image should touch the edges of the card.

    The preview card should be 730 x 280 (px). Or in rem:

    max-width: 45.625rem;

    min-height: 17.5rem;

    Take off all margins/radius/height/width on text-section / img. Put background color and radius on the preview card.

    The img should have a certain width. Use max-inline-width or max-width. Also add object-fit and object-position.

    The text-section should have a padding.

    From this base you build further. Remember that your starting point is always a fully responsive HTML file. We ruin this responsiveness with CSS. Whenever something doesn't behave properly, it is time to check why and change or possibly delete the property that is causing the issue. If you try to solve these issues by adding more CSS..... well, no one can solve them this way.

    Try to learn a bit about the Dev Tools on the browser, they will help you understand the layout much better.

    Please be free to check my solution and if you have any questions I will be happy to help if I can. ChatGPT may also help with giving a proper resource instead of endlessly searching for an answer.

    I hope I was able to help a little bit.

    Best of Luck!

    Marked as helpful
    1
  • P
    Tomislav Šuto•260
    @RetroApePosted 4 months ago

    Hi Lai Yiu Leung.

    I checked you solution. The layout is pretty close; certain parts could use bigger paddings/margins. Some colors are off; footer and purple buttons.

    Besides that, I don't see anything else.

    I checked different resolutions and true enough, the site is responsive.

    I think you did a very good job :) Best of Luck!

    0
  • P
    Tomislav Šuto•260
    @RetroApePosted 4 months ago

    I am glad my feedback helped you.

    Usually, you never set height, at all. If you set a height on an element, it will most often make it unresponsive.

    You never set width on a <header>, <body>, or <footer>. It makes your site immediatelly unresponsive.

    I personally use Dev Tools on Chrome to check how my site functions, but people say Firefox is better.

    For Chrome:

    To open dev tools, just go to you site (or any other) and press shortcut: Ctrl + Shift + C. Use the same shortcut to hover over an element on your website and preview its width, height, padding, margins, or click it and you can check it's properties on the right.

    You can turn off properties or change values to see how your site behaves. You can also change width and height of the viewport to see how your site behaves.

    Try selecting <main> element end turn off height and width and see what happens.

    ...

    I mean, it is hard to explain these things with just words. Here, watch this video to learn how Dev Tools function. The video helped me, and it is not long like some other videos.

    0
  • jahwts•20
    @jahwtsSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I have just started out my journey with HTML, CSS and JS and this is my first landing page made with a great help of tutorials by Zach Gollwitzer.

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

    It is quite difficult to wrap my mind around how to organize all the stuff that is needed to create a layout and styling. From time to time CSS has driven me absolutely crazy. Staying patient is the key for now :)

    Responsive landing page using Flexbox

    1
    P
    Tomislav Šuto•260
    @RetroApePosted 4 months ago

    Hi jahwts

    I see that this solution was posted three months ago and nothing since. I do agree with your statement to stay patient; without it one cannot grow, but don't you think staying patient this much is going overboard ;)

    Anyway, you shouldn't have started with this challenge, but something simpler, something in the Newbie section, otherwise you will find yourself more frustrated than satisfied with your solution. Take little bites of the information and chew slowly, do not swallow without chewing. I know, I am full of wisdom...

    If you read this then I can only wish you...

    Best of Luck!

    0
  • P
    Tomislav Šuto•260
    @RetroApePosted 4 months ago

    Hi Valchiz.

    I see you did a good job matching the layout. I also noticed you used border-top to mark each card with its own color. I actually didn't think of that. I used linear-gradient for that:

    background: linear-gradient(
        var(--cyan) 2%, /*this is where you change color*/
        white 2%
    );

    Shadows could use some amplification. Something like

    box-shadow: 0px 10px 30px 0px hsla(180, 62%, 55%, 0.55);

    I would advise against setting height and width on the main element. It will automatically make your layout unresponsive. Otherwise:

    • container doesn't stay in the center of the screen when you scale the window down (because it is staying in the center of the main, which went off screen)
      • other elements also behave in similar way
    • you will essentially be making your life difficult because you will have to make more @media queries than is necessary

    When I removed width and height on main, your .p-words element started behaving strangely. I saw that you centered this element by putting 450px on the left and right side of the margin. Centering elements horizontally is usually done by entering auto on both sides of the margin.

    p-words element should have a maximum width. It will still make the element responsive if the width of the screen becomes smaller than it.

    max-width: 55ch;

    I used ch, which is a unit for characters. It essentially makes your paragraph have a line no bigger than 55 characters. I think this is pretty cool.

    min-width and max-width is generally better to use on most elements because it will keep your elements respond to size reduction/expansion.

    I hope I helped a little bit and didn't make my explanations confusing :)

    Best of Luck!

    Marked as helpful
    0
  • P
    Tomislav Šuto•260
    @RetroApePosted 4 months ago

    Hi Maryam.

    You did good job with the overall layout; mobile layout is much better than the desktop one. The colors are on spot.

    Things I can help you with:

    • I noticed that the image doesn't completely touch the bottom of the card. I had a lot of problems with that, but I just couldn't figure out why is it happening no matter what I tried.
      • In the end I measured the height of the card in the design and wrote it directly: 28.125rem(it is different for the mobile)
    • When I try resizing the window, the width of the card changes. The width should stay in place (except for the transition for mobile). The width of the card should be 37.5rem(it is different for the mobile)
    • And the best thing I can help you with... I noticed that the image is going over the card. The card is therefore not showing its rounded angles on the left side. The solution is easy. Just add overflow: hidden; for the .card element.

    I hope I managed to help you a little bit :)

    Best of Luck!

    Marked as helpful
    0
  • vedantvinarkar•10
    @vedantvinarkarSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully creating my first recipe page using HTML and CSS. It was exciting to see my ideas come to life and build a visually appealing layout that showcases delicious recipes. I enjoyed learning the basics of web development and overcoming challenges, like aligning elements and choosing the right styles. However, looking back, there are things I would do differently next time. I would focus on making the page responsive for different screen sizes, organize my code with better comments, and experiment with advanced CSS techniques like animations or transitions.

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

    While working on this project, I encountered a few challenges that tested my problem-solving skills. One major hurdle was aligning elements correctly and ensuring the layout looked clean and organized. Initially, I struggled with understanding how CSS properties like margins, padding, and flexbox worked. To overcome this, I referred to online tutorials and documentation, which helped me grasp the concepts better. Another challenge was selecting complementary colors and fonts to create a visually appealing design. I explored color palette tools and experimented until I found a combination that worked well. These challenges taught me patience and the importance of research, and overcoming them gave me a sense of accomplishment.

    Easy Recipes

    1
    P
    Tomislav Šuto•260
    @RetroApePosted 5 months ago

    Hi Vedan.

    I think you did a good job trying to match the design.

    Maybe you already noticed it, but here are some things that I see:

    • Paragraphs could use bigger line height
      • lists could use margin on top and bottom
    • Use <hr> to have a line break between sections
    • Using height...; it is generally discouraged to use it as it can mess with the layout
    • Instead of writing margin/padding for everything, start by writing padding for the highest element (e.g. .flexing element), since each element seems to be the same distance away from the edge.

    Nevertheless, nice work on completing the challenge. I like that you wrote your thoughts in detail after completing the project.

    I hope I helped a little bit :)

    Best of Luck!

    Marked as helpful
    0
  • P
    Tomislav Šuto•260
    @RetroApePosted 5 months ago

    Greetings Jean.

    It seems you had some trouble with the layout. I had a lot of trouble myself with the layout and making everything more responsive. Had to spend a lot of time to solve each issue.

    Looking at the design, the whole card has the same padding size inside the card. So the most efficient way is to give the padding to the card and remove margin/padding for the inside elements.

    The card is also missing margins on top and the bottom.

    One more thing; I wouldn't put the image inside an element (div in your case), but I would have the image be a direct child of the card element. I see you declared height: 100%, which is unnecessary. Just have image go 100% in width, and with previous padding being set up for the card, it would look closer to the design.

    There are a lot of things to learn. I have been following Kevin Powell these days on YouTube to; it helps to watch. Here are 5 tips for responsive layout from him, for example.

    Thinking about the first tip in his video, I would advise to go one step at a time when writing CSS. When you write something, check how it works. If the layout breaks, there must be something that can be done to fix it. That is how I worked on this project.

    This is not mutch, but I hope it helps your development.

    Best of Luck!

    Marked as helpful
    0
  • P
    Tomislav Šuto•260
    @RetroApePosted 5 months ago

    Hi Ali.

    It seems some elements considerably differ from the design in terms of dimensions. That is fine, considering not having the design file.

    I found some good use with Power Toys on Windows.

    https://learn.microsoft.com/en-us/windows/powertoys/

    You have to install it first, though.

    It has a Screen Ruler which you can use to measure pixels on your screen. Pretty nifty tool for some use cases like this one.

    I hope this helps :)

    Best of Luck!

    0
  • Mariam Svanidze•80
    @mariamsvanidze0Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    What I’m Most Proud Of I’m proud of creating a responsive layout with clean, functional design and smooth interactivity.

    What I Would Do Differently Next time, I’d focus more on optimizing performance and exploring more advanced animations for smoother user experiences.

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

    Challenges Encountered I struggled with maintaining the layout while adding spacing for the footer, which caused my card div to shift.

    How I Overcame Them I adjusted the body’s flexbox settings and used padding to ensure proper spacing without affecting the card div's position.

    Used Flexbox, CSS Grid, Media Queries, and hover effects.

    2
    P
    Tomislav Šuto•260
    @RetroApePosted 5 months ago

    Hi Mariam. Nice work on matching the design; it is pretty close. I know what you mean with layout, but thankfully it will become easier to us with time.

    I checked your solution and found a couple of things to note:

    • the color of the title should change only when hovering with mouse over the title itself. Making two selectors on the title would solve the issue; one :hover (to change pointer to hand) and one :active (to change text color when clicking)
    • two @media queries are unnecessary; simply having everything properly set up in CSS file is enough for bigger screens, and then you can use @media query to change what needs to change for widths of 375px and under

    I hope I helped a bit. Best of Luck!

    Marked as helpful
    0
  • munylo14•20
    @munylo14Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    This project was fairly straightforward. I utilized CSS to style a container to match the design file. I didn't incorporate any libraries or dependencies for this project. I did some reading on responsive design and managed to create a component that responds to the viewport size. However, I still don't feel very confident that I achieved this "correctly" and would appreciate any feedback.

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

    I had issues (I suspect it may have been a cache issue) getting the QR code image to display in my project. Although my image tag was formatted correctly, it still wasn't displaying on my live preview server. For no apparent reason, it started working. Then, when I deployed my project to Github Pages, same issue. And again, for no apparent reason, it now displays correctly.

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

    Based on the above stated issue, if you have any suggestions on what may have been causing the issue, please let me know. If there is something I should do differently, please let me know as well. I also welcome any and all feedback in relation to my adherence to convention when it comes to writing efficient, readable code.

    QR Code Component using Vanilla CSS

    2
    P
    Tomislav Šuto•260
    @RetroApePosted 5 months ago

    Congratulations on completing the challenge :)

    I checked your code and it is very readable.

    Looking at the solution itself, I can see several things that differ from the design:

    • radius of QR image is too big; it should be border-radius: 10px;
    • text color is black; it should be:
      • .qr-header {color: #1F314F;} Slate-900
      • .qr-info {color: #68778D;} Slate-500
    • shadow is missing below the card:
      • box-shadow: #0000000D 0 25px 25px 0px;
    • it seems that the card is a bit too short

    Those are some of the things I have noticed. I hope it helps.

    Best of Luck!

    Marked as helpful
    0