Skip to content
OverviewSolutions
17
Comments
20

1deadjoe

@1deadjoe370 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Samiullah•490
    @samir-Deve
    What are you most proud of, and what would you do differently next time?

    Well I am proud that I am building multi-page websites, I would try to write less CSS code, I think I wrote abundant CSS code.

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

    This was first multi-page project I coded so there were a lot that I didn't have prior knowledge of, for example I didn't know how to work with Figma. I Watched some YouTube tutorials of it !!!

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

    There are still some issues in my code that I will improve in the future, let me know if you see any issue !

    CSS, HTML, JS

    #accessibility
    1
    1deadjoe•370
    @1deadjoe

    This code exhibits a solid structure and adheres to modern HTML and CSS best practices. The use of semantic elements, such as <header> and <main>, enhances accessibility, and the inclusion of ARIA attributes demonstrates a commendable focus on usability for all users. The responsive design is well-handled with media queries, providing a seamless experience across devices.

    However, there are areas for improvement. The navigation lacks clear labels for the toggle button, potentially confusing screen reader users. Additionally, inline styles within the HTML and overly complex class names may hinder readability and maintainability. Simplifying class names and enhancing documentation would improve the code’s clarity.

  • Peter Godspower•710
    @TheBeyonder616
    What are you most proud of, and what would you do differently next time?

    I was able to finish this project

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

    Changing the color of the svg

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

    Any advice would do

    Responsive landing page created with SCSS and JavaScript

    #sass/scss
    1
    1deadjoe•370
    @1deadjoe

    This is great work. Kudos. However, I would recommend either adding a background to the frontend mentor link, the one with your name, or putting it at the bottom together with the footer. the transparent background it has makes some of the text become indiscernible when reading through. Otherwise, great job.

    Marked as helpful
  • 1deadjoe•370
    @1deadjoe

    Your design is good. I also had a difficult time trying to get it responsive without the layout braking and things overlapping😅. What I did was apply style for the smallest device, then the largest device. After that I just tweaked styles to accomodate the middle ranges.

    Disclaimer: I restarted the challenge 5 times before I got the hang of it.

    All in all, this is great effort @Abdelghafour122.

    To make it even better, you could add slide-in animations for the slideshow.

  • 1deadjoe•370
    @1deadjoe
    What are you most proud of, and what would you do differently next time?

    During this project, I gained valuable experience in creating a responsive design that adapts to various screen sizes and implementing interactive features with JavaScript.

    Next time I would like to use a CSS preprocessor like Sass to better organize my styles and take advantage of features like nesting and mixins, Implement a more robust JavaScript architecture from the beginning. I would consider using a module pattern or even a small framework like Vue.js to better manage the application state and updates.

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

    Aligning the activity card icons: Positioning the icons to overlap the card borders while maintaining responsiveness was tricky. I had to do some research on positioning to achieve my outcome.

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

    Accessibility: I'm not confident that my solution is fully accessible. I'd appreciate feedback on how to improve keyboard navigation and screen reader compatibility. While I've tested on modern browsers, I'm unsure about compatibility with older browsers. Any tips on ensuring broader compatibility would be helpful.

    Interactive time-tracking dashboard using HTML, CSS, and JS

    #accessibility
    2
    1deadjoe•370
    @1deadjoe

    Thank you. Yes, that is a part I am still working on. I will upload the improved solution soon.

  • 1deadjoe•370
    @1deadjoe
    What are you most proud of, and what would you do differently next time?

    I am proud that I am getting better at SCSS. It is easier to avoid repitition using mixins, extend, etc.

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

    I got too focused on the styling that I somehow got lost with the JS. Not being able to follow what class to call was wracking.

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

    I would greatly appreciate if someone could help me identiy where to use JS to add the interactivity. I did not know how to place the items in the header in order to get the desired effect.

    LOOPSTUDIOS LANDING PAGE USING HTML AND SCSS

    #sass/scss#accessibility
    3
    1deadjoe•370
    @1deadjoe

    Thank you. Sadly it is the one thing I could not do perfectly. I got too focused on the styling.

  • 1deadjoe•370
    @1deadjoe

    Great job on the design. I would recommend using ::before and ::after pseudo elements to add the tint in the background, and also for the hover effects. It greatly improves the visuall appeal of your work when you add such effects. Otherwise, great job on the design.

View more comments