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

All comments

  • @Arfirpo

    Submitted

    Hi everybody! 👋

    Frontend Mentor - News homepage solution

    This is a solution to the News homepage challenge on Frontend Mentor.

    Overview

    The challenge 🎯

    Users should be able to:

    • View the optimal layout for the interface depending on their device's screen size
    • See hover and focus states for all interactive elements on the page

    Links 🔗

    My process ⚙️

    Built with 🛠️

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • CSS Grid
    • Mobile-first workflow
    • Sass - Css Pre-processor

    Author 🙋🏻‍♂️

    P
    Mikhail 400

    @mkostrikov

    Posted

    Cool, but the keyboard navigation is not working.

    0
  • P

    @kaamiik

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I used Astro's component-based structure to create a clean and maintainable form, ensuring accessibility for screen readers and other assistive technologies. This was especially important for elements like radio buttons and checkboxes, which I built from scratch, referencing resources like moderncss.dev to ensure a high level of accessibility and usability.

    Next time, I would approach the project using a framework like React to improve code reusability and handle state management more effectively. Additionally, I would refactor some parts of the JavaScript, particularly the validation logic, to make it cleaner and more modular.

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

    One of the main challenges was ensuring the form was fully accessible. This involved making sure that all the elements, such as inputs, radio buttons, checkboxes, and error messages, could be properly announced by screen readers. To overcome this, I referenced best practices from modern CSS guides and thoroughly tested the form's accessibility using different tools.

    Another challenge was creating custom components for form controls like radio inputs and checkboxes from scratch, ensuring they looked modern and were easy to interact with. I overcame this by experimenting with CSS and refining the layout until I achieved the desired design.

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

    I'd like feedback on any suggestions on how to improve the accessibility and responsiveness of the form. Specifically, I'd love to hear if there's a more efficient way to manage form validation and toast notifications in Astro or in React for future iterations of the project.

    P
    Mikhail 400

    @mkostrikov

    Posted

    Good job

    1
  • P
    Mikhail 400

    @mkostrikov

    Posted

    Maybe it was intentional, but there's an HTML element called "detail".

    0
  • P
    Mikhail 400

    @mkostrikov

    Posted

    Accessibility issues.

    0
  • @jjdavenport

    Submitted

    What are you most proud of, and what would you do differently next time?

    First time adding animation to my page, using Z-index so the article apears from underneath the image. The content for the nav image and the article text and link are pulled from an array and appended to the dom.

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

    The main challenges were the slider animation not the slider itself and making the desktop layout being responsive without overflow on larger viewports.

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

    Having my desktop media query dynamically adjust so it takes up 100% of the viewport and having my article height staying fixed so that it does not appear to jump on desktop. There still appears to be some overflow.

    P
    Mikhail 400

    @mkostrikov

    Posted

    Excellent work.

    Marked as helpful

    1
  • @jjdavenport

    Submitted

    What are you most proud of, and what would you do differently next time?

    First time using sass has some nice features compared to regular css. Built the site mobile first and used bem, will be using bem from now on and continuing to build mobile first.

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

    The main challenge was the desktop site, not quite sure if my layout is correct. Also need to learn more sass features.

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

    Any feedback regarding the layout on the desktop site would be appreciated and tips for sass.

    P
    Mikhail 400

    @mkostrikov

    Posted

    The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. .alert { // The parent selector can be used to add pseudo-classes to the outer // selector. &:hover { font-weight: bold; } } https://sass-lang.com/documentation/style-rules/parent-selector/

    Marked as helpful

    1
  • P
    Mikhail 400

    @mkostrikov

    Posted

    You did a great job!

    0
  • @Stanmancer

    Submitted

    What are you most proud of, and what would you do differently next time?

    This is my first web app.

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

    I struggled to make the calculator work as the necessary values are inputted. I used the onchange event listener to make the calculations as certain values were input.

    input.addEventListener("change", () => {}

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

    I would like to know if there is any way i can make my code cleaner and more efficient.

    Any and all feedback is also welcome. Thanks.

    P
    Mikhail 400

    @mkostrikov

    Posted

    Hello. Add a check for values less than 0.

    0
  • P
    Mikhail 400

    @mkostrikov

    Posted

    Good job. Keep improving your skills.

    0
  • P
    Mikhail 400

    @mkostrikov

    Posted

    ok

    0
  • P

    @AcharaChisomSolomon

    Submitted

    What are you most proud of, and what would you do differently next time?

    Getting the mobile and desktop switch right was fun.

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

    Figuring out how to handle the tooltip and changing the footer was a bit challenging. Created two different footers to handle the mobile state and also created a seperate tooltip component.

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

    Nothing for now.

    P
    Mikhail 400

    @mkostrikov

    Posted

    Congratulations on completing the project

    0
  • P
    Mikhail 400

    @mkostrikov

    Posted

    Well done.

    0