Skip to content
OverviewSolutions
17
Comments
19
1deadjoe
@1deadjoe

All 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.

  • 1deadjoe•370
    @1deadjoe

    Your SASS code is well written, clean, and very readable. It would be really great if you practiced using comments in your code more. Also consider using mixins for styling rules that keep repeating in different components. Keep it DRY.

  • Alberto José•630
    @alberto-rj
    What are you most proud of, and what would you do differently next time?

    The main feature of this project is the ability to automatically calculate the tip and total bill based on user inputs. The calculation logic is implemented in JavaScript, ensuring precise results and real-time updates as users interact with the input fields.

    Next time, I plan to build this challenge completely from scratch using React.js.

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

    ♿️ 1. Accessible Validation

    • Problem: The app must remain accessible during user input validation.
    • Solution:
      • ✅ Implementation of accessible validations.
      • ✅ Clear and informative error messages.
      • ✅ Tested on different devices to ensure an inclusive experience.

    💡 2. Interactive Visual Feedback

    • Problem: Need to implement hover and focus states for all interactive elements on the page.
    • Solution:
      • ✅ Use of CSS pseudo-classes :hover and :focus-visible.
      • ✅ Ensured consistent visual feedback on buttons and fields.
      • ✅ Improved usability and accessibility of the app.

    💻📱 3. Responsive Layout

    • Problem: The layout must be optimized for different screen sizes.
    • Solution:
      • ✅ Implemented media queries to adjust the layout.
      • ✅ Used relative units (such as %, and rem) to ensure scalability.
      • ✅ Applied Flexbox and CSS Grid to create a flexible and adaptable layout.
      • ✅ Tested on various devices to ensure proper viewing.

    💰 4. Precise Tip Calculation

    • Problem: The app must accurately calculate the tip and total cost per person.
    • Solution:
      • ✅ Implemented precise calculation functions in JavaScript.
      • ✅ Ensured that results are displayed clearly and understandably.
    What specific areas of your project would you like help with?

    I would like to receive feedback on the:

    • Accessibility approach I have adopted.
    • README.md as seen by recruiters or employers.
    • Or any other feedback you may have. 😊👍

    Accessible Tip Calcutor App (SASS + SEO)

    #accessibility#lighthouse#sass/scss#animation
    2
    1deadjoe•370
    @1deadjoe

    This is impressive. I would like to learn from you. The use of transitions for the totals is a very nice addition. Kudos. I will get here someday.

  • Papi•280
    @Papi84
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I implemented the responsive design and interactive features in the Time Tracking Dashboard. The project effectively utilizes modern front-end technologies to deliver a user-friendly interface that adapts seamlessly across different devices. I took particular care in creating a clean and intuitive UI, ensuring that the data visualization was both functional and aesthetically pleasing. The use of JavaScript to dynamically update and display time tracking data provides a smooth user experience and enhances overall usability. Next time, I would focus on optimizing performance further by employing advanced techniques such as lazy loading for images and asynchronous data fetching to improve initial load times. Additionally, I’d implement more comprehensive unit testing to ensure the robustness of interactive elements and edge cases. Incorporating feedback from user testing earlier in the development process could also help refine the user experience and identify potential improvements.

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

    When working on the Time Tracking Dashboard project, I encountered several challenges, and here’s how I addressed them:

    Challenge: Responsive Design Complexity

    How I Overcame It: Ensuring that the dashboard looked and functioned well across various devices and screen sizes was challenging. I tackled this by using a mobile-first approach and employing CSS media queries to adapt the layout. I also utilized flexible grid systems and responsive units like percentages and viewport-relative units to enhance the design’s adaptability. Challenge: Dynamic Data Handling

    How I Overcame It: Managing and displaying dynamic time tracking data required efficient JavaScript handling. To address this, I implemented asynchronous data fetching with fetch() to ensure that the dashboard could update in real-time without reloading the page. I also used JavaScript libraries to manage state and update the UI seamlessly. Challenge: Browser Compatibility Issues

    How I Overcame It: Different browsers displayed the dashboard inconsistently. I resolved this by conducting thorough cross-browser testing and using vendor prefixes for CSS properties. I also referred to compatibility tables and polyfills to ensure that features worked uniformly across major browsers. Challenge: Performance Optimization

    How I Overcame It: The initial load time was longer than desired. To optimize performance, I implemented lazy loading for images and reduced the size of CSS and JavaScript files through minification. I also employed code-splitting techniques to load only the necessary components when needed. Challenge: User Experience Refinements

    How I Overcame It: Gathering and integrating user feedback early in the development process helped in refining the user experience. I conducted informal usability tests and adjusted the design based on real user interactions to ensure that the dashboard was intuitive and easy to use. These experiences provided valuable insights into front-end development challenges and equipped me with practical solutions for creating more efficient and user-friendly applications in future projects.

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

    Performance Optimization

    Help Needed: Advice on advanced techniques for improving performance, such as server-side rendering, caching strategies, and efficient data handling. Why: To ensure the dashboard loads quickly and handles data efficiently, especially as the user base grows. Advanced JavaScript Functionality

    Help Needed: Guidance on implementing more complex JavaScript features or optimizing existing code, such as state management or advanced interactivity. Why: To enhance the user experience with smoother interactions and more dynamic features. Cross-Browser Compatibility

    Help Needed: Support in identifying and fixing issues related to browser compatibility or integrating polypills for older browsers. Why: To ensure consistent functionality and appearance across all major web browsers. User Experience and Design Feedback

    Help Needed: Input from UX/UI experts on refining the design, improving usability, and ensuring that the interface meets user needs effectively. Why: To make sure the dashboard is intuitive and provides a seamless user experience. Testing and Debugging

    Help Needed: Assistance in setting up and executing comprehensive unit tests, end-to-end tests, and debugging techniques to identify and fix issues.

    https://github.com/Papi84/fem-time-tracking-dashboard-main-clean/blob/

    #accessibility
    1
    1deadjoe•370
    @1deadjoe

    Good job with the sematic HTML. However, It would be good to research on how you canimprove your design to be as close as possible to the challenge. Such research helps you cement very important principles that help you become better.

  • P
    Srijan Manandhar•450
    @srijanss
    What are you most proud of, and what would you do differently next time?

    I got to learn about,

    • The aria-live attribute to make my form more accessible. This is announce the error messages who is using assistive technologies.
    • Creating gradients and different configurations related to it.
    • FormData and how it can be used to get user input from the form. It's really neat and handy feature.
    What challenges did you encounter, and how did you overcome them?

    Since there was only one input element of type email, I tried to use Constraint validation API to validate the form. And I tried to use :invalid , :focus:invalid pseudo states of input in CSS. As I have required attribute present in the input, it set the :invalid state for the input element on page load. So, invalid state related CSS was always showing in my app. So, to fix that I remove :invalid related CSS and used .invalid class instead to handle valid and invalid states from JS.

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

    Open for feedback

    Newsletter sign up form with custom validation

    #accessibility#vite
    1
    1deadjoe•370
    @1deadjoe

    This solution is very neat and close-to-perfect. I like the transitions you have used. How do you get the input to clear after dismissing the message?

  • Nikhil Bhaladhare•270
    @nikbhaladhare2104
    What are you most proud of, and what would you do differently next time?

    ..

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

    ..

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

    I need help drawing downward arrow when we click on share button. I have found the solution using border-bottom but don't want to use it. If anyone knows different method to achieve this, greatly appreciated.

    Article Preview Container built in React with click functionality

    1
    1deadjoe•370
    @1deadjoe

    This is a great job you've done. Congratulations. I'm impressed you were able to handle positioning the share links above the button, and I am learning from you. However, the typography is not what was indicated in the guide. As much as it is not mandatory to follow it, I would suggest trying out different styles and colors to find one that suits the tone and audience of the intended message. Other than that, good job.

  • Riktam Nandi•230
    @rdxnandi
    What are you most proud of, and what would you do differently next time?

    Nil

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

    Nil

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

    Nil

    four-card-feature-section-master/rdxnandi

    2
    1deadjoe•370
    @1deadjoe

    This looks great. The code is well structured and readable. Great use of flexbox by the way. I have tested the code for responsiveness too, and it is okay. Great job!

  • Havillah•190
    @HavillahAnya
    What are you most proud of, and what would you do differently next time?

    I am most proud of my ability to use Flexbox to create the layout easily and making the website responsive on mobile screens down to 320px.

    Next time, I'll make sure to check the styles required for responsiveness to determine basic sizing of main element and if my project will be better with a background image or the img tag.

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

    I first used an img tag, when I discovered the style on mobile will use a different photo. So I had to get rid of my img tag and put a section without content instead which I later placed the appropriate images with CSS, and over riding it on mobile by replacing background image with the one specified for mobile.

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

    All of the challenges I faced I was able to solve, so I don't know if there is a problem with my code and will surely appreciate a feedback if any is found.

    Responsive preview card using HTML5, CSS3 and CSS Flexbox.

    2
    1deadjoe•370
    @1deadjoe

    This is great work. I have tried the page on my phone and it works smoothly. You have included a piece of styling I totally don't have, media queries. Would you want to be my tutor on that? It is something I need a little help understanding.

  • 1deadjoe•370
    @1deadjoe

    Congrats. This is great work. However, to make your code less bulky, having to assign classes to each table cell element, I would advise reading on pseudo classes and elements. Pseudo elements and classes help write lesser code, making it more readable. web.dev provides concise notes on this.

    Marked as helpful
  • ibnu-jemal•150
    @ibnu-jemal
    What are you most proud of, and what would you do differently next time?

    .

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

    .

    last HTML and CSS

    1
    1deadjoe•370
    @1deadjoe

    Great work @ibnu-jemal. The states are well styled, and the code is readable. Keep working and you'll keep improving.

  • Hasban Fardani•30
    @Hasban-Fardani
    What challenges did you encounter, and how did you overcome them?

    i forgot about how to make shadow on css

    Blog preview card

    1
    1deadjoe•370
    @1deadjoe

    This is great work. You got around a part that I was unable to (having the avatar and name aligned along the same axis). To point out ,however, you did not include the active states' styles. This will help you get familiar with pseudo classes.

    Marked as helpful
  • Guilherme Costa•100
    @cdGuilherme
    What are you most proud of, and what would you do differently next time?

    I'm proud of how the code turned out, this helped me practice writing CSS by trying to get as close to the solution as possible.

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

    These are the following challenges I encountered during this project:

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

    I would like to know how to better approach aligning elements using CSS.

    QR Code Challenge using CSS

    2
    1deadjoe•370
    @1deadjoe

    The layout adapts well to different screen sizes, thanks to the effective use of CSS media queries and flexible grid or flexbox layouts. The content flows naturally, and no significant issues were observed across various devices and screen resolutions.

  • Hirak J Sarma•90
    @hirakjsarma
    What are you most proud of, and what would you do differently next time?

    This is a QR code element that is coded using vanilla CSS. I am happy that I could replicate the design from scratch and made a good looking design.

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

    I was confused what to use at first. I thought of using grids but later I used flex box. Dividing the components into sub sections helped me think and learn to how breakdown things into smaller task.

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

    I would like help with other technologies that can be used to make the same thing. Currently I am using vanilla CSS but would love to use other technologies that might help me to build this quickly and efficiently.

    Mobile First QR code component using flex box

    2
    1deadjoe•370
    @1deadjoe

    The layout adapts well to different screen sizes, thanks to the effective use flexbox layouts. The content flows naturally, and no significant issues were observed across various devices and screen resolutions. Regarding the design, your solution closely aligns with the provided design specifications. The visual elements, layout, and overall aesthetic are faithfully represented. Just to point out, the background color was different from the one specified.

    Marked as helpful