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
OverviewSolutions31Comments2221

All comments

  • brenda127s• 20

    @brenda127s

    Submitted

    Hello community! I am still learning javascript and the basics of it. I had trouble alternating between the plus and minus icons. Once I finally got it to work, you can still see the plus icon behind it. How would you typically switch between icons, making one or the other visible based on clicks?

    I also had trouble expanding the paragraph element within javascript. I got it to work when the icons were clicked, then I got it to work when the questions were clicked but then it wouldn't work with the icons anymore. Is there a way to add two variables to the same forEach method? How would I be able to have two different variables perform the same function?

    I appreciate any help/criticism!

    FAQ accordion using CSS Flexbox and Javascript

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey there, brenda127s! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Great job on this project! 👏

    I'd like to suggest using the <details> and <summary> elements for the accordions in this component. Currently, you are using <div>s for those elements, which aren't accessible because they aren't keyboard-focusable or recognized as interactive elements by browsers and screen readers. There are also some issues like some of the answer content getting cut off towards the bottom of the accordions on smaller screens. Using the <details> and <summary> elements will help solve these issues. If you're interested, you can learn more about them here from MDN.

    As for dealing with the icons, if you go with using the <details> and <summary> elements you can check for the open attribute on the <details> element and show/hide the icons based on the state of that attribute.

    Also, don't forget to add some alt text to the <img> elements on your page (but leave the alt text empty if those images are just for decoration and don't need to be noticed by screen readers) and to give the <img> elements unique IDs. 😉

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • Schismond• 160

    @Schismond

    Submitted

    this is the last time I use figma to try and get the right sizes , well I get it 99% accurate but I'm tired of all this pixel declarations I believe it's not the right way to do things , please comment your opinion

    newsletter-sign-up

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey there, Schismond! 👋

    Nice effort on this challenge! 👏

    A few suggestions I have are,

    • Taking another look at the responsiveness of your site. At the moment, things start to look a little broken/get cut off around ~1000px as the screen width decreases. Remember that even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about how building responsive layouts, check out this helpful course
    • Avoiding using px for setting the values of things like font-size and spacings in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text (and ideally, overall layout) of your site by changing the default font-size of their browser. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video

    Don't worry too much about making "pixel-perfect" solutions—it's more important to focus on things like accessibility and responsiveness so that people can use and enjoy the websites you make 😉 As long as your solution looks more or less like the design in the end and it is functional and accessible, that's great 👍

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2
  • Carlos Perez• 150

    @perezc52

    Submitted

    1. What did you find difficult while building the project?

    getting the two sides to line up. i had an issue where the right side grew bigger than the left and it was causing layout issues.

    1. Which areas of your code are you unsure of?

    i am still unsure about the layout. i think it probably could have been structured better.

    1. Do you have any questions about best practices?

    i'd like to know better practices for creating layouts like this. and just any feedback in general.

    Solution using HTML and CSS

    2

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hello, Carlos Perez! 👋

    Nice effort on this challenge! 👏

    I'd like to suggest taking another look at the responsiveness of your site, especially around ~1060px where things seem to look a bit broken as the screen width decreases. Remember that even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about building responsive layouts, check out this helpful course

    Also I wouldn't make the "76" the main heading for this page/component because it isn't very descriptive by itself and doesn't identify the main content or information on the page. A simple span should do instead 🙂

    When deciding which elements to make headings, try to choose elements that describe the content below or around them, rather than elements which just look like headings in the design. Here's a great article that may help you learn more about making semtantic, accessible headings

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1
  • Luan Barcaça• 500

    @barcaca

    Submitted

    If anyone has any feedback on how to improve, it's always welcome.

    Se alguém tiver algum feedback sobre como melhorar, é sempre bem-vindo.

    Social Proof Section [SASS/SCSS]

    #sass/scss

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Greetings, Luan Barcaça! 👋

    Good job on this challenge! 👏 Your solution looks great and responds well! 👍

    One thing I'd like to suggest is to remove the alt text from the star icons and simply set them to be an empty string. Otherwise, screen readers will read out the alt text for each star icon, which is unnecessary and can be slightly annoying 😅

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • Loukas Vovlas• 40

    @vovlasl

    Submitted

    Hi everybody. I have some problems with this project and I'd like if someone could point out what i did wrong. So... problem number:

    1. The container below the navigation is off center and Ι don't know why or how to fix it.

    2. When I open the menu (on a small window size), I would like it to not be able to scroll.

    3. Is there a better way to put the "read more" button at the bottom of its container.

    If you see something else that's wrong please tell me, it will help me a lot.

    Responsive homepage using html, css and vanilla js only

    #vite

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hello there, Loukas Vovlas! 👋

    Good job on this challenge! 👏

    The reason the main content in your site appears slightly off center is because there is some extra gap being added to the right side of the grid of div.two-columns. To get rid of that, set grid-column: 1 / span 2 on div.three-columns (instead of grid-column: span 3). Also, be sure remove the width property from div.small-box so that it can fill up all of the space in its section of the grid container

    To prevent the page from scrolling when the mobile menu is open, you'll need to add overflow: hidden to the body when the menu is toggled. You can do that with a little JS (and remember to remove that style when the menu is closed so that users can scroll again)

    You could make the attribution always stick to the bottom of the screen with absolute positioning (but it may overlap the rest of the content at times), so instead you could turn the body into a flex container (make it flex-direction: column) and add margin-bottom: auto to main. That will push the attribution to the bottom of the body if there is ever any extra space

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Submitted

    The challenge was pretty straightforward and a great way to practice responsive images and overlapping content.

    The "Creations" section required the most attention, as I wanted the entire image to be "clickable" and be accessible, while also applying gradient-background to the image.

    To make things easier to manage, I decided to implement each creation item as a JSON and then render it as list using map().

    After that I "overlapped" the links and images on top of one another using CSS Grid:

      &__item {
    display: grid;
    grid-template-areas: "stack";

    & > * {
      grid-area: stack;
    }
  }

    For the layout, I used grid-template-columns and simply changed the layout during certain breakpoints.

    To make the entire image "clickable" I used Andy Bell's method of doing so:

    More details provided in the GitHub README...

    As always, all feedback to better improve this challenge is greatly appreciated! ♥️

    Loopstudios [Landing Page]

    #react#react-router#vite#sass/scss

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hello, バレンタイン 😈! 👋

    Nice job on this challenge! 👍 Your solution looks great in the design comparison! 👏

    I think the "Leader in interactive VR" section might be missing its background color in the desktop layout (since at the moment some of the text in that section gets hidden behind the image next to it) 😅

    Also (as your solution report suggests), you can probably leave the alt text for the images in the "Our creations" section empty since the links that they are a part of already have text inside them to identify them

    And don't forget to add a favicon to your site 😉

    Keep coding (and happy coding, too)! 😁

    0
  • kasey• 320

    @kaseyvee

    Submitted

    Having some hydration issues on my checkout page when I have items in my cart. In src/app/components/checkout/Cart.tsx, I can fix this by making my cartItems state and setting the state to { ...localstage } in a useEffect, but this doesn't allow me to update my cart in real time without force refreshing, since router.resfresh() doesn't seem to help. Haven't put much time thinking about this but if anybody has any quick feedback, feel free to drop some.

    Any other feedback much appreciated! Also more specifically Next.js 13 with app router best practices.

    Responsive e-commerce website with Next.js 13 App router

    #contentful#framer-motion#next#sass/scss#react

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Greetings, kasey! 👋

    Nice job on this challenge! The UI looks great 👍

    I don't have time to look at all of your code but I had a quick look at the Card component. You don't really want to be using the router to refresh the page to display changes in the UI (that's a bit of anti-pattern as this is what React state is for). Instead, if you store the card data in some state then any time you update that state, React will re-render any components which use that state and update the DOM for you. You can then update local storage with that new state value if you want persist data that way for this project. Also since some of the cart data appears in other places around the site (such as in the product pages), you may want to store that state higher up in your app and pull it into components with React context. If you want to learn more about React state or context, I'd recommend checking out the new React docs as they are very-well written and include a few helpful guides. Hopefully that makes sense 👍

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2
  • Feithers• 180

    @Feithers

    Submitted

    Hello there!

    This time I think I did pretty good, even though I had no idea at the beginning on how to do the "185 GB left" detail, which I don't even know if I did ok. Is that the correct way?

    Either way, all help is appreciated, and if you think I have some unnecessary code, let me know!

    Thanks!

    Solution using CSS and HTML!

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Greetings, Feithers! 👋

    Good effort on this challenge! 👍

    I'd like to suggest taking another look at the responsiveness of your site. Currently, things look okay in the desktop layout, but as the size of the screen gets smaller the content begins to look a little squished and things start to break. Even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about how to make your site responsive, check out this helpful course or this one from web.dev is great as well.

    Another approach to creating the "185 GB" popup would be to wrap it in a container like this:

    <div class="popup-container">
  <div class="popup-content"> content goes here... </div>
  <div class="popup-triangle"></div>
</div>

    Allow the container element to be sized by the content and use absolute positioning to position the triangle relative to the container. You can use the CSS clip-path property to make the triangle div into an actual triangle shape. 🙂

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • AJITH M• 20

    @alex-ajith

    Submitted

    Could you please recommend some good resources for learning concepts like flex, grid, and media queries in-depth? I did find difficulties in writing flex, making it responsive.

    Feel free comment my code and tell the areas of improvement, it will be useful for my learning.

    Thank you! :)

    Results Summary Component using HTML and CSS

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey, AJITH M! 👋

    Nice work on this challenge! 🙌 Your solution looks good and is responsive! 👍

    It's worth keeping in mind that it is considered a best practice to only have one h1 tag per page. After you've added a h1 to your page you should use less important heading tags for the rest of the headings. 🙂

    Also, I think you can use flexbox to lay out the items in the "Your result" container and add space between those items using gap (which is easier and more consistent than adding margin or padding to individual elements).

    web.dev has a great free course on responsive design if you're interested. The more you practice building responsive sites, the better you will become at it. 😉

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    0
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hi, Rabbituz! 👋

    Nice job on this challenge! 👏 Your solution looks good and is responsive! 👍

    There is a horizontal scroll bar appearing along the bottom of the page because the image in the hero section of the page overflows the body of the document quite a bit. You may want to add overflow-x: hidden to the html and body elements in order to prevent that from happening.

    And don't forget to add a title and favicon to your page. 😉

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • Vinay Maurya• 140

    @Designer-space

    Submitted

    Hello there my self vinay Maurya

    Here's the solution of this challenge. I've used preprocessor SCSS . This is my first time using scss and i took inspiration for scss Architecture form @MelvinAguilar if there is anything i need to change or improve the solution do let me know , any feedback is welcome

    Thank you. :)

    3-column-preview-card-component(SASS + BEM + Grid + Flexbox)

    #accessibility#sass/scss#bem

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey, Vinay Maurya! 👋

    Just wanted to say you did an excellent job on this challenge! 👏 Your solution looks good and responds very nicely! 👍

    Your code looks great as well! 🙌

    Keep coding (and happy coding, too)! 😁

    0
  • Henry Andrew Baum• 40

    @habmin

    Submitted

    Had fun with this one, would love to implement more animations and interactions with JavaScript, but wanted to at least get the base done.

    The style sheet for this feels really long, tried to organize it a bit, maybe could have condensed somethings.

    Most of my unit sizing is done in absolutes with px units. Is that an acceptable practice in this day in age?

    Results summary component

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hello, Henry Andrew Baum! 👋

    Well done on this challenge! 👍

    If your CSS file is becoming very long and harder to navigate, it may be worth looking into using a tool like Sass to make writing and managing your styles easier. Using Sass you can split your styles into smaller files for organization and do cool things like write simple "functions" to avoid repeating code.

    It's a good practice to use ems/rems over pixels for font sizes for accessibility reasons. Here's a great article on the topic if you're interested in learning more about it. I'd also recommend using ems/rems for other the values of other properties in your CSS such as margin, padding, etc., as that will cause the rest of the design of your site to scale with the user's chosen default font size. 🙂

    As for your solution, I'd suggest leaving the alt text for the icons in the card component empty since they are mostly decorative and don't need to be read by screen readers.

    And don't forget to use a button element for the button in the card. 😉

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hi, Craig Johnson! 👋

    Nice job on this challenge! 👏 The card component looks great and so does your code! 👍

    Just a small suggestion or two! 😉

    Instead giving the card component a fixed width, I often find it a good practice to give a component such as that width: 100% and then add a max-width to prevent it from becoming too wide. This way, the width of the component will adjust to the size of its container in the tablet/mobile layouts and avoid causing an overflow.

    You probably don't need to use section tags inside the markup of the card since section tags should always include a heading inside them to identify that section and the markup of the card is quite simple. I think div tags should work just fine in this case. 🙂

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1
  • Dawid Keyser• 170

    @dawkey95

    Submitted

    This is my first project after switching from CRA and Material-UI to Astro and Tailwind-CSS.

    If anyone is familiar with these frameworks and has any tips or tricks or general advice you wish you had when starting out.

    Also any suggestions for making the code more accessible that would be much appreciated.

    Results Summary using Astro and Tailwind

    #astro#tailwind-css#react

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey there, Dawid Keyser! 👋

    Good work on this challenge! 👍

    I haven't used Tailwind or Astro before, so I'm afraid I can't offer you much help with that, but I have one or two other small tips for you. 🙂

    Instead of adding a fixed width to the card in the mobile layout, I would suggest giving it width: 100% and then adding a max-width to it to prevent it from becoming too wide. This way, the card component should adjust to the viewport width (and not cause any overflow) on smaller screen sizes.

    Also, I would leave the alt text for the icons in this card empty since they aren't important for the content of the card and don't need to be noticed and read by screen readers. 😉

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • Malekos74• 120

    @Malekos74

    Submitted

    Hey I feel like my solution isn't really that good I didn't know how to change the svg colors to pink when hovered Moreover the item placement was kind of winged and not really made in a good way :/

    Huddle main page using grid

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey, Malekos74! 👋

    Nice effort on this challenge! 👏

    I would suggest looking into making your solution more responsive. Currently, things look okay in the desktop and mobile layouts, but a lot of the page content gets hidden in between and the a horizontal scroll bar appears along the bottom of the page. If you need some help or some ideas with starting to build responsive layouts, this YouTube playlist from The Net Ninja might help you. 🙂

    Also, to change the color of an SVG element, you can usually select all of the elements inside it and change their fill color like this:

    svg * {
  fill: lightcoral;
}

    Keep practicing and your solutions will become better and better. 😉

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2
  • AlexMagargiu• 120

    @AlexMagargiu

    Submitted

    First time writing JS, please do give criticism if I could improve anywhere. I taught about implementing a for in the getValue() function but I don't know how / don't know if it's better optimized than with the single if else condition I used.

    Interactive Rating Component with Flexbox

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey, AlexMagargiu! 👋

    Well done on this challenge! 👍 I think you did a good job on the styling and your solution looks good! 👏

    I would suggest leaving the alt text for the icon and maybe even illustration in this challenge empty, since they aren't relevant to the content of the page and we don't really want them to be noticed and read by screen readers.

    And a small tip for your JS—rather than call getValue inside of switchDisplay, you can call switchDisplay inside of getValue if the user has selected an option. This will make your code slightly easier to follow and you won't have to bother with returning a boolean from getValue. 😉

    Keep practicing and with time you'll find better and better solutions to problems you encounter. 👍

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    1
  • P
    Syd• 20

    @SydBrain

    Submitted

    Hello, this is my first time working on "real projects" after enduring a useless 12 month Front End Face-To-Face Course that didn't prepare me for the job.

    Here's a few questions I'd like to ask to the community:

    • Am I using HTML5 elements well?
    • What's a better way to organize SASS foldering? Did I overdevelop the page by choosing to use SASS?
    • I'm having trouble with making optimal responsive layouts, I find myself constantly tweaking dimensions and positioning. Could you point me to some resources that could make me improve?
    • I reeeeally don't like using absolute positioning in my projects. Is there a better way to layout decorative and/or overlapping elements?

    Thanks in advance!

    Mobile First Workit Landing Page using HTML & SCSS

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey, Syd! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👍

    A few things you can do to improve your HTML would be,

    • Turning the features section into a list using the ul and li tags (since that is a list of features).
    • I don't think the word "tailored" in the page heading needs to be a link, as it probably only has that underline for decoration.
    • Not adding any alt text to images you don't want screen readers to notice and read (such as decorative images, which aren't important to the content of the page).
    • For the above reason, it might be worth removing the alt text on the social media icons in the footer of the page and adding an aria-label to the links that wrap them instead.

    I don't think using Sass for this project was overkill. Sass has lots of great features that are easy to get used to and using it here is great practice for larger projects where it comes in very handy. 😉

    Making layouts responsive and using absolute positioning are two things that become much easier to do (and think about in general) with practice! 😉 Something that really helped me become better at the two is inspecting other websites and reading other people's code to see how they did things. Use the dev tools to inspect and poke around professional websites or browse this platform and the read the code of high quality solutions—this will show you ways of doing things that you might not have thought of before and give you a chance to explore new ideas. 🙂

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1
  • Cristina• 360

    @cr1deg0

    Submitted

    Hi,

    Can anyone provide guidance on how to control the tab navigation inside the lightbox, to make the focus move to the "Close" lightbox button from the tumbnails?

    Thanks, Cristina

    E-commerce product page with React, Typescript and Sass

    #react#sass/scss#typescript#vite#react-testing-library

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hi, Cristina! 👋

    Great job on this challenge! 👏 Your solution looks good and works well. 👍

    It sounds like you might want to look into using a focus trap for when the modal is open (to "trap" the user focus to the interactive elements in the modal). I'm not very familiar with building one from scratch, but since you are using React you can probably find a package to help you with this or with building modals in general. One package for building modals with React I'd recommend is react-a11y-dialog since it has a great focus on accessibility (and it includes the focus trap in its functionality).

    Hope that helps a bit. 🙂

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • P
    Katrien S• 1,070

    @graficdoctor

    Submitted

    I'm not really a newbie anymore, but I didn't code for quite some time. I selected this exercise as a warming up. By pushing it to the website, it made me want to properly finish the exercise. As I did. Feel free to comment if you caught me doing odd things.

    Product Preview Card Component

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hello, Katrien S! 👋

    Just wanted to say hi as I remember you from a while ago. 🙂 Nice to see you back and coding again!

    As far as your solution goes, everything looks great! 👌

    Happy coding! 😁

    1
  • sutaC• 520

    @sutaC

    Submitted

    • I had some difficulties with positioning the images. In the end I did it the hard way (translate/pos absolute). I'm curious about a better solution, but I couldn't find anything more sensible.

    • Additionally, is there any better way to do mobile layout?

    FAQ accordion card - SvelteKit & CSS

    #svelte

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hey there, Antoni Siekański! 👋

    Nice job on this challenge! 👏

    The images in this challenge can be tricky to position!

    For the images that don't overflow their container, I would suggest adding them using CSS background images. You can add both of them to the container of the component and just be sure to create space for them in the mobile and desktop views.

    You can use absolute positioning for the cube (as you have done), but I would position it relative to the container of the component, as that is more robust than positioning it relative to the body (in case the size of the component and the body change in different ways).

    Besides that, it would be worth looking into making the accordions in your solution accessible. Currently, they cannot be used with a keyboard, and their markup isn't very semantic. Using button elements or the native details and summary elements instead should help you take care of those issues and make your solution more accessible. 😉

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    0
  • Bárbara Damasceno• 320

    @barbaradamasdev

    Submitted

    Hi. I've some questions about the best way to code. I've done the challenge, but I feel like I'm not doing in the best way. For example: the reset in "*" and "body":

    I used this, and worked:

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

    In the body I put this: height: 100vh;

    Worked, but is the better way to do this?

    Other question is about centralize the content. In all my projects I put the content box in position absolute, but when we change to mobile version I needed to change a lot of things. In this challenge I just needed to change "top", but I was in doubt if was the better way to do.

    Please give me your feedback, it'll help a lot. Thank! :)

    Huddle landing page with single introductory section

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hello, Bárbara Damasceno! 👋

    Nice effort on this challenge! 👏

    There is nothing wrong with using the styles you referenced to reset your CSS. I use those styles all of the time in my projects, too. You may want to look into using a more complete CSS reset for your next project. Here's a decent article on that if you're interested. 🙂

    I'd also suggest looking into making your solution more responsive. Currently, things look good in the desktop and mobile layouts, but not everything is visible in-between (meaning users may have to horizontally scroll to see all of the content of the page). Using tools like flexbox or CSS grid over absolute positioning will help you with this. You can center things will flexbox pretty easily with the following styles:

    display: flex;
align-items: center;
justify-content: center;

    If you’d like to learn more about how to make your site responsive, check out this helpful course.

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1
  • Bárbara Damasceno• 320

    @barbaradamasdev

    Submitted

    Hi!

    In this challenge I was thinking if I use flexbox too much (:D). I was thinking that sometimes I can use margin to give the space between things, but use "gap" looks like work better.

    Is it a "problem" or maybe can be considered a bad code if I use this a lot? Is better just use margin for exemple even though I use just margin-top and look ugly when you inspect the element?

    Other question about a clean code. In the line 95 (style.css) I prefered to use the code just inline, for some cases is ok? Or it's considered a bad practice?

    Please give me your feedback, it'll help a lot. Thank! :)

    Single price grid component

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hi there, Bárbara Damasceno! 👋

    Nice job on this challenge! 👏

    Haha I don't think you can use too much flexbox unless you are using it the wrong way or there is another tool that is better for the job. 😄 I definitely prefer using flexbox gap over margin in most cases.

    Related to your questions about your styles, I would recommend looking into using a code formatter such as Prettier. It'll help you format your styles nicely at the click of a button and you won't have to spend time doing that yourself. 😉

    Also, you may want to wrap the content of your page in a main element as that is considered a best practice and will help to clear a lot of the issues in your solution report.

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2
  • xyzeez• 550

    @xyzeez

    Submitted

    Hello There! 👋🏽

    Here is my solution for this challenge!

    Built Using⚒️ :

    • Flexbox
    • SASS/SCSS
    • BEM
    • Animation
    • Custom Scrolltab

    Upgrade 🚀 :

    • Skip-To-Content button on the header (visible on focus)

    Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

    Thank You, and Keep coding! 👨🏽‍💻

    Responsive Fylo-landing-page-with-two-column-layout [BEM + SASS]

    #accessibility#animation#bem#sass/scss

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Greetings, xyzeez! 👋

    Awesome job on this challenge! 👏 Your solution looks great, is responsive, and has great semantics and accessibility! 👍

    I don't have much to suggest to you except to keep up this great work! 😉

    Keep coding (and happy coding, too)! 😁

    1
  • Lesley Wesley• 345

    @LesleyWesley

    Submitted

    Hi guys!

    This was my first time working with radio buttons in any substantial way, and I tried to make the whole thing as accessible as I knew how, but let me know if there's any way I could improve it!

    Also, I added an error message if the user tries to submit the form before choosing a rating, because I felt like it needed it. The user is also able to choose the rating using the UI or number keys and the "Enter" key.

    As usual, any feedback is welcome! :)

    Interactive Rating Component

    #accessibility

    1

    P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Posted

    Hi there, Lesley Wesley! 👋

    Excellent work on this challenge! 👏 Your solution looks great and the form works very well! 🙌 Great job thinking about the functionality of the form and adding an extra validation error message. 👍

    One thing is that I wouldn't add any alt text to the icons in this component since they are mostly there for design and we don't really want them to be noticed and read by screen readers.

    Also, make to sure validate the form when the user hits the 'Enter' key since currently the thank you screen shows regardless of whether an option has been selected yet. 😉

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1