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

All comments

  • Samiullah•440
    @samir-DeveSubmitted about 2 months ago
    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

    1
    1deadjoe•370
    @1deadjoePosted about 2 months ago

    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.

    0
  • Peter Godspower•640
    @TheBeyonder616Submitted 3 months ago
    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

    1
    1deadjoe•370
    @1deadjoePosted about 2 months ago

    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
    0
  • Abdelghafour•580
    @Abdelghafour122Submitted over 2 years ago

    This was challenging especially the responsiveness, which i really messed up 😅

    If anyone has suggestions on how i can improve my code, please let me know, thank you!

    Can't wait for your feedback! 🤗

    Room homepage made with React & SCSS

    1
    1deadjoe•370
    @1deadjoePosted about 2 months ago

    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.

    0
  • 1deadjoe•370
    @1deadjoeSubmitted 2 months ago
    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

    2
    1deadjoe•370
    @1deadjoePosted 2 months ago

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

    0
  • 1deadjoe•370
    @1deadjoeSubmitted 2 months ago
    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

    3
    1deadjoe•370
    @1deadjoePosted 2 months ago

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

    0
  • 1deadjoe•370
    @1deadjoePosted 2 months ago

    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.

    0
  • 1deadjoe•370
    @1deadjoePosted 2 months ago

    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.

    0
  • Alberto Raúl José•610
    @alberto-rjSubmitted 3 months ago
    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)

    2
    1deadjoe•370
    @1deadjoePosted 2 months ago

    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.

    1
  • Papi•260
    @Papi84Submitted 3 months ago
    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/

    1
    1deadjoe•370
    @1deadjoePosted 2 months ago

    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.

    0
  • Srijan Manandhar•470
    @srijanssSubmitted 6 months ago
    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

    1
    1deadjoe•370
    @1deadjoePosted 6 months ago

    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?

    1
  • Nikhil Bhaladhare•290
    @nikbhaladhare2104Submitted 6 months ago
    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
    @1deadjoePosted 6 months ago

    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.

    1
  • 1deadjoe•370
    @1deadjoePosted 7 months ago

    Great job on this. I noted, although, that the first grid is missing the background quotation image. One more thing, your images for the authors of the reviews are missing, only the alt text is being displayed. You could check and confirm that you linked the image tag to the right directory, or that the directory was also uploaded with your project.

    Marked as helpful
    0