Skip to content
OverviewSolutions
9
Comments
10

Omar M.

@OmarMAttia7Egypt270 points

Full Stack JavaScript Developer. My usual stack is TypeScript, Svelte, and TailwindCSS.

I’m currently learning...

- Functional Programming - Web App Testing

Latest solutions

View more solutions

Latest comments

  • Omar M.•270
    @OmarMAttia7

    Hello, congratulations on finishing the challenge and submitting your solution.

    • For starters, like @SHMITEnZ said the <picture> element is a good solution for responsive images in HTML, to learn more about it in depth I suggest you read this guide by MDN.
    • You should wrap all sections of your document in landmarks to improve accessibility, in this case, you should wrap your card component in a <main> element since it is the only thing on the page, however if you have a bigger document with more content you would probably wrap it in a <section> or <article> or it would be in a bigger component wrapped in one of these.
    • Lastly your .card class has an overflow: hidden attribute, this will prevent people from scrolling on shorter screens, try decreasing your browser window's vertical size to see for yourself. you should remove it, I'm curious as to why you added it?

    Otherwise you did a fantastic job, good luck and keep coding :).

    Marked as helpful
  • Omar M.•270
    @OmarMAttia7

    Hey, good job you did there 👍.

    Like @byronbyron said your question is not technical it's more concerned with design.

    But in case you want to make it a fixed width you should go with a percentage for smaller screens and a reasonable max width for larger ones. If your component is a flex item use vw instead of percentages.

    Marked as helpful
  • Omar M.•270
    @OmarMAttia7

    Good job finishing the challenge 🎉✨.

    Unfortunately there isn't a way to assign the color values automatically unless you're working from JavaScript or using a CSS preprocessor, you can however, make your code more manageable by naming the classes more clearly, for example like this .btn-orange, .btn-cyan and .btn-darkcyan instead of just .btn-(1,2,3...).

    Marked as helpful
  • Omar M.•270
    @OmarMAttia7

    Congratulations on finishing the challenge 🎉. Good job!

    I'm not entirely sure I got your question right, what exactly do you dislike about the current design? I'm not sure I see a problem here but I'm new to responsive design as well. You shouldn't be concerned with devices smaller than 320px in width, in the rare case someone uses a device like that they could just scroll horizontally.

    I also noticed that you're using exact measurements with pixels, in the case you want to change measurements on different screen widths you should use rems as reference for your measurements and then just changing the font-size of the html element at different media queries and adjusting the font-size of text elements if they get too small or big you could look here for more information on how rem works.

    Also you should turn height: 100vh to min-height: 100vh in your container because it breaks your design on landscape orientation and other small heights.

    Try looking into working with a mobile-first approach to responsive design it could make things clearer for you.

    Marked as helpful
  • Omar M.•270
    @OmarMAttia7

    Congratulations on finishing the challenge 🎉. Good job! I have some feedback on your solution.

    First I would like to point out that your usage of the <section> element is a little confusing, you should use a <div> for styling purposes. Check this page for information on how to use it correctly.

    Second thing I noticed is that you're way too focused on getting the design pixel perfect, you should be more focused on things like layout and accessibility, how would your component work when put in the same space with other similar components?, will it work correctly if put in another document with other content?, will it resize correctly if a visually impaired user increased the font size?, If someone is using a screen reader will they be able to navigate it correctly?.

    By focusing too much on getting the design perfectly you are missing on other important things.

    I suggest using flex to center things on the page instead of position: absolute and using ems instead of pixels for starters.

    As for responsiveness, you worked on the desktop and large screens first and then made appropriate media queries for mobile and other smaller screens, that works fine most of the time. but you usually want to work with a mobile-first workflow where you make sure your code is working correctly on smaller screens and then expanding from there as it gives you more freedom and takes much less effort, check this article for more information on the subject.

    Marked as helpful
  • Omar M.•270
    @OmarMAttia7

    Congratulations on finishing the challenge, good job that was solid :).

    I have a couple of things to point out:

    1. You should wrap the main content of your website in a <main> element or something equivalent.
    2. You should also get your font-size a little bigger, most people will have trouble reading text this small. In a real-life situation your designer is probably gonna provide you with accurate font sizes but it's good to know anyway.

    Good luck and keep coding <3.

    Marked as helpful
View more comments