Skip to content
OverviewSolutions
8
Comments
8

LuRouFan

@angel-retry130 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

  • P
    Toshihito ENDO•160
    @GentleHorseSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    Optimizing for different screen size device took a bit of time and also required a certain amount of code, but now I'm gradually getting used to write and organize the code without using modular components structures like React.

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

    It's a small detail, but without React component, I didn't know how to render elements conditionally depending on screen sizes, but the solution was very simple; just setting "display" property to "none".

    Responsive Meet Landing Page

    1
    P
    LuRouFan•130
    @angel-retryPosted 4 days ago

    I clicked on your Repository link(view code), but it shows a 404 error. However, I noticed that you used Vercel to deploy the website and utilized React, which is really impressive! Although I'm not quite sure how your code structure is designed, I want to congratulate you on successfully completing a project using React.

    0
  • vladyslav-shulhach•170
    @vladyslav-shulhachSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how I created a grid layout, especially on the desktop version using grid-area. Next time, I will plan the grid structure more thoroughly at the beginning so that I don't need to make as many adjustments later. This will make the process run more smoothly and efficiently.

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

    After I learnt how to use grid-area, I didn't face many problems during development. The overall development and ensuring to make it more matched according to the design I think was the most difficult part, but once I realised that more frequent practice makes it even easier for me to develop projects next time. I took it step by step and focused on learning, which helped me stay on track.

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

    I'd like to learn more and explore the use of SCSS to manage complex network layouts, as well as learn about alternative approaches to improving responsiveness and scalability in HTML.

    Testimonials Grid Section Solution

    #sass/scss
    2
    P
    LuRouFan•130
    @angel-retryPosted 2 months ago

    Your implementation of the page is 99.9% similar to the design draft, which is fantastic! I use a different method for grid layout, and I find your approach much more readable. I used numbers to set grid-area, but after seeing your method, I prefer yours!

    Wishing you smooth and happy development!

    1
  • P
    LuRouFan•130
    @angel-retryPosted 3 months ago

    I checked out your code, and your SCSS management is really detailed. You define styles so well (like text-500), it feels like you've mastered the essence of SCSS. It's fantastic and I've learned a lot from it.

    Your page is also very close to the design mockup. You've done an excellent job!

    0
  • P
    LuRouFan•130
    @angel-retryPosted 3 months ago

    hello @Ferdiansyahmulyadi

    After reviewing your code, I noticed that your SCSS is very well-organized, and I've learned a lot from it. Your page layout is correct, but there are minor differences in font weight and spacing between elements compared to the design. However, I believe that with a Figma design file, you could match the design perfectly.

    You did a great job!

    0
  • P
    LuRouFan•130
    @angel-retryPosted 3 months ago

    hello @PedroAlmeida3148

    The spacing between elements is acceptable, but some text colors and fonts do not match the design. However, since this project did not refer to the Figma design, it is difficult to ensure the actual page matches the design.

    I noticed you used a table for the Nutrition section, which surprised me. I used CSS Flexbox for layout, and it seems you achieved the desired layout quite easily. Based on my observation of the design, you don't need to use text-center for td; just adding padding-left: 40px will make it look similar to the design!

    0
  • P
    LuRouFan•130
    @angel-retryPosted 3 months ago

    Hello @PedroAlmeida3148

    There are some differences between the elements in the design draft and the final layout. If you want the layout to match the design exactly, you might want to try using Figma. You can copy the design files into Figma and roughly sketch out the elements to get a precise understanding of the spacing between them.

    I noticed you used :root to manage CSS variables, which is a great approach! I learned a lot from this, and I'll use the same method in my next project.

    0
View more comments