Skip to content
OverviewSolutions
13
Comments
18

Nathan Molina

@NatentadoBrasil280 points

Front End professional. I just want to give people the best and most optimized digital experiences.

Latest solutions

View more solutions

Latest comments

  • Michael•150
    @ristoranteQF
    What are you most proud of, and what would you do differently next time?

    I'm not proud of shit. I'm not satisfied with the structure of my code, it is not well organised, it is chaotic and probably in a month I will also forget what the hell I wrote in there. xD

    At least this app is functional.

    Next time I would really think about the structure of my code so that I can make it more modular, readable, clean and separate concerns.

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

    I encountered a few logical bugs and synchronizing the api data with the ui after each interaction. I simply used AI because otherwise I would have probably lost my mind and finish the project in at least a month. xD

    I'm not looking to cheat with ai, I simply view this as a very useful tool that helps me learn faster right now because I'm a beginner.

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

    I would like to get help on the structure of the code. I want to separate concerns and have a clean code following this pattern: API data functionality, logic functionality and UI rendering.

    Also, there is still a small bug on the rendering aspect. The code won't sync the left subtask count ui in each task card with the api data after relevant interactions.

    Kanban task management web app with vanilla HTML, CSS and JS

    1
    Nathan Molina•280
    @Natentado

    I think you jumped a few steps on your learning, trying challenges like achieving this kind of project with pure js its a good thing but not when you need to reinforce your fundamentals first, like you js file has more than 1,300 lines of code and most of them are redundant, so i have a few tips for you:

    • Roll back to less hard challenges (junior/intermediate).
    • Reinforce Css like:
      • Variables
      • Responsiveness
      • BEM or other patterns
      • CSS performance
    • Reinforce some logical fundamentals like:
      • DRY pattern
      • Components
      • Separation of concerns
      • Code splitting
    • Then choose a js Framework to learn along advanced js patterns like:
      • React
      • Vue
      • Angular

    After more study and projects maded, i think you can adventure to advanced and guru challenges from this platform and ace it like pro without the necessary need of AI, or just to help you with things you already know or worked with it before

    Marked as helpful
  • Nathan Molina•280
    @Natentado

    You could improve your code by splitting it better, like creating a common wrapper layout that makes the head element more shareble across pages, reducing code and repetition.

  • Nathan Molina•280
    @Natentado
    What challenges did you encounter, and how did you overcome them?

    Biggest challenge i had was to study and implement a new tool for this project.

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

    I would like help from Astro developers to analyze my code and possibly provide tips about syntax, performance, and structure.

    Personal Blog

    #astro#preact#sass/scss#typescript
    1
    Nathan Molina•280
    @Natentado

    The hand icon crashed on the screenshot but the live site seems okay. Maybe is something to do on how front end mentor handles project screenshots.

  • Nathan Molina•280
    @Natentado

    Very nice implementation, i just have some tips for you. HTML: Try to have an alt text to all images you have across your application, for semantic and acessibility reasons. CSS: You can use the power of modern css features to have variables setted for the colors or styles you have across the app, and the nesting to reduce the amount of times @media size is called, last you could give the current time a white color to match the figma design. JS: You can store the value of the data.json once the first request is made, so every time a user change the period option it doesnt make another "api" call.

    In general its a very good implementation, it works very well and looks incredibly nice. Nice job!

  • Nathan Molina•280
    @Natentado

    The solution in tablet devices seems broken, you could use another breakpoint to adjust these layouts. But in general its working and looks nice.

  • Manuel Stolze•180
    @manuelstolze
    What are you most proud of, and what would you do differently next time?

    To find a solution how I can combine grid and flex layout.

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

    How can I improve my structure? Are there some areas where I can improve?

    four-card-feature with grid & flex

    1
    Nathan Molina•280
    @Natentado

    In general, very good design implementation and code structure. Some minor tips i could give you, are, your cards need a white background to contrast better with the page's background, also, you could improve the responsivenes of you fonts by giving them different sizes according to devices break points. You could also lock the vertical scroll of your parent element, cause this layout is not suposed to be vertically scrolable.

    Marked as helpful
View more comments