Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions15Comments75

All comments

  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there! 👋

    Congrats on your first junior challenge solution. Here's some suggestions I would like to point out:

    • The cards didn't load on the page. I think it has to do with your JavaScript fetching code.
    • Opt for better naming convention for your classes. Since div-small, div-violet doesn't carry too much meaning, go with something like card, tracking-item and etc.
    • Also, I would avoid spamming <br> elements to give space between other elements. You can read more about its purpose on MDN Docs
    • CSS custom properties woud really help optimize your CSS code.
    • As the last suggestion, I would recommend reading and following the Frontend Mentor guidelines. Create a README.md file and explain what, how and why you did. Good for you and other fellow programmers.

    Hope it helps! Good luck on your coding journey!

    Marked as helpful

    0
  • Dimoon2134• 30

    @Dimoon2134

    Submitted

    Hello this is my first project here I tried using css naming conventions and HTML5 semantics I would also like to know how i could optimize my .css file Thanks for your feedback

    Chat app CSS illustration

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there!

    Congrats on completing the challenge.

    Your solution looks great, and I don't have much suggestions on your code.

    As of your question, visit CSS guidelines to learn more about CSS and how to write better.

    Good luck on your coding journey!

    0
  • P
    Wessel Konstantinov• 350

    @WesselKonstantinov

    Submitted

    When I did the QR code component challenge, I didn't have any trouble setting the dimensions of the component. However, this time it was a bit more challenging. I started out with an explicit width (21.875rem). Then, I switched to the vw unit for the width along with a max-width of 21.875rem. I did this as a workaround in order to make sure the component is responsive on small screens, but I feel that this is not an optimal solution. What would be a better way to get the dimensions of the entire component right without having to resort to vw units?

    I would love to hear your feedback and suggestions.

    Profile card component using CSS custom properties and Flexbox

    #bem

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there!

    Congrats on completing the challenge.

    I really liked your approach on semantic markup and good CSS code.

    Here are some suggestions I would like to make:

    • As of your question, do not heavily rely on viewport units. Because if the user tries to zoom in or zoom out, it really gets out of control. Instead try switching it something like this:
    .profile {
  width: calc(100% - 2rem);
  max-width: 21.875rem;
  margin-inline: auto;
}

    Or if you want one line:

    .profile {
  width: min(100% - 2rem, 21.875rem);
  margin-inline: auto;
}

    100% - 2rem indicates that it can stretch to 100% full width, but with 1rem extra spacing on each side. I used margin-inline: auto just in case to horizontally center the element.

    • Speaking of fixed height on your image, I liked the descriptive comment explanation. But, here's the better way you might wanna consider:
    .profile__decoration {
  background-image: url("images/bg-pattern-card.svg");
  width: 100%;
  aspect-ratio: 16 / 9;
}

    Basically, you rely on your dynamically changing width to determine the height of your image. Find out what ratio it uses and apply it.

    Good luck on your coding journey!

    Marked as helpful

    1
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there!

    Congrats on completing the challenge.

    Here are some suggestions I would like to make:

    • Move your styles to separate style.css file.
    • Use Prettier. I see that you don't care about formatting and how your code looks. So, let Prettier (VS Code extension) handle it for you
    • Add some spacing on top and bottom of your page for small devices. Something like, padding-block: 2rem; on body element should do it.
    • Attribution is overflowing on top of other elements on small devices. Either remove it or style it better.
    • Read the README.md and README-template.md files if you want other developers check and read your code.

    Good luck on your coding journey!

    Marked as helpful

    0
  • Basit Korai• 350

    @basitkorai

    Submitted

    Hello, My Fellow Developers, Hope you're nailing it in your coding journeys. This is my Initial Solution to the Interactive Rating Component

    I learned to use setTimout() Method to Run a block of code responsive built it with mobile-first workflow.

    Had tons of fun and hard time while coding this project! I have tried to make it as good and accurate as possible, but yet I know there are some accessibility, and responsiveness issues in it. Which I will try to fix in the future.

    So Feel free to leave any feedback and help me to improve my solution or make the code better in any way possible.

    I'll be looking forward to hear lots of feedback from you guys. ✌️

    Interactive Rating Component with SASS

    #accessibility#sass/scss

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there!

    Congrats on completing the challenge.

    Here are some suggestions I would like to make:

    HTML:

    • Try using radio checkboxes <input type="radio"> instead of regular buttons. Because you only have to select one rating, it will make your life much easier. Also, less JavaScript code.

    CSS:

    • I think you're missing * selector in your first few lines in your code.
    • I wouldn't recommend setting transition on every element. Use transition property where you need it.
    *,
*::after,
*::before {
  box-sizing: border-box;
}

    JavaScript:

    • If you've switched to radio checkboxes by this time, you can safely remove your code where you toggle the state of buttons.

    Other than these, everything looks good to me.

    Good luck on your coding journey!

    Marked as helpful

    1
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! 👋

    Congrats on completing the challenge!

    Really liked your solution. But, here are some suggestions I have:

    • I found a bug with your mobile navigation toggle. When using it on my phone, I noticed that icon and navigation state is switched. In other words, when I open nav menu, icon turns into "menu" instead of "x".

    Possible solution: I think it's causing by your JavaScript code, where you've specified the isIconEnabled to true. I think, by default it should be set to false, because nav menu will be closed when you first load the page.

    • (In my opinion) You have way too many media queries in your CSS. 3 and 4 queries are way too much to handle as if you are trying to micro managing your website.

    Possible solution: If you're having issues with big spacing on larger devices and small spacing on small devices, try better learning the clamp(). See how you unleash the power, by not just applying to font sizes, but also in your spacing and other several places.

    Good luck on your coding journey.

    Marked as helpful

    1
  • Lord Anarak• 100

    @Lord-Anarak

    Submitted

    This time I've used react-redux for global state management to trigger dark mode in tailwind CSS and created and API using redux-toolkit. I went further and did some of my own logic like when searching instantly the table updates and after applying filter search box will search inside the filtered countries like so. I made it super responsive by using combination of flex and grid. Any suggestions to improve my logic in the home component mostly welcome. #ThankYou

    Rest Countries API using react, vite, redux, redux-toolkit

    #react#redux#redux-toolkit#tailwind-css#vite

    2

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! 👋

    Congrats on completing the challenge!

    I really liked your solution. However, here are some suggestions I would like to make:

    • It would be great if you could use the logo, "Where in the world", as a link back to homepage.
    • When I first visited, my first impression was on loading and attribution. Website looks great. But, updating and aligning the loading part would make it even better.

    Good luck on your coding journey.

    0
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there!

    Congrats on completing the challenge.

    Here are some suggestions I would like to make:

    • If you want to write a robust and better maintainable code, focus on naming things.

    Instead of this:

    <button class="send">Send</button>
<button class="cancel">Cancel</button>

    Try switching it to this:

    <button class="button" data-type="primary">Send</button>
<button class="button" data-type="ghost">Cancel</button>

    Even if your project scales (in this case, it doesn't), you don't end writing the same code over and over again.

    • Don't nest too much.
    main .container .plans .text p {}

    That's way too much nesting. Even if you're writing your code in Sass or Less (with less care about the output), your CSS ends up looking like a crap. Also, it can have impact on CSS specificity.

    Expect these problems, everything looks good to me.

    Good luck on your coding journey!

    Marked as helpful

    1
  • Jonathan• 20

    @av-guy

    Submitted

    This is a challenge project from Front End Mentor. I did not strictly follow the design requirements for the project, but nothing critical should be missing. I included some additional accessibility features, such as aria-labels, and I tried to follow most accessibility guidelines. I did not have the time to turn this into a PWA, but I may revisit it in the future and add that support.

    This project should work well with Edge, Firefox, and Chrome. I was able to use a trial Browserstack environment, but the time limits meant that I could not do much testing with Safari. If you happen to use Safari and are able to test this, please consider filing a bug report if you encounter any behavior that breaks the project.

    I did not write unit tests for this project because it is small. In a production environment, I would have established the list of requirements and then written tests for those requirements. As this is really just a small challenge project, I did not figure it was worth the effort.

    The minimum viewport size for this project is around 260px. Anything beyond that and you're pretty much on your own. I figured this would be good enough for most of the available devices out there.

    A couple of things I plan on taking care of in the future is a theme for people who prefer higher contrast and also a general cleanup of the redundancy between the theme properties from the light and dark theme respectively. There are also some performance issues that have been highlighted by Lighthouse that I could definitely take care of in the future.

    Age Calculator

    #accessibility#vue

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there!

    Congrats on completing the challenge.

    Everything looks good to me. But, I have one suggestion.

    I would appreciate if you could lower the opacity of the border of the <input> element or at least change the color to something less bright. It's standing out too much in both the dark and light theme and it would be great if it were less distracting to eyes.

    As for the viewport, I am not sure it's sure if it's a good practice to care too much for below 300px. 320px is my minimum go-to viewport.

    Good luck on your coding journey!

    1
  • Alex• 10

    @aesy2

    Submitted

    I'm pretty sure the code I wrote here is pretty messy, although I wanted it to work and worry about clean code later, so I'd have 2 questions.

    1. What can I make cleaner here?
    2. What is the proper way to center a box in a middle of a whole page? I feel like doing it via flexbox is not the proper way.

    Results summary component solution

    2

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there

    Congrats on completing your challenge. Here are some suggestions I would like to make:

    • To make your code cleaner and robust, use CSS custom properties to avoid repetition. For example, saving your color palette in variables can help speed up your performance writing code.
    • Avoid using #id selectors in your CSS. The id attributes are most commonly used for JavaScript. Stick only with classes. It will help you in the long run.
    • There are several ways of centering techniques. But, what I consider a good practice is with the grid:
    .element {
    display: grid;
    place-items: center;
}

    If you see no effects, try setting height or min-height values.

    • hsla(241, 72%, 46%, 0.678). As 0.678 for the alpha value, it seems like you are going for the pixel-perfect design. Personal preference, of course. But, I wouldn't suggest doing so.
    • Finally, check out Kevin Powell's video on YouTube and see how he did this challenge. Trust me, you will learn a lot from him.

    Good luck on your coding journey!

    Marked as helpful

    0
  • Abdul Khalid 🚀• 72,160

    @0xabdulkhalid

    Submitted

    👾 Hello, Frontend Mentor Community,

    This is my solution for the Huddle Landing Page with Single Introductory Section.

    • It's been the first time using Tailwind CSS along with yarn as package manager 🛠️
    • Used Prettier code formatter to ensure unified code format ⚙️
    • Scored 99.125% on Google Pagespeed Insights! 🤩
    • Solution with 99.9 Percent Accuracy 🎯
    • Layout was built responsive via mobile first workflow approach 📲
    • Had a lots of fun and pain building this challenge ! 🥲

    Now for the questions :

    • Regarding, css optimization for production. I tried tailwindcss's --minify for css code reduction. but it ended up with removing the manual style i wrote on input.css
    • But surprisingly the apply directives won't get affected but manual css does
    • At last i used an online css minifier for production, So i want to know why --minify purges manual css on input.css file
    • And, This is for the first time i using Tailwind CSS so apologizing for to many arbitrary values to attaining so called Perfection
    • Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

    .

    👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice !

    Huddle Single Introductory Section 🎯 [ SEMANTIC HTML - TAILWIND CSS ]

    #accessibility#tailwind-css

    3

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there! 👋

    Congrats on completing the challenge. I really liked your attention to details in your HTML and CSS. Also, I do have suggestions as well:

    HTML:

    • It's better use aria-hidden: true on decorative images and icons, making it unreachable for screen readers. You can read more here on MDN Docs
    • Also, setting an arbitrary size for images <img width="709" height="506" > might not be a good idea since they can cause weird overflows on small devices

    CSS:

    • I see that you used fancy link in your attribution section. But, the way you implemented might impact the GPU performance. In other words, it's very costly to use width property when animating things. Also, you might have noticed not smooth, but quite rough animation on hover. I would rather switch to transform or scale properties.

    This code:

    .attribution a::before {
      width: 0%;
}

.attribution a:hover::before {
      width: 100%;
}

    can be turned into this:

    .attribution a::before {
      transform: scaleX(0);
      transform-origin: < left | right >;
}

.attribution a:hover::before {
      transform: scaleX(100%);
}

    It might not boost your website performance, but taking care and preventing this issue can help you in the long run.

    Good luck on your coding journey!

    Marked as helpful

    1
  • Leo Silva• 40

    @leozizz

    Submitted

    Following the challenge, I tried to do the best I could within what I know and with a little research, but I believe I can improve in the future. Can you give me tips on how to improve the code in general?

    • I used CSS Grid, Flexbox, Media Queries and CSS Variables to make the page organized and responsive, but I'm not sure if I used them in the best way.

    • I slightly changed the color palette suggested in the style-guide to be more like the original design.

    • I also added a validation with JavaScript that is not in the challenge to check if the user chose one of the ratings before sending the submit.

    I intend to refactor the code, mainly the JavaScript as soon as I get more knowledge in the language. Do you have any tips, what do you think?

    Solution - Interactive Rating Component

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there! 👋

    Congrats on completing the challenge! Clean and well-structured code! But, I've some suggestions.

    Let's start with HTML. If you also want to care about the accessibility in your website, here are some suggestions:

    • Instead of using the regular buttons, <button class="rating-button">1</button>, you could use radio inputs, <input type="radio" name="rating">, making it easier to rate only one of them. Read more here
    • Wrap the rating state inside the <form> element. It can really help those who navigate with their keyboard.

    For JavaScript part, if you had implemented radio input I mentioned earlier, you wouldn't need this piece to code:

    ratingButton.forEach(button => {
    button.addEventListener("click", function() {
        /* other code */
    });
});

    Because you could easily check the value of radio input when the submit button is clicked.

    As for CSS, everything looks good to me.

    Hope it helps! Good luck on your coding journey!

    Marked as helpful

    1
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! 👋

    Congrats on completing the challenge. I inspected your code a little bit and here's solution to your problem with the "connection" along with some feedback:

    1. Wrap the <section> elements in another <div> element. Give it a class name, like "result-summary"
    2. Move your <main> CSS styles to that <div class="result-summary">
    3. Done!

    Also, it's highly recommended not to use id as a selector in your CSS. Stick with class names.

    Last, but not least, I recommend you check out the way Kevin Powell did this challenge. I bet you'll learn a lot of cool stuff from him.

    Good luck on your coding journey!

    Marked as helpful

    0
  • Dennis Kin• 70

    @dennisthekin

    Submitted

    Greetings, 👋

    • I added the 'border-radius' property on the image to have rounded corners since the 'border-radius' property on the card had no effect on the image. Is there another way to have the 'border-radius' on the card only?

    • Any observations, critique, and advice are welcome.

    Thanks.

    Responsive card using Flexbox + Centered Card using Grid

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there!

    That looks great! But, I do have some suggestions:

    • In terms of the border-radius, there are 2 possible solutions.

      1. You can either use custom properties to set the same value and avoid repetition
      2. Or better one would be to set the overflow: hidden on the parent element and you can remove the border-radius from the child.

    • Grid and clamp() would really help your CSS look cleaner. I see that you've used width: 50%, width: 70% and etc. Using grid would help you control the layout of children through parent. And, trust me, it's much easier. Speaking of clamp(), it allows you to can change element's property values depending on the values you provide. You can learn more about clamp() on MDN docs

    I hope it helps! Good luck with coding journey!

    Marked as helpful

    0
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hey, there!

    Congrats with completing the challenge. That looks great! But, I do have suggestions on CSS.

    • Follow the DRY (Don't Repeat Yourself). I saw the following repetitions in your CSS file:
    h1 {
    color: hsl(218, 44%, 22%);
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
}

p {
    color: hsl(220, 15%, 55%);
    font-family: 'Outfit', sans-serif;
    font-size: 0.93rem;
}

/* ... */
.container {
    border-radius: 3%;
    width: 20rem;
    height: 30rem; 
    margin: auto auto 1rem;
    background-color: hsl(0, 0%, 100%);
}

.qr-code {
    border-radius: 3%;
    width: 18rem;
    height: 17rem;
    margin: 1rem auto 1rem;
}

/* ... */
.top-area {
    height: 17rem; 
    margin: 2rem auto;
    width: 20rem;
}

.bottom-area {
    height: 8rem;
    margin: auto;
    width: 17rem;
}

    I would recommend not using the height property since it can cause overflow issues once the content gets bigger. Also, using imaginary numbers, like 17rem, 8rem and 3% are not the best practice. Let's clear up your CSS:

    body {
    /* center on the screen*/
    display: grid;
    place-items: center;
    min-height: 100vh;

    font-family: 'Outfit', sans-serif;
    font-size: 0.93rem;
    color: hsl(220, 15%, 55%);
}

.section-title {
    font-size: 1.2rem;
    color: hsl(218, 44%, 22%);
}

.qr-code-container {
    --border-radius: 1rem;
    width: 20rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    background-color: hsl(0, 0%, 100%);
}

.qr-code {
    width: 100%;
    aspect-ratio: 1 / 1.25;
    border-radius: var(--border-radius);
}

    And etc.

    • I wouldn't use percentages for the border-radius, but I think it's a total preference.

    • Using custom properties (var(--something)) is a great way to not repeating yourself. This goes back to the first suggestion, DRY.

    If you want to improve your CSS skills, I highly recommend checking out Kevin Powell on YouTube.

    I hope it helps! Good luck with your coding journey!

    1
  • Gabriel Ojeaga• 40

    @Gabriel4PF

    Submitted

    Hi Guys this is my first project in a while. I plan to do a lot more this month, to be consistent. I had a lot of fun doing this challenge, there were a lot of situations where I had to think outside of the box to find solutions. Please you can review it and leave any comments, or feedback. It would be much appreciated. I noticed my background image for the footer is a bit zoomed in if anyone has any feedback on how I can improve that? Thank you

    RESPONSIVE LANDING PAGE

    #accessibility

    3

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! That looks great! However, I found some problems, too

    • with regards to your question, try setting a larger height. But, it looks good to me.
    • overflow issue on smaller screens with images. Try adding overflow-x: hidden to your body
    • don't use backslash (\) for the src attribute in your images. Use forward-slash (/) to specify the directory
    • not use of alt attribute for the images. It will fail in accessibility
    • markup is well-structured and easy to read and understand. Well done!
    • in terms of CSS, please use a prettier extension or pay close attention to how you are writing. There are some misalignments, spacing, and other issues, which are hard to read and defy the law of CSS.:)

    I hope it helps. Good luck!

    Marked as helpful

    0
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! That looks great. But, I found some problems, too

    • the contrast color for your paragraphs is deficient, which means it will fail in accessibility. Also, it can barely be seen
    • you don't need to import that much stuff in your CSS. Use the KISS (Keep It Simple Stupid) strategy. Don't overcomplicate things.
    • in terms of markup, use a heading. It is better to add a heading where it should be instead of a paragraph. E.g.
    <h3>Improve your front-end skills by building projects</h3>
    • don't leave unnecessary comments in HTML, which makes it hard to navigate. Simply remove them if you don't need them.

    I hope it helps. Good luck!

    Marked as helpful

    0
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! That looks great! But, I found some problems, too.

    You don't specifically need to adjust the grid at 375px. If your phone is 400p, the UI doesn't look quite good. The preferred media query for most sites is 50em. So, you need to aim for that size. In the style-guide.md, it mentions how it should look at 375px.

    Wrapping all the text in one <p></p>, and giving each one <br> is considered a bad practice. Consider using <ul> and <li> to improve the accessibility of your site

    Furthermore, imagine this project grows in the future. As its name implies, it is a single-price-grid COMPONENT, which means that it will be used in other parts of the site as well. Thus, consider giving meaningful class names to your HTML elements. I recommend removing position: absolute from body in CSS. As the project grows, it will be much harder to maintain.

    Colors need to be adjusted according to the design.

    I hope it helps. Good luck!

    Marked as helpful

    0
  • Paula Rodrigues• 250

    @paulaabro

    Submitted

    I think the hardest part was to find a way to add the toggle icon and make it rotate, but I little thinking when a long way. I new how to make the toggle of the text because I had used details/summary before on README.md . Is missing the two grayish lines couldn't get them so leaving it.

    FAQ Accordion Card w/ NO JS

    2

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! That looks great!

    For the icon, you have implemented the correct approach to rotate the icon. It happens in milliseconds. Just add a little transition to see it rotating.

    1
  • Stefan Vulpe• 80

    @stefanvulpe-dev

    Submitted

    This is one of my first solo projects. I did it without any tutorials or articles online. If you want to take a look at my page and provide some feedback on how I've organised the layout or other things you may find interesting I will be very grateful.

    Responsive Landing Page using CSS Grid and Flexbox layouts

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! That looks great!

    I liked your approach to both HTML and CSS. I think, you also like watching Kevin Powell's videos. Me, too. Also, I saw you've used CUBE CSS and Utility classes. Little advice, if you like working with utility classes, I recommend switching to Sass, which you can generate automatically with the help of @each and maps.

    However, I don't understand why you've set weird naming:

    :root {
    --fs-headings: 2rem;
    --fs-para: 1.15rem;
    --fs-button: var(--fs-para);
}

    You need to set either the --fs-heading or --fs-buttons. Try writing the name of variables fully. --fs-para might confuse other developers.

    Great job! Good luck!

    Marked as helpful

    0
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! that looks great!

    Little advice: minimum width for mobile is 320px. The most common one is 375px. You don't have to worry about sizes lower than that unless you're designing a site for the watch.

    Don't forget to remove the default margin on the body. It is creating small overflows.

    Also, never use more than one @media query for one element unless you really need to. You have created 3 @media queries for .storage-container, which is over the limit.

    Last, but not least, try to stick with common naming conventions, such as BEM. Because other developers, who analyze your code can easily understand your code without difficulty.

    I hope it helps. Good luck!

    Marked as helpful

    0
  • Anastasia Hurst• 10

    @anastasiahurst

    Submitted

    Hi fellow developers,

    This is my first challenge. I went through HTML and CSS studies quite quick, after which I delved straight into JS. I find that I never learned HTML and CSS in detail, so would like to take a step back - back to basics. All your feedback would be much appreciated.

    Thank you, Anastasia

    Product card - mobile first (HTML, CSS, Flex) - MY FIRST CHALLENGE :)

    1

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! That looks great! HTML and CSS all look clean. But, there are some improvements that can be made.

    First off, displaying and removing images on different screen sizes can't be the best practice to implement. I suggest to look at <picture> tag in MDN docs. You can set different screen sizes inside your HTML, and it will automatically do display stuff for you. It can save some CSS code.

    Also, when using @media query, it is recommended to use em units instead of rem or px.

    Last, but not least, avoid using px units. Try to stick with rem and em. It is not required, but recommended to do so.

    I hope it helps! Good luck!

    0
  • Doston Nabotov• 950

    @dostonnabotov

    Posted

    This comment was deleted

    0
  • Thidar Nyein• 410

    @thidarnyien

    Submitted

    While building the responsive site and using flex, I found difficult.

    Custom Css

    #accessibility

    2

    Doston Nabotov• 950

    @dostonnabotov

    Posted

    Hi, there! That looks great! However, I found some problems in your code, too. First, DO NOT use your CSS in your HTML file. Create a new CSS file and move all your styles there. Because when you write in an HTML file, not only it will make it look messy and difficult to read, and increase the specificity of your CSS.

    Also, pay attention that the name of the project you are doing is called "Summary COMPONENT". It means that it can be reused somewhere else as well. So, you have to give your classes meaningful names. For example, instead of class="clear" for the button, you can say something like this:

    <button class="btn" data-type="tertiary"></button

    And, you can use the button wherever you want.

    Last, but not least, DO NOT use more than one media query for one element. If you are new to CSS, I highly recommend checking out Kevin Powell's videos on YouTube and learning from them.

    I hope it helps. Good luck!

    0