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
OverviewSolutions18Comments7

All comments

  • Krutagna Patel• 390

    @krutagna10

    Posted

    You can use picture tag instead of using two images inside a div.

    1
  • Krutagna Patel• 390

    @krutagna10

    Posted

    1. Increase the font size of the page, its really small on mobile screens.
    2. You can add feature to remove the notification when the user clicks on single message.
    3. Name variables in lower case, with words separated by hyphens Example : use grayish-blue instead of Grayishblue
    4. You have made spelling mistake while setting the box-sizing on all elements
    5. Add some comments in the code so that it will be easy for the people who are reading your code.

    Marked as helpful

    0
  • Krutagna Patel• 390

    @krutagna10

    Posted

    Hello @smayrant I wanted to know how did you make designo favicon.

    0
  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello Everyone! 👋

    This is my 30th solution on Frontend Mentor! Also, it's my first Advanced challenge. This was a large project and fun project. I learned a lot of new things. 😎

    I learned how to create an accessible hamburger menu. It required me to use an inert attribute. inert is an HTML attribute that prevents users from interacting with the interactive elements. Currently, it has 82.97% support by the time I finish this challenge. But, I still need to use a polyfill for browsers that don't support inert attribute.

    Progressive enhancement was also something that I apply when I did the challenge. Usually, when the users disable JavaScript, I will hide all the page content and tell them to turn on JavaScript. Now, I make it possible to interact with the site content without JavaScript. 🙌

    Now for the questions:

    • Is the menu accessible with your screen reader? I have checked it with Narrator and TalkBack. It seems like everything is fine. But, I am not sure so I recommend trying it yourself with your screen reader.
    • I tested the form on the contact page with TalkBack. It turned out that TalkBack pronounce the input by reading the label and the placeholder of the input. For example, TalkBack pronounces the input name as "Edit box, name, name.". Narrator only read the label of the input (expected behavior). So, is that okay?

    This is a large project. I might miss something or do things in bad practice. So, if you notice something wrong or there are things that I could have done better, please do let me know. 🙂

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    P.S. I wrote everything that I learned on the README.md. You should check it out to see some of my approaches to solving the tricky parts of the challenge. 😉

    Responsive Multi-Page Website with Grid and Flexbox

    #accessibility#lighthouse#progressive-enhancement#sass/scss#bem

    2

    Krutagna Patel• 390

    @krutagna10

    Posted

    @vanzasetia I have one question, if you are using scss then why are you not nesting the selectors ?

    0
  • Kian• 150

    @kiangopez

    Submitted

    If you notice, I have gaps between the pictures under the hero component. What should I do to remove those? I appreciate critiques and feedbacks!

    Sunnyside Agency Landing Page

    1

    Krutagna Patel• 390

    @krutagna10

    Posted

    1. You have to make the display of those images from inline to block to remove those gaps.

    2. You can always add this code at the starting of your css file to make images easier to work with.

     img {
  display: block;
  max-width: 100%;
}

    Marked as helpful

    1
  • Lucas 👾• 104,580

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the Testimonials Grid Section.

    Feel free to leave any feedback and help me improve my solution or make the code clean!

    🤩 I had a lots of fun building this challenge! Mainly because I understood how to apply a focus effect on the card hovered with only CSS and I've also created my own design changes and personal improvements to the challenge elements.

    SPECIAL THANKS to @elaineleung that show me how to add different animation stats for the cards in the intro.

    I added some features:

    • 🎨 Focus effect on hover.
    • 👨‍🔬 Focus effect on card hovered.
    • 📱 New media query breakpoint for tablet screens
    • 😎 Custom Design.
    • 👾Custom button to switch between FEM UI and CORRELUCAS UI.

    I'll be happy to hear any feedback and advice!

    Testimonials Grid Section (Vanilla CSS + Focus Effect + Custom Design)

    7

    Krutagna Patel• 390

    @krutagna10

    Posted

    This comment was deleted

    0
  • Krutagna Patel• 390

    @krutagna10

    Posted

    👾Hello @Cydr4l, Congratulations on completing this challenge!

    I think you can add a paragraph saying "Kindly select a rating" when the user does not select any rating.

    1