Skip to content
OverviewSolutions
7
Comments
43
Elroy Toscano
@elroytoscano

All comments

  • Elroy Toscano•630
    @elroytoscanoPosted over 2 years ago

    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
    @elroytoscanoPosted over 2 years ago

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

    Marked as helpful
    1
  • Elroy Toscano•630
    @elroytoscanoPosted almost 3 years ago

    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
    @DrunkenNeoguriSubmitted almost 3 years ago

    (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
    @elroytoscanoPosted almost 3 years ago

    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
    @elroytoscanoPosted almost 3 years ago

    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,370
    @darryncodesSubmitted almost 3 years ago

    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

    4
    Elroy Toscano•630
    @elroytoscanoPosted almost 3 years ago

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

    1
  • Anosha Ahmed•9,300
    @anoshaahmedSubmitted almost 3 years ago

    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

    17
    Elroy Toscano•630
    @elroytoscanoPosted almost 3 years ago

    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
    @elroytoscanoPosted almost 3 years ago

    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
    @NerijusNoreikaSubmitted almost 3 years ago

    Made with Vue along with Grid and Flexbox and SCSS.

    Most annoying part was the range styling.

    Feedback is always appreciated! ;)

    Interactive pricing component

    2
    Elroy Toscano•630
    @elroytoscanoPosted almost 3 years ago

    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
    @elroytoscanoPosted almost 3 years ago

    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
    @hg8116Submitted almost 3 years ago

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

    calculator-app

    1
    Elroy Toscano•630
    @elroytoscanoPosted almost 3 years ago

    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•880
    @waldosmutsSubmitted almost 3 years ago

    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]

    1
    Elroy Toscano•630
    @elroytoscanoPosted almost 3 years ago

    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