Skip to content
OverviewSolutions
67
Comments
50
P
Trần Thành Danh
@TranDanh1122

All comments

  • IReistI•200
    @IReistI
    What are you most proud of, and what would you do differently next time?

    Use reusable components

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

    Validate forms, and create a global state to manage data between forms

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

    In form validation, the use of context + useReducer is correct :D

    Multi-Step-Form, my solution with React, Typescript, and TailwindCss

    #accessibility#react#typescript#tailwind-css
    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122

    Nice work, but I'm sorry, I will say "No" to this solution.

    When the state (context content) changes, everything (components, etc.) wrapped in the context provider will re-render.

    That's the same problem I have now with this challenge, and I'm still reworking it.

    Imagine if you have a city select, and the city list is fetched from an API. When the form re-renders with each character typed into another simple input field, the city list will re-fetch unnecessarily.

    To solve this, use ref instead of state, or split the input into a separate component and use React.memo (you need make sure the props in input not change if another input action)

    or just waiting for my solution

    Have a nice day, keep going!

    Marked as helpful
  • Muhammad Sami Ahmad•50
    @MuhammadSamiAhmad
    What are you most proud of, and what would you do differently next time?

    I’m thrilled to share my solution for this project, Throughout the process, I’ve learned and applied new tools like Zustand for state management, Zod for schema validation, React Hook Form for handling forms, and TypeScript for type safety. It’s been a rewarding experience to bring everything together and creating a good file structure for them, and I’m excited to continue improving my skills. Feedback is always welcome!

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

    Applying more than one new tool for the first time in a single project was a bit of a challenge but it was fun to overcome and see the outcome ^^

    Responsive Mortgage Calculator

    #react#typescript#vite#zod#zustand
    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122

    very nice, i learn alot from it, hope you keep going, and we can get better together

  • P
    Trần Thành Danh•1,500
    @TranDanh1122

    hmm, i dont click start order, but every thing reset

  • hkaur108•310
    @hkaur108
    What specific areas of your project would you like help with?

    I have tried fixing semantics,, Please let me know if anything can be done to improve the solution.

    Responsive QR code

    3
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. you review code must be your repo url, not profile
    2. let use fontface to load font, not import
    3. image need object fit, and if can, add aspect ratio
    4. let reset css first (*{margin 0 pading 0 boxsizing border-box}), that will help you control spacing.
    5. remember, display flex on your body maybe cause missing content on mobile device if your card higher than 100vh

    hope that help!!!

  • P
    Jared Silver•500
    @jsilver88
    What are you most proud of, and what would you do differently next time?

    Built using straight CSS no frameworks.

    React project using CSS

    #react
    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122

    wow, that amazing project

    Marked as helpful
  • Prayugo Dwi Setiyoko•60
    @Prayugo24
    What are you most proud of, and what would you do differently next time?

    What are you most proud of? I am most proud of how I managed to implement the responsive design effectively, ensuring the website looks great across all device sizes. Additionally, I successfully utilized modern web technologies such as CSS Grid and Flexbox to create clean and maintainable layouts. I'm also proud of my attention to detail in replicating the design accurately and incorporating smooth transitions and animations to enhance user experience.

    What would you do differently next time? Next time, I would focus more on optimizing the performance of the website by minimizing the use of large assets and utilizing lazy loading for images and resources. I would also aim to write cleaner and more reusable code by adopting a component-based approach using frameworks like React or Vue.js. Lastly, I would allocate more time to testing for accessibility and cross-browser compatibility to ensure the website is inclusive and functions perfectly for all users.

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

    What challenges did you encounter? One of the main challenges I encountered was ensuring the layout remained consistent and responsive across different screen sizes, particularly with the intricate design elements like the navigation bar and background images. Another challenge was working with dynamic content and maintaining the site's accessibility standards, such as ensuring proper keyboard navigation and screen reader compatibility.

    How did you overcome them? To overcome the responsiveness challenge, I relied on a mobile-first approach and utilized CSS tools like Flexbox and Grid effectively. I tested the design across various devices and screen sizes using browser developer tools to catch and fix layout issues early. For accessibility, I researched best practices, used semantic HTML, and tested the site with tools like Lighthouse to ensure it met accessibility guidelines. When I faced coding challenges, I referred to documentation and sought solutions through the Frontend Mentor community and forums.

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

    What specific areas of your project would you like help with? I would appreciate help with the following areas:

    Accessibility: While I implemented basic accessibility features, I’d like feedback on how I can improve the site's usability for screen readers and ensure it meets WCAG standards.

    Performance Optimization: I'm interested in advice on how to further optimize my website, particularly regarding image loading, asset management, and reducing render-blocking resources.

    Code Review: It would be helpful to get insights on how to write more efficient and maintainable code, especially in terms of organizing CSS and JavaScript to keep the project scalable.

    Animations and Transitions: I’d love to hear suggestions on how to make the animations smoother and more engaging while ensuring they don’t negatively impact performance.

    Cross-Browser Testing: I tested the site on major browsers, but I’d like help identifying and resolving any potential issues in less common or older browsers.

    Responsive Space Tourism Multipage Apps using HTML, CSS, and JavaSc

    #pure-css#jquery
    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122

    that good, i learn a lot from it, maybe i can re work my solution with react

  • Bunchydo•570
    @Bunchydo
    What are you most proud of, and what would you do differently next time?

    I’m most proud of being able to complete the project and successfully figure out how to use JSON in JavaScript. It was a great learning experience and made me more confident in working with data formats and client-side scripting.

    Next time, I would spend more time researching solutions and approaches rather than trying to rely solely on memory. This would help me explore more efficient techniques and potentially avoid certain hurdles.

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

    One of the key challenges I faced was understanding how to parse and manipulate JSON data within JavaScript. Initially, I struggled with how to dynamically access and update nested properties.

    I overcame this by reading documentation, experimenting with code, and using online resources to deepen my understanding of JSON structure and JavaScript methods. Breaking the problem into smaller pieces and testing solutions iteratively also helped.

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

    I would like feedback on:

    Code structure and readability: Are there any ways to make my code more maintainable or easier to understand? Best practices with JSON and JavaScript: Am I following efficient and standard methods when working with JSON, or are there better approaches I should consider? Debugging techniques: Any tips for debugging dynamic data issues more effectively would be greatly appreciated.

    Time-tracking-dashboard

    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. about UI/UX rule, SEO rule: you need default data when user visit on page, let make daily active at default and load data of this type
    2. JSON data can use fetch to load, you need to learn it because that what people do in real life project!
    3. You need to load data dynamic, base on title and property name (like "title", "daily"), not the order (0, 1) because in big project, when backend have a bit change on their API, we dead, absolutely dead!
    4. you can let [var1, var2] = ["#id1" , "#id"].map(el => document.getElementByID(el), that will clean you code
    5. "daily", "weekly" just a type of filter, try load data like i mention in "3", that will /3 you js file size
    6. check my solution, that not best, but i think you can find some idea these
    Marked as helpful
  • Williams Akanni•350
    @shadowbanks
    What are you most proud of, and what would you do differently next time?

    What I would do differently next time I'll pay better attention to the design and make up a plan before starting (At least mentally).

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

    The image had extra spaces at the sides(larger than expected), the issue was I flexed the container then justify-content and aligned-items center while also giving the image a fixed size, this caused extra space at the left and right sides.

    My Fix: Removed the justify-content and aligned-items center, then made the image take 100% of the width and height of it's parent.

    Edit: Improved solution, set the container box-sizing: border-box;

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

    I want to know if I'm using the right tags.

    Semantic HTML5 markup, CSS custom properties, Flexbox

    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. your github link is error/private, i cant view repository
    2. about tag:
    • "Improve your front end..." must be h1 tag, if you have multi card, that shoule be h2, if multi card in one section of large page, that can be h3, that how SEO rule work
    • you need css reset *{margin:0; padding:0; box-sizing:boder-box}, that will make you can "full" control of element spacing, now i see p element auto margin it -image need object fit: cover or contain, let learn about it hope that helpful!!!!
  • kunal90803•550
    @kunal90803
    What are you most proud of, and what would you do differently next time?

    I'm proud of myself as I am able to do everything on my own without taking help of CHAT-GPT or something. Next time I can create it more responsive and add more css effects.

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

    Actually this time I didn't face much problems as it is similar to previous tasks.

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

    I need help where to use "rem" and where to use "px" while giving width and height.

    Responsive blog page using HTML and CSS

    #accessibility#pure-css
    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. use px when this value never change, like card width { width 100%; max-width: 123px}
    2. use rem when you want it scale follow text size of device (fontsize, spacing, lettet spacing...v..v)
    Marked as helpful
  • J.•10
    @J-Dot555
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I got my website to look so close to the given design.

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

    I didn't know how to center a div, so I looked it up.

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

    I would like help with proper HTML and CSS coding habits for writing better code.

    QR code component using HTML and CSS

    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122

    that good go start something, but we can improve it:

    1. h1 element is "improve front end...", that MUST NOT hidden, beucause SEO rule.
    2. when you have a line of text, use span, not p
    3. font need to linked before link stylesheet file
    4. you need html reset * {margin 0 padding 0 box-sizing border box}, that will help you have full control spacing
    5. try to use %, rem, vw, not px, because very hard to change when you need responsive text or people change size of text in their phone (you can try it on your real phone, and see why im recommend use rem)
    6. need :root to declare all color as variable, dont use color code all around you code, very hard to manage in real life project

    Hope that helpful!!!!!

    Marked as helpful
  • P
    Trần Thành Danh•1,500
    @TranDanh1122

    piture element alway find in it source tag what source is ok when you change screen size (take time), by now, you dont have source for mobile, so picture need to fallback and load again default imgae (take time) so, that way take x2 time to load image, maybe you need set another source with moblie image link for mobile screen Hope that help

  • jachvictor•50
    @jachvictor
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I paid attention to details to implement this project and how I mastered how to use font files comfortably.

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

    The only challenge I faced was the design details such as the font and padding.

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

    I would like help with my CSS

    Social links profile using HTML and CSS

    #semantic-ui#pure-css
    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. in preview site, you avatar image missing, let fix it
    2. used too much flex box, no need to do that if only 1 UI element in 1 row, just display block and make it simple
    3. you need to use more semantic element, etc: name shoule be H1, address maybe h2 or span, p is paragraph, and you dont have paragraph here 4.set width of wrapper = 375px maybe not good, you card will break layout when i view on 320px mobile, you can do: width 100%, max-width: 375px

    hope that help!!!!

  • P
    Lovro Peraić•390
    @loki-pepe
    What are you most proud of, and what would you do differently next time?

    I learned the basics of flexbox and got acquainted with the picture element.

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

    I have noticed the longer time it takes for the image to adapt to the layout when switching between mobile and desktop views, but I am unsure how to fix the issue (or if it needs to be fixed at all since users will generally use either the mobile or the desktop view, and the first time loading of either layout is fine).

    Product preview card using Flexbox

    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122

    The problem about image maybe cause by picture element.

    1. when you change screen width, piture element can caculator and load image from srcset follow the media attribute to img element in it, this will take time to load new image.
    2. if it load fail (maybe missing media info), picture need to load again failback image link you have writed in img element, so it take x2 time to load
    3. maybe you can add some media attribute for desktop, change 2 source to 2 image difference to check this case
    Marked as helpful
  • P
    Trần Thành Danh•1,500
    @TranDanh1122

    Thật good, bút maybe you can improve something:

    1. No need center card with margin 16px, if you need center x, use margin 0 auto, if need x and y, just use flex box for parent.
    2. When you import font, try import only which font weight you need, that will cause performance issue if you import like now in real life project
    Marked as helpful
  • Shamuskado22•140
    @Shamuskado22
    What are you most proud of, and what would you do differently next time?

    I am proud of finishing this challenger

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

    With the accordion loop

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

    I would like help with the logic from the script if It needs to be improved

    FAQ accordion solution

    2
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. Question text and icon can have 1 wrapper, số you only need listen click on wrapper
    2. Don't use classname, you can toggle attribute (because in real life, we maybe use tailwindcss, thật too much class to read and manage) of the wrapper, so let CSS đó something with element inside ít when have or not atribute.
    3. Check my solution, maybe you can have some idea
    Marked as helpful
  • Raymond023•290
    @Raymond023
    What are you most proud of, and what would you do differently next time?

    Completing the challenge and writing an improved HTML, thou it could be better.

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

    Multiple input validation and calling the function correctly

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

    I just want someone to look at the HTML and JS, I'm open to learning about any improvement at all, I know this project could have been written better, especially the CSS

    Responsive contact form using CSS and vanilla JS

    #accessibility
    3
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. about form, maybe you can use Object.formEntries(new FormData(formElement)), that will return an object seem be like {input name: value of input}
    2. about validate, you can use object to wrap all validate logic, so just use for-in loop to loop each logic, that will make you code look better (maybe you can get some idea if you check my Age Calulortor solution)
    3. span.error is next to input, may be you can use nextSibilElement, no need to querydocument again, that can improve performance (you can see that when you have a huge DOM)
    4. im not recommend let js hide or show something, that may you code look so complex if in real life project. Js just do one work: toggle attribute, and css will display follow if have or not attribute (i think that what core react do for render their component, so we just copy that trick to us pure js code)

    Hope that help!!!!!

  • mirajkar-dhruv•20
    @mirajkar-dhruv
    What challenges did you encounter, and how did you overcome them?

    Making the card responsive was challenging. But I was able to make it responsive for mobile screen sizes using clamp() and relative sizes in CSS.

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

    Any suggestions would be really helpful!

    Responsive blog preview card using HTML and CSS

    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. no need br add all because div is block element, in default, onle 1 block in 1 row, so no need br
    2. use :root{} to setup all your color as a variable, so use variable when you need color, that make you code look better 3."Figtree" i dont see where this font use, you must import only font you using, because that performance issue
    3. you class, dont use id, because in real life, project will have multil card, right?, so class selector will help you re-use css
    4. image element need object fit, that will helpfull if you have image not fit with the frame
    Marked as helpful
  • P
    JNW365•10
    @JNW365
    What challenges did you encounter, and how did you overcome them?

    How to read a Figma file.

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

    General feedback would be helpful.

    QR-Code Component

    1
    P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. maybe we need to set both html and body tag for reset css
    2. font family need set when reset html and body, choose 1 main font, used the most times font to primary font, so when you need another, let set font family only for that element it need
    3. image need object fit, if not it will horrible if you using not fit size/ratio image
    4. dont you px, you need to you %, rem, vw, for now, let set font size : 16px when you reset you html,body, and using rem, that will helpful if you need do resize font size when view on mobile (only one place need to reponsive)