Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
32
Comments
68
P
Darkstar
@DarkstarXDD

All comments

  • P
    Kyle Mulqueen•400
    @kmulqueen
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how quickly this came together. I'm also proud of implementing Context-API, even though it may be overboard for this app. I just wanted to practice and am grateful that it came together.

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

    Implementing Context-API was a bit challenging, but that is why I decided to try. I need more practice. I referenced some of my other projects that use context-api and modeled this after those projects.

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

    Context-API and state management patterns. Also I would appreciate feedback on my Tailwind CSS usage. I think that has been improving but I'm still not sure I'm using utility and component classes correctly.`

    Rating Component with React, TypeScript, and Tailwind CSS

    #accessibility#react#tailwind-css#typescript#vite
    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted about 1 month ago

    Any reason why you are not allowing the ref to be passed in for types? I see you use ComponentPropsWithoutRef in most places. I understand for most elements you may not need a ref, but i don't see a reason why it shouldn't be allowed in a case where the consumer may want to pass it. I would generally use ComponentProps<"element type">.

    Any reason why you are writing all your tailwind classes separately from the components and inside a separate CSS file? You are basically going back to vanilla CSS up to a certain extent with that approach. If it's intentional then fine, but usually people use tailwind classes inline, inside the component, so the structure, logic and styles are all contained in one place.

    Also what's the idea behind the CardText and Container components? They don't seem to be having any default styles or logic. The styles are defined by the consumer. So i currently don't see a reason why they are needed.

    BTW i am not saying any of these are wrong or right. Your solution looks nice. I just read others code and try to understand any patterns that i am not familiar with.

  • PastaSus•400
    @PastaSus
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think i did pretty well in this challenge, but i would still like some feedback on things i could improve on.

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

    None so far in this challenge just waiting for some feedback

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

    Recommendations on my code too improve are very open of course

    Four-card-feature section with grids

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 4 months ago

    I don't see many issues and it's a nice solution. Here are couple of suggestion.

    • header is usually for content that repeats across multiple pages on a site. Usually it's positioned at the very top of a page and contains the the company/brand logo and the navbar. The content you have put inside the header is specific to this page. So i wouldn't use a header here. Also a h1 being inside the header doesn't sound right either. I would include the h1 and that p in the main and remove the header.
    • You can definitely utilize the extra space in mid size screens. Use your browser dev tools and change the screen size and see. There is lot of unused space from around 500px to 1400px screen sizes. You are switching to the desktop layout very late. You can switch to the desktop layout much more earlier. When i did this challenge i added a tablet layout as well. On mobile screens it can be a 1 column grid. Then on mid size screens it can be a 2 x 2 grid. Then on desktop layout it can be the layout that you currently have. It's just an idea, it's up to you to do something with the extra space that's currently there.
    • The padding-top you are using on the section called four-card-feature should actually be a margin. Generally padding is used to get the spacing between an element's edges and it's content. margin and gap is what you use to get the spacing between two sibling element. What you have done is not wrong, but i think it's a good mental model to have and follow.
  • NaitpesSuinonta•60
    @NaitpesSuinonta
    Submitted 5 months ago

    Blog Preview Card

    #vite
    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 5 months ago

    Looks nice, i have couple of suggestions.

    • You don't have to specify width: 100vw for the body. Body is a block element, and by default block elements take full width of the screen.
    • You shouldn't give a fixed height for containers that contain text. Currently you have given a fixed height for the card. If some more text were added to the card, text will start to overflow. Because the card can't grow it's height past the fixed height you have defined. You don't need to specify a height at all. The browser will calculate the height based on the content inside the container and things like font sizes and padding etc.
    • Use meaningful elements. div and span doesn't have any meaning. They are good for layout and and styling purposes. The label and the date should be p elements. Same way the user's name should also be a p. It's fine to have text inside a span, but the span must be inside a meaningful element like a heading or a p.
    • I feel like the image at the top is just a decorative image. It doesn't add any meaning. Images like those can be treated as decorative images by giving an empty alt. (alt=""). But if you feel like it should have an alt text, it's fine.
    • When an hover effect is present, it implies to the user that it must be an interactive element. Currently you have given the hover effect to a heading. Headings alone are not interactive elements, so having a hover effect on it doesn't really make sense. What should happen here is, you should have an a element inside that heading. So in a real site, when the user clicks on it, they will be taken to the actual blog page. That is the purpose of this card component. Picture it like this, there will be multiple of these cards on a page. Clicking on each card, should direct the user to the relevant blog post. For that to happen you need to have an a element inside the card.
  • P
    Matthieu Bonjour•270
    @Matthieu83600
    Submitted 5 months ago

    QR Code Component using HTML CSS

    3
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 5 months ago

    Nice solution. I have couple of suggestions.

    • You should never give a fixed height for text containers. In your card__content class you are using a fixed height. If some more text were added to the children of that element, text will overflow. Because of the fixed height the container can't grow freely to fit all the text content. There's no need to specify height for text containers. The browser will calculate it for you based on the content inside the element, and stuff like font size, padding etc.
    • Same with the height: 100vh on main. Use min-height: 100vh there, so your main can grow if needed.
    • I wouldn't use a background image here. I would use an img tag, so that i can give it an alt text like "QR code leads to frontendmentor.io". Currently if a screen reader user comes across this component there is no way for them to know that there is a QR image present in this.

    But yeah, other than that, it's a nice solution.

    Marked as helpful
  • P
    David Ruiz•320
    @Davichobits
    Submitted 5 months ago
    What challenges did you encounter, and how did you overcome them?

    The custom font configured in the project is not displaying correctly on the deployed site, even though it works fine in the development environment.

    Testimonials Grid Section using Tailwind CSS and GRID

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 5 months ago
    • When using Github Pages the file paths needs to be relative, rather than absolute. Use relative file paths in your .css file when referencing the font file. That should fix your issue.
    • Another small note. You are giving a fixed height to your grid, which causes text to overflow when the screen gets smaller. You should never limit the height of containers that contain text.
    Marked as helpful
  • Martin Mička•20
    @Mareddie
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to write some CSS! As someone with very strong background in backend development, cloud and devops, this is a nice change of pace.

    I would definitely write CSS in more scalable way next time. I was aiming for the best replication of the design, so if I wanted to scale the design a bit, I would need to improve the solution (e.g. less specificity for texts, etc.)

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

    Reading design file was a bit of a hassle at first, reading Figma without DEV mode is clunky. I'm not gonna pay for Figma unless I actually use it for real project.

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

    I think that further down the line, spacing, gaps and layout will be a tricky to do right without frustration.

    QR code component solution using plain CSS and HTML

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 5 months ago

    Looks good. You have avoided lot of mistakes everyone does on this first challenge. Here are couple more improvements you can do.

    • The "Improve your front-end..." text can be the heading of the card. You can use a h1. In a real site this card would be placed in a page along with some other content, so it's unlikely the card heading would be the h1. It would probably be a h2 depending on the context. But in the given scenario you can use a h1 for it.
    • Use landmark elements in your page. There should always be a <main> element, wrapping the main content of the page. In this case your div with the class .container can be the <main>, instead of being a <div>. Some other landmark elements would be <header> and <footer>. Both are usually for content that repeats across multiple pages of the site. <header> usually contains the company logo and the navbar and is positioned at the very top of each page. <footer> is where the attribution stuff go and is positioned at the very bottom. So your attribution should actually be inside a <footer>. You can change the div with the class .attribution to be <footer>.
    • You can make the alt text bit more descriptive. Instead of just saying QR code, you can mention where the QR code leads to as well. I would use something like "QR code leads to frontendmentor.io".
    Marked as helpful
  • ABHISHEK PM•70
    @abhishekpm15
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I have started my challenege path and would love to learn most out of this. Next time I would use different approach to solve the same challenge. I have used plain CSS in this challenge. Next time I would prefer using Tailwind CSS.

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

    There were no challenges I faced, since this was a beginner level challenge.

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

    I would like to know if my approach and design principles were good enough to be applied in real projects.

    Responsive QR component using HTML and CSS

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 5 months ago

    Couple of suggestions.

    • Use meaningful elements. Currently everything is just divs. divs are good for structuring things and help with layouts, but div itself is not a semantic element, so it doesn't really have any meaning.
    • "Improve your front-end..." should be the heading of this card. It can be a h1. Usually this entire card will be placed in a page along with other elements, so in that case this won't likely be the h1. The h1 would be some other element that explains the content of the entire page. But in the given scenario you can make it a h1.
    • "Scan the QR code..." should be a <p>.
    • Use rem unit for font-sizes. px units won't scale with the browsers font settings, so if the user who visits your webpage have changed their browser default font sizes, they won't be reflected on your page. rem on the other hand respects the browsers font settings and change accordingly. So always use rem for font sizes.
    • The card should not have a fixed height. It will cause overflowing if the content inside the card changes. You don't have to specify the height of text containers. The browser will automatically calculate it for you based on the content inside the card, and other values like font sizes, paddings etc.
    • Same way the card should not have a fixed width either. When a fixed width is used the card can't shrink past that value, even if the screen size is small and the card doesn't have any space to fit in. That again will cause overflow issues and break your site. Instead use a max-width on the card. So you can control how large the card is allowed to be, but at the same time the card has the freedom to shrink automatically when there is no room to fit in smaller screens.
    • Don't mix ids and classes when it comes to styling. Always use classes for styling. Mixing the two will make you run into specificity issues. You can use ids when linking two elements together. For example linking an input element with the label element, or when using aria-describedby.
    • You should use landmark elements in your page. All the content in your page should be wrapped in a <main>, except the content in <header> and <footer>. So the <div> that you have given the id="card" should actually be a <main>. The attribution should ideally go inside the <footer> and should be outside of the <main>.
    • The attribution should be at the bottom of the page, it's bit weird seeing it at the very top like that.
    • There's no reason to use position: absolute on the card. Also i don't see a reason for the .card-body div. You can directly use the .card div. Try to keep the HTML simple.
    • I would give the height: 100vh to the body instead of giving it to that div. And make sure you use min-height and not height. Never limit the height of the body or any element that contains text.
    Marked as helpful
  • P
    Maria Sidorova•770
    @SidorovaMaria
    Submitted 5 months ago

    Testimonials grid section

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 5 months ago

    Looks good, i have couple of suggestions.

    • The way you are centering the entire grid is not very optimal. To center the grid you can use flex or grid on the parent element, which is the body element. You will have to give a the body a min-height: 100dvh. Giving large margins in order to center stuff is not really correct.
    • I also see you are using large margins to horizontally limit the width of the grid. For that use a max-width on the grid.
    • On the mobile layout you are giving a width for each card. Avoid giving fixed widths for cards that contain text. Because of the fixed width, the card can't shrink past that fixed width even if there is no space for the card to fit in smaller screen sizes. Instead use a max-width. That way the card's can shrink without any issues. That being said you don't have to specify the max-width on individual cards. Instead you can control the width using the grid. Because all cards are contained inside the grid, you can use the max-width on the grid.
    • You shouldn't skip heading levels. They should go in order. Every page should have a maximum of one level one heading (h1). Then it will be h2 headings, and then h3 etc. You have a used a h4 for the testimonials which is not really right. Also i don't think the testimonial should be a heading of any sort. A heading should be something that explains what comes after it. There is nothing that comes after the testimonial texts. I think the users name is the ideal heading for each card. Because all the content that comes after it sort of belongs to that user name element. It's the user's verification status, user's testimonial etc. So i would make the user name of each card a h2. Why not a h1? Because ideally there should be only one h1 in a page. In this design there is no visible h1, so you can use a visually-hidden (also known as sr-only) element for that.
    • You can also use a blockquote element for the two testimonial texts on each card.
  • Ceesay Fofana•70
    @cfofana
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I practiced using a mobile-first approach. I practiced using Figma to get the design specs.

    What specific areas of your project would you like help with?
    1. How do I change the font size at mobile size screens without using media queries?

    Blog card preview using FlexBox and mobile first design

    3
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 5 months ago
    • You can use the clamp() CSS function to change the font size based on the screen size, instead of using media queries.

    Couple of other suggestions.

    • Make sure you are always using rem for font sizes. Currently in your variables you have defined the font sizes in rem, but on the body you are using px.
    • Instead of using width, use max-width for the container size. When you use width the container can't scale below that size even if the screen sizes shrinks. This won't be very obvious in this specific situation since in this case the width value is around 330px, but still it's better to get into the habit of avoiding fixed widths for containers that contain text. So instead use max-width, which allows the container to scale down when there is not enough space in the screen to fit.
    • The HTML & CSS element should be the heading of this card. Not a p. You can use a h1 for that. On a real site it won't probably be the h1 since there will be multiple cards like these on a page, and the h1 of the page would be something else that describes the content of the whole page, so in that case this would probably be a h2. But in the given scenario this can be the h1.
    • Make sure you are using a <main> landmark element. It should wrap all the content of your page except the contents of <header> and <footer>. In this project you don't have a <header>. But you do have a <footer>. The content of the attribution should ideally go inside a <footer> and it should be outside of the <main>. So it will look like this.
    <html>
      <head></head>
      <body>
        <header></header> //Not relevant in this project
        <main></main>
        <footer>Your attribution content</footer>
      <body>
    <html>
    
    Marked as helpful
  • P
    Serhii Orlenko•415
    @grifano
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    What I’m most proud of:

    • I discovered a better approach to password generation and successfully improved the implementation.
    • I found a solution for styling a custom range input by conducting thorough research and adapting it to fit my needs.

    What I would do differently next time:

    • I would try to spend less time overthinking at the beginning. Instead, I would focus on completing the first implementation quickly, then take a short break before revisiting the project with fresh eyes to spot potential improvements.
    What challenges did you encounter, and how did you overcome them?

    Challenges I faced:

    1. Password Generation Logic:
      The most challenging part was designing a solution to generate passwords while handling various options, such as lowercase, uppercase, numbers, and symbols.
      How I overcame it:
      I came up with the idea of generating an array containing random characters for each setting. However, I spent some time researching how to toggle these options effectively, which helped me refine my approach.

    2. Custom Range Slider Styling:
      Styling a custom range slider was quite difficult.
      How I overcame it:
      After conducting research, I found an article with a solution similar to what I needed. I adjusted the code to suit my project, which allowed me to style the slider successfully.

    What specific areas of your project would you like help with?
    • Code Review:
      I believe feedback from more experienced developers is the best way to improve my skills and get closer to the job I’ve been dreaming of for so long. Please let me know if way that I was write a code is good enough for working as a developer, and how much time such a project should take according to the real life job?

    • State Management:
      I used a lot of states in my implementation. While this approach makes the code clear and understandable for me, I wonder if it's the best practice or if there’s a better way to handle it. I’d love to hear suggestions on improving state management in my project.

    Password Generator WebApp | React | TypeScript

    #typescript#react
    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 6 months ago

    Hey nice solution. Couple of things i noted.

    • You could use word-break: break-all on the password text. I see you are using overflow on it, and it's currently causing a scrollbar to appear next to the password. You can remove the overflow and use break-all instead. I think it will look better.
    • In the button's SVG you are using a property called hanging which i am not familiar with. However that is causing a weird result i am not sure how to explain but you can see it your self by tabbing into the button using the tab key. I think instead of hanging you may have wanted to use height.
    • Currently it seems there is no way for me to get a Strong strength password. Pushing the scrollbar to the very end and checking all 4 checkboxes i am still getting the strength as Medium. You can either let the user chose more characters or tweak your conditions so that a 20 character password is Strong. I feel like a password with 20 characters and all 4 of those options selected should definitely be marked as Strong.
    • Currently the user can uncheck all 4 checkboxes and click the button. I think it's better if you displayed some error message when user tries to uncheck all 4 checkboxes. It's a bit weird when the button is clicked and an empty text is displayed on the password field since the user has unchecked all 4 options.
    • Another small idea. I think it would have been better if you made it in a way that whenever the user changes a parameter a new password is generated and displayed, rather than user needing to click the button. This is just a preference thing as that is how i implemented my solution and i have seen other password generators like Lastpass and Bitwarden doing the same thing in their products.
  • AeroB•330
    @AeroBW
    Submitted 7 months ago

    Tip calculator app

    #react#vite#tailwind-css
    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 7 months ago

    Hey, your solution looks good, however i have few suggestions.

    • Instead of input type="text", you can use input type="number" for the bill, custom and people count. That way the user won't be able to enter any text entries at all. You can still do your validation in JS, but as a first layer of filtering i think it's far better to limit what the user can enter into the input fields.
    • The inputs needs labels. The elements bill, number of people should actually be label elements and their for attributes should point to the input element they are labelling. Currently you have them as p elements.
    • The icon images needs empty alt attributes. alt="". They are decorative images so no need any descriptive alt text but still the alt attribute needs to be their with an empty string. Otherwise some screen readers may read the file path of the icon as the alt text.
    • The error elements should have aria-live attributes. So when that element is populated with the error message it will be announced to screen reader users.
    • Ideally the tip buttons should be radio buttons (input type="radio") rather than normal buttons. For this design you will need to custom style the radio buttons if you went that way. There are few ways you can do that. How i have done it is visually hide the radio button and style the label to look like radio buttons and based on the checked and focus states of the radio button i styled the label.
    • I would put the logo image inside the main as well. Usually the logo image along with a navbar lives in the header landmark element but in this design i think it's fine to have it inside the main. Either way it should be inside an landmark element. Be it a header or the main. Currently it's not inside any.
  • Duncan Chege•340
    @duncan-chege
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?
    • I'm proud of using Next JS & Typescript on this project. It was my first time using typescript and I'm happy that I learned as I implemented the functions
    • I'm proud of completing the project under the time I set for myself (1 week)
    What challenges did you encounter, and how did you overcome them?
    • Implementing typescript was challenging since it was my first time using it on a project. I overcame it by learning typescript basics before I began the project. Also, using chatGPT where I was stuck
    • Deploying the project to Vercel was challenging at first but I learned that I had to build it before I deploy it

    Time Tracking Dashboard using NextJS & Typescript

    #next#typescript#tailwind-css
    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 7 months ago

    Looks ok but i have some suggestions.

    • Daily, Weekly, Monthly should be buttons. Those elements do something when the user clicks them. So they are interactive elements. You currently have them as <li> elements, which alone is not an interactive element. Because of this a keyboard user can't actually navigate through those 3 elements because they lack the interactive features a button or an anchor would offer.
    • Same way the 3 dots on each card represent a button, because it will do something when the user clicks on it. You currently have it as an image. Again, an image alone is not interactive so it doesn't make much sense to just have an image there.
    • You have skipped heading levels. Don't do that. A site should always have one h1 and then other heading levels should be increased in order. h2, h3 etc.
    • You currently have the name as a h3 and also the card hours as a h3. I don't feel like both of them are in the same level. The name would be a h1 because it acts as a heading for all the other elements in this page. Then the terms Work, Play, Study etc. would be h2s. Those words acts as a heading for what comes after them, which are the current hours and previous hours. So in an ideal situation the hours would be just a p. Because hours doesn't act as a heading for any content.
    • You also need a <main> element in your page. It's a landmark element that wraps all the content in your page except the content that goes in <header> and <footer> (which are not needed in this design). You can look them up.
    • Give a max-width for the container wrapping all the elements, so that your cards doesn't keep expanding forever in larger screens. It doesn't look good when it's far stretched out. You can check it using the browser dev tools and increasing the screen size.
    • You are currently giving cursor: pointer and a hover effect to the card. To a user, that implies the cards are interactive. But again you have not used any interactive element so clicking on them won't do anything and keyboard users won't be able to navigate into them. The card's should actually be a elements and in a real site clicking them would probably load a new page to show in depth details about the activities that were logged for that category.
    • The above are some fundamental stuff that should have been fixed in very early challengers.
    • After all of the above you can actually take it further an implement this in a tabs pattern. Because after all this is a tabs pattern. Daily, Weekly, Monthly are tabs. When the user clicks on one of them the corresponding tabs panel will be displayed. You can check the resource i have linked, it explains it further.
    Marked as helpful
  • Carlos Teixeira•30
    @scarlosteixeira
    Submitted about 2 years ago

    Newsletter signup challenge, made with React Sass and TypeScript.

    #react#sass/scss#typescript#vite
    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 8 months ago

    As part of the learning paths, i was asked to give some feedback on your solution. Couple of suggestions i have.

    • You can switch to the desktop layout bit more earlier, so mid size screens won't see lot of empty space.
    • Currently the error message is displayed as soon as i type the first letter in the input. I think it's a bit annoying. You should allow the user to try and submit at least one invalid entry first, before showing any errors. The ideal option would be to validate onblur.
  • Sarah•580
    @AutumnsCode
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am really proud how smoothy the JS came along. I had been worried that it might take me a little bit longer. I would like to structure my css more. Sure, I could use SCSS or Co. but I didn't believe it was neccessary for this challenge.

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

    Well, the challange came with Netlify. When I run npm run build the JS file wasn't exporting into the dist file and so the function didn't work either. I did some testing outside then I realised I needed to add type="module" into the script file.

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

    Any feedback is welcome!

    Responsive Article Preview with HTML, CSS and JS

    #vite#bem
    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 8 months ago

    Hey. Looks like this is a 4 month old submission but somehow in the learning paths i was asked to give feedback on this. Overall it looks good, but here are some suggestions i have.

    • There is no need for a <header> and a <footer> in this challenge. And even if there was, those two should not go inside the <main>. They should be outside of the <main>. This is just a component, so <main> should be the only landmark element needed here.
    • <header> and <footer> both are usually used to wrap content that repeats across multiple pages in a website. <header> you usually see at the very top of a site containing the site logo and the navbar (site navigation). <footer> at the very bottom usually contains any attribution of the site, some contact info, a sitemap (secondary site navigation) etc.
    • When a button or a link only has an image/icon inside it and no text, give it a aria-label. That way screen readers can announce that name when a user navigates into that link. Otherwise the user won't know what that link/button will do since there is no text on it to be announced. You have already given an aria-label to the share button, you can do the same for the social media links as well.
    • I think there is no need for the alt text on that user avatar. Just reading out the name of the person doesn't make that much sense because you already have the name of that person right next to it. So the screen reader will be just reading the name of the person twice. Also at the same time it's very small that there is no point trying to describe that image either. So i think you can keep the alt text of that avatar empty. alt="".
    • Currently when the site loads, the share dialog pops up and then disappears. When i initially click on the share button it doesn't open the dialog. Only when i click the second time the dialog opens. This only happens when the page first loads.
  • P
    TheWraithDev•70
    @TheWraithDev
    Submitted 8 months ago
    What specific areas of your project would you like help with?

    Responsiveness

    Flexbox to make responsive social landing page

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 8 months ago

    Looks nice. Some suggestions.

    • Always use rem for font-sizes. That way if the user changes their default browser font-size, the text in your website will scale accordingly. This won't happen if you used px for font-sizes.
    • Try to avoid having text inside div or span alone. They are meaningless elements used for grouping or styling purposes. Change that quote text to a p element or better, for a blockquote element. You can use span if you want to select some text that is already inside a p.
    • There should be an anchor (<a>) element inside those list items, because if a user clicked on one of those social media names they should be taken into that site. Otherwise having those social media names there would be useless.
    • That horizontal padding on the list items is huge. Is there a need for much padding? Whenever you are using that big amount of padding, specially in a small component like this, it should be a sign you are doing something wrong.
    • The card shouldn't have a min-width. It should have a max-width if needed. Because of that massive padding and the min-width on the card, the card is not responsive in small screen sizes. Ideally a site should look good (responsive without any overflow issues) until around 320px screen sizes.
    • I would give a small padding to the body so that the card won't hit the edges of the screen.
    Marked as helpful
  • P
    Sani development•80
    @sepehrsylvanus
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?
    • Using css variables
    • Nice design
    What specific areas of your project would you like help with?
    • Review HTML CSS

    Social links

    2
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 10 months ago

    Looks nice. Some suggestions.

    • Every page must have a <main> landmark element wrapping the main content of the page.
    • The attribution should go inside a <footer> landmark element, which will be outside of the <main>.
    • I would use a <h2> for the user's name here. It acts as a heading for the content that comes after it.
    • Use rem for font-sizes. If the user change their browser font size, the text in your site won't react to it because your font-sizes are in px. If you have the font-sizes in rem, text in your webpage will scale according to the the users preferred browser font size. I would use rem for max-width too.
    • Do you need the div that wraps the <p> element which contains the user's bio? I think it's not needed. <p> element alone is fine. Try to keep the HTML simple.
    Marked as helpful
  • Itoro (Celine) James•200
    @CelineJames
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that i am getting comfortable using CSS grid. i am really proud of that, i tried using the mobile first design technique and i prefer that next time i would try to make use of Sass technique.

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

    Nothing much.

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

    well, i am still learning and practicing my efficiency with grid layout.

    CSS grid layout

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 10 months ago

    Looks nice. Some feedback.

    • Heading levels should go in order. If you used a h3 for the name, you shouldn't be using a h1 for the testimonial text that comes after the name.
    • You should not have multiple h1 elements in a web page. h1 is usually the top most heading that describes the content of the page. In this design you actually don't have a h1. But you can create a visually-hidden element and give that a h1 if you want.
    • Looking at how you have used the heading levels, i feel like you are deciding the heading level based on how they are styled in the design. You should not be doing that. You should decide what elements to use based on their semantic meanings. Not styles. After that you can use CSS to style the headings however you want.
    • I would use a h2 for each name and then use <p> elements for the testimonial text. I would also wrap the testimonial <p> elements in a <blockquote> element.
    • I think it would be better if you give the container a max-width in rem, so that the grid items doesn't keep increasing in size on larger screens.
    • It's better to use rem for font-sizes, media queries and max-width. If the user changes their browser font size, text in your site won't respect that if the font-sizes are defined in px. If you have them in rem, the text will scale accordingly with the user's preferred font size. I usually use rem for all values, not only fonts. But it's just preference.
    Marked as helpful
  • Amit-R328•150
    @Amit-R328
    Submitted 10 months ago
    What specific areas of your project would you like help with?

    Any feedback is appreciated

    Responsive social link profile using angular and flex

    1
    P
    Darkstar•1,420
    @DarkstarXDD
    Posted 10 months ago

    Looks nice. I have couple of feedback.

    • The <header> or the banner role is usually used to wrap content that is common across multiple pages of a website. Usually you see it at the top of the webpage wrapping the site logo and a navbar. I would not use a <header> in this challenge.
    • What you need is a <main> landmark element. Every web page needs a <main> element wrapping the main content of the page.
    • The <nav> element is for a list of links that navigate within the site. Not for links that navigate to outside websites such as social media sites. In this case having the links inside a <ul> is enough.
    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub