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
OverviewSolutions7Comments43

All comments

  • Elroy Toscano• 630

    @elroytoscano

    Posted

    The website is well designed/developed.

    Here are some pointers you could look into:

    • Give a shot at SCSS and have a look into BEM as it'll help you out with segregating styles effectively.
    • At the booking page, there is a little empty gap associated with the styling at the bottom of the page.

    Marked as helpful

    0
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Well done! The animations really add to the overall experience of the app

    Marked as helpful

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Hi Anosha, you've done a brilliant job at this. Not only is the design pixel perfect but also semantically correct. You've even gone a step further and designed the github readme, so well done 👍

    One tip: Consider placing your img elements in a figure element as the figure element represents self-contained content, whereas img is just embedding an image.

    Hope this helps. Cheers.

    Marked as helpful

    1
  • drunken_neoguri• 290

    @DrunkenNeoguri

    Submitted

    (I wrote this using Google Translate. Please forgive the grammar.)

    Hello! I did this project as the 6th challenge. :D

    The image I saw in the design folder in the starter file did not have an image of the change in hover state, so I thought about how to make the sign up block look like a button.

    And, I saw a box-shadow in the image, so I put it in to solve it!

    Thank you for watching and if you have any other advice, please feel free to reply me! XD

    6th Challenge: Single price grid

    1

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Brilliantly done, the design is responsive as well. You may improve the visual feedback by providing cursor:pointer and changing the color of the button when hovering over the button.

    Hope this helps.

    Marked as helpful

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Brilliantly done Nikola, the design is pixel perfect 👍.

    The accessibility issue can be resolved by using an aria-label:"change theme" on the button with todo-icon class. You may provide a little more horizontal padding for each todo list item as the circle and cross icon are close to the edge of the list item box.

    Marked as helpful

    1
  • darryncodes• 6,430

    @darryncodes

    Submitted

    Hi everyone 👋

    Good to be back after having a few weeks off over the holidays.

    I used this challenge to learn more about accessibility, focusing on:

    • semantic mark up and use of interactive elements
    • custom focus states
    • use of aria-label
    • making sure i removed animations and transitions for people that prefer not to see them

    I also had a play around with some animations which was great practice!

    Any feedback that could help me to improve my understanding of accessibility would be very welcome!

    Happy coding 🤙

    Fylo data storage - HTML, SCSS, JS, Flexbox, mobile-first & @keyframes

    #accessibility#bem#sass/scss

    4

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Brilliantly done Darryn, especially the use of the meter tag. The code is very readable as well. Great job 👍

    1
  • Anosha Ahmed• 9,340

    @anoshaahmed

    Submitted

    First time using SCSS! I love it! It's so convenient!

    One thing I wish I had done differently is not nesting. I don't know why I was nesting at first... maybe because I was using SCSS for the first time?and it felt cool? But when it came to do media queries, it was so inconvenient to deal with specification etc. I'm gonna make sure not to do that again if I don't need to.

    One problem I kept having, with this solution, was that every time I would save, and my live server would reload, the font-size of random paragraphs would appear larger than before I saved last time. And it was weird because I didn't even touch the font-size of those paragraphs. So, I would stop the live-server and open it again, and the font-size would be back to normal. Then I'd save again, and the font-size would appear larger. Ugh, it was such a hassle.

    But yay I'm happy with the result!

    "clipboard landing page" + sass + flexbox + mobile-first + responsive

    #sass/scss

    17

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Hi Anosha, you've done a great job at the design. Pixel Perfect. The animations are really smooth 👍

    There's just one issue, the buttons are designed with a (link) as the element, which is semantically incorrect as when you click on any of the buttons, notice the url changes to https://anoshaahmed.github.io/fem12-clipboard-landing-page/#. The "#" symbol at the end represents the href of the link element which directs you to another page instead of a button. Here's an article to help you out with the differentiation between these elements: Difference between link and button.

    Hope this helps.

    Marked as helpful

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    You've done a great job with the design and functionality. You can reply, you can add only one like/dislike, however, when you click on the delete button, there needs to be a "pop up", which is a warning to the user regarding deleting the comment. Again, the design is well done, good job 👍.

    Marked as helpful

    1
  • Akimb• 250

    @NerijusNoreika

    Submitted

    Made with Vue along with Grid and Flexbox and SCSS.

    Most annoying part was the range styling.

    Feedback is always appreciated! ;)

    Interactive pricing component

    #vue#sass/scss

    2

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Well done. Pixel perfect design. Whenever you use form elements, use a label tag as it facilitates accessibility.

    Download AXE dev tools so that you can clear any accessibility issues while coding : https://www.deque.com/axe/devtools/

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Hi Aakash, good job with the design. There's just a little box shadow missing on Kira and Jeanette's cards.

    Seeing through your code, you've used p tags for each article's title/persona name, instead, swap them for h2 tags to improve the semantic correctness as even each article/section needs a heading tag.

    Download AXE dev tools so that you can clear any accessibility issues while coding : https://www.deque.com/axe/devtools/

    Hope this helps.

    Marked as helpful

    1
  • Harsh Gupta• 90

    @hg8116

    Submitted

    First intermediate project submission on Frontend Mentor. Any and all suggestions are greatly appreciated.

    calculator-app

    1

    Elroy Toscano• 630

    @elroytoscano

    Posted

    The design is pixel perfect and the functionality is on point. Great job.

    You could improve the visual feedback by having cursor:pointer on interactive elements like buttons and the theme switcher.

    Your accessibility warning can be taken care of by wrapping the "calc" text in a h1 instead of a div.

    Download AXE dev tools so that you can clear any accessibility issues while coding : https://www.deque.com/axe/devtools/

    Hope this helps.

    1
  • wuts• 860

    @waldosmuts

    Submitted

    Had to start over several times, even considered learning PHP just for this exercise but I pulled through in the end. Could still do with a lot of refactoring but it works as you'd expect. Might try this one again when I taught myself React.

    Interactive Comments Section [SASS, Tailwind CSS, jQuery]

    #jquery#tailwind-css#sass/scss

    1

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Brilliantly done! The animation of the reply box is brilliant 👍. The functionality is perfect as well.

    There are some accessibility issues like an alt for the img element and an h1 element. Download AXE dev tools so that you can clear any accessibility issues while coding : https://www.deque.com/axe/devtools/

    Marked as helpful

    0
  • ZTHA• 60

    @ztha952

    Submitted

    This project improved me on use of Tailwind CSS and I was a little struggling with positioning CSS I have to overwrite some CSS on tailwind. But I will try again to make all tailwind CSS in this project when I get free time.

    Responsive Landing Page with Tailwind

    #tailwind-css#jquery

    2

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Good job at the visual design.

    Here are some pointers: The navlinks, "Projects","About","Services" in the navbar and footer as well as the social media icons represent links to pages to which the user can navigate to. Wrap them in a link element a and place it in the link li element. Moreover, these links should be styled with hover effect and also give a visual feedback to the user by changing color of text/button. For social media icons, use the attribute target="_blank" so that a new page is opened up instead of continuing in the same page.

    Hope this helps.

    0
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Brilliantly done for the pixel perfect design. Great job for having no accessibility and HTML issues.

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Good job at the pixel perfect design. You can improve the visual design by using cursor:pointer for your buttons as that would provide visual feedback to the user.

    For your HTML issues, keep only 1 h1 in each page as it is accessed by screen readers. All the other headings should repeat in ascending order. In your footer, you've used divs with classes "about" and "contact", instead use only unordered list, ul and each item should be placed in a list-item li. The footer links are "links", i.e. a and not p elements, as they are used to navigate to that page/section.

    Hope this helps.

    0
  • AYoNiEZ• 880

    @AYoNiEz

    Submitted

    I don't know how to change button color when click it. **If you know pls comment me ,i'm so appreciate that. Thank

    Article preview component

    1

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Buttons provide visual feedback when you hover over them or click them.

    I checked through your code and you've given your button an id=share and styled it by selecting it. For hover changes, you can do the following: #share:hover{ background-color:color_of_your_choice } For active changes(i.e. when you've clicked on the button), you can do the following: #share:active{ background-color:color_of_your_choice }

    For your accessibility issues,

    1. Your button doesn't have text, so you could use aria-label="share"
    2. Every document must have a <main></main>, just change from <div class="container">...</div> to <main class="container">...</main>

    For checking your other accessibility issues, download this extension: https://www.deque.com/axe/devtools/

    Hope this helps.

    0
  • Avatarfreak• 655

    @avatarfreak

    Submitted

    Feedback is welcomed, CRUD functionality has been implemented and used local storage for persistent data. Styles for buttons and floating labels are implemented for better user experience and interaction.

    Responsive design, tailwindcss, nextjs

    #accessibility#next#tailwind-css#typescript

    1

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Brilliantly designed and developed, especially, the subtle movement of "Add a comment" placeholder in the "Add comment" component.

    There's a minor bug, when you click on "Edit", it pops up the same message of "Delete message", the functionality is perfect though, you can continue with editing, doesn't allow you to edit in case you didn't make any changes, so you've taken that **edge **case into consideration.

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Hi Anosha, great job with the pixel perfect design and clearing Accessibility and HTML tests.

    Here are some areas you may improve:

    1. As Aakash mentioned, your icons class and sub-class icon could use visual feedback, like change in backgroundColor and cursor:pointer.
    2. You may consider improving semantics by using an unordered list ul for icons instead of div and li for the icon div. Again good job with providing alt for the img tags.
    3. The progress bar from 0GB to 1000GB indicates a range and you can use <input type="range"/> followed by labels. This will make your progress bar code semantically correct. Here's an example: https://jsfiddle.net/okyf0omz/3/

    Hope this helps.

    Marked as helpful

    3
  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    Hello, Frontend Mentor community! This is my solution to the Huddle landing page with a single introductory section.

    I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are still free to download or use the code for reference in your projects but I longer update it or accept any feedback.

    Thank you

    Huddle landing page with a single introductory section

    4

    Elroy Toscano• 630

    @elroytoscano

    Posted

    Hi Catherine, good job with the design and not getting any Accesibility and HTML issues.

    Here are some areas you could improve:

    1. The original design has a padding of certain units all around(maybe 6 or 8rem), the positioning of the social media icons breaks that alignment.
    2. In case you're making a circular button, in the styling the width and height should be the same. The facebook icon is elliptical, after checking through your code, the media-icon class should have the same height and width,(32px -width and 38px height is causing the elliptical structure), whereas twitter and insta icons are perfect.
    3. When hovering over any button/link, cursor:pointer and subtle change in backgroundColor provide a good visual feedback to the users.

    Hope this helps.

    3
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Brilliantly done. Especially the animations. Upvotes/Downvotes are working as per requirement. The layout is perfect as well.

    You can improve the readability of your code by checking out certain methodolgies like the following: https://github.com/ryanmcdermott/clean-code-javascript https://dev.to/dglsparsons/write-better-code-and-be-a-better-programmer-by-never-using-else-statements-4dbl

    Marked as helpful

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Hi Priya, you've done a great job with the design.

    You can resolve the accessibility issue by adding a h1 element. Use these tools for clearing out accessibility related issues: https://www.deque.com/axe/devtools/

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    You've used a h3 as your card-title component. Change it to an h1 as there needs to be one level-one heading.

    In addition, while hovering over the image, use cursor:pointer to provide visual feedback to the user.

    Other than this, you've done a good job at the design.

    Marked as helpful

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Works perfectly. Well done 👍

    1
  • Elroy Toscano• 630

    @elroytoscano

    Posted

    Your HTML issues can be resolved by adding a heading (h2-h6) in both the sections.

    Your layout changes from column to row at 600px and each card of the row element has an inadequate amount of space around it. You may want to change the breakpoint from 600px to 1024 px, so that when the layout change occurs, each element will have adequate space to work with.

    Marked as helpful

    1