Skip to content
OverviewSolutions
13
Comments
33

Ngouend raoul Gerard

@BeinRain06700 points

I'm a new Programmer aiming to improve my skills on javascript, It's a pleasure to join a community that make it easier for newest people on the field, to get more experienced on writing code. Thank you, to the whole community

Latest solutions

View more solutions

Latest comments

  • Vedant Obaleppanavar•70
    @vedantobaleppanavar
    What are you most proud of, and what would you do differently next time?

    I’m most proud of achieving a fully responsive layout that matches the design on both desktop and mobile. I used semantic HTML and CSS variables for maintainability, and ensured the site is accessible and visually appealing.
    Next time, I would plan my CSS structure more carefully from the start, possibly using a CSS preprocessor or utility classes to keep things even more organized and scalable.

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

    The biggest challenge was making the layout responsive, especially with overlapping sections like the call-to-action box and the footer. I also struggled with aligning icons and ensuring consistent spacing across breakpoints.
    I overcame these by using browser DevTools to inspect and tweak layouts, reading documentation on CSS Grid and Flexbox, and testing on multiple devices. Community resources and examples from similar projects were also very helpful.

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

    I’d appreciate feedback on:

    • My approach to responsive design—are there more efficient or modern techniques I could use?
    • Best practices for structuring CSS in larger projects.
    • Any tips for improving accessibility, especially for keyboard and screen reader users.
    • Suggestions for optimizing the form validation and user feedback.

    Thank you for reviewing my project!

    Desktop first responisive Fylo Dark Theme Landing Page solution

    1
    Ngouend raoul Gerard•700
    @BeinRain06

    Your spacing system looks Good @vedantobaleppanavar , you use margin-bottom within elements of each section . Good Approach.

    However it might be interesting looking at :

    <div class="hero-section">
          <img src="./images/illustration-intro.png" alt="" class="hero-img" />
          <h2 class="hero-title">
            All your files in one secure location, accessible anywhere.
          </h2>
          <div class="hero-pitch">
            <p class="hero-desc">
            Fylo stores all your most important files in one secure location.
            Access them wherever you need, share and collaborate with friends
            family, and co-workers.
            </p>
            <button class="get-started-btn">Get Started</button>
          </div>
        </div>

    to add a parent-container hero-pitch to hero-desc and get-started-btn in order to improve the ascending/descending order of margin-bottom within the section

    As below :

    .hero-img {
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: var(--fs-600);
  font-family: var(--ff-raleway);
  margin-bottom: 1.5rem;
}

.hero-pitch {
  width: 76%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.hero-desc {
  font-size: var(--fs-200); /* description must be quite smaller than the title */
  opacity: 0.82; /* to contrast title - description */
}

.get-started-btn {
  background: linear-gradient(90deg, var(--clr-teal) 0%, var(--clr-cyan) 100%);
  border: none;
  width: 40%;
  padding: 1.25rem 3rem; /* increase a little bit in desktop */
  border-radius: 50px;
  color: var(--clr-white);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
}

    You can see margin-bottom ---> pattern ascending (hero-img: 1.5rem; hero-title:1.5rem; hero-pitch(gap):1.75rem; )

    Hope that makes sense !

    Also study media-queries from mobile version design. That means instead of using max-width use rather min-width , it will save you time and avoid you creating endless too close breakpoints in real project :

    • max-width: 900px

    • max-width: 650px

    • max-width: 600px /* 600 and 650 close . bad !*/

    • max-width: 500px /* 500 and 600 close . bad !*/

    Do this instead. Choose 03 to 06 breakpoints:

    extra-small-mobile

    @media (min-width: 140px) { /* styling code */ }

    small mobile

    @media (min-width: 360px) { /* styling code */ }

    mobile

    @media (min-width: 500px) { /* styling code */ }

    tablet

    @media (min-width: 768px) { /* styling code */ }

    desktop

    @media (min-width: 1060px) { /* styling code */ }

    extra large desktop

    @media (min-width: 1400px) { /* styling code */ }

    | Start styling web-mobile version first. It will save you a lot of time !

    You got good sense for designing. Keep going @vedantobaleppanavar you won't fail to become much better.

    Wherever you might be and whatever you do, i hope you guy have a nice day/ night while enjoying your journey and what you have learned so far.

    Stay energized and don't miss opportunity to grow.

    Marked as helpful
  • P
    Trần Thành Danh•1,500
    @TranDanh1122
    What are you most proud of, and what would you do differently next time?

    Frontend Next.js, React, TypeScript, TailwindCSS Redux Toolkit, RTK Query, Redux Persist, ContextAPI, useReducer useMemo, useCallback Backend Next.js Server API, Prisma, Supabase Authentication NextAuth (with OAuth GitHub) File Upload Cloudinary API UI Libraries @hello-pangea/dnd (for drag-and-drop functionality) TailwindCSS (for styling) ShadCN (for UI component

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

    When coding this project, I realize I'm just a dev, maybe it called an old-school dev—one who only knows or is interested in how to create something that can help someone with my code and my soul.

    I'm not a marketer—who’s the best at selling themselves, or an interview champion—who this industry needs right now, or someone with ChatGPT in their brain.

    I don’t know what I can do with these people now, lol.

    Feel free to teach me, don’t worry about your words/language.

    Abou the project, it has many place need improve, just submit here and i will fix it

    FullStack Kanban Appw Next, React ⚛️, Redux, Tailwind 🎨

    #next#redux-toolkit#shadcn#typescript#prisma
    1
    Ngouend raoul Gerard•700
    @BeinRain06

    Hye @TranDanh1122 i have seen you have worked hard for the past few months to build a strong brand for your Github account.

    You are quite good with React, TailwindCSS, NextJS and i view is something to toast and cheer.

    However i realized of my own that writings code is not sufficient, you have to learn to thinks how programs works.

    I'm currently starting learning data structures & algorithms , and i want you to be a part of that also. Because it will better switch to become a good analytical thinker.

    I'm on my early stage learning with all resource i can, i also using chatgpt to give clue what roadmap to follow.

    When you have base on data-structures & algorithms you can build game like : 8-ball, snake , breakout-game, Roguelike and tackle the part of javascript that does not use HTML & CSS.

    Let me know if you got interested by these ideas, as we could learn together and build of our own something more quickly.

    Anyway take your times to think and do your research, to know if you can buy the idea of doing it.

    Have a great Day and week @TranDanh1122, and a fun time while coding.

    Marked as helpful
  • Gilang Ramadhan•740
    @gilangr1440
    What challenges did you encounter, and how did you overcome them?

    This is my first slider project. I learned a lot about sliders before working on it.

    Coding Bootcamp Testimonials Slider

    #sass/scss#bem
    1
    Ngouend raoul Gerard•700
    @BeinRain06

    How are you @gilangr1440 ? I Hope you are find.

    Where are you recently in your development under JS.

    Let me know, if i could be a help.

    I got difficulty trying to look at your github pages , i assume if there is the same for others , that's why your challenge doesn't have to many like.

    Give Vercel a Try, if would be a waste of time if you don't.

    I use vercel to publish any front-end app design free.

    Here is a link to a README that would help you start with vercel :

    README-2.md : https://github.com/BeinRain06/countdown/blob/branch/show-vercel-deploy/README-2.md

    I will listen to you, let me know if you have some problem using vercel, or others in Javascript. I will be glad to help.

    Have a Great Day @gilangr1440 and i keep moving into your learning, don't get discouraged. Take chsllenge and help as possibility to grow.

    Nice having you ! See you next time.

  • P
    Trần Thành Danh•1,500
    @TranDanh1122
    What specific areas of your project would you like help with?

    Hmm, i think this solution not good about logic, that my weakness, my brain cant do anything better than this logic, i dont know why, maybe im stupid or something. About layout and change theme, welcome any idea and comment. Feel free to feedback Have a nice day, thank you so much

    Calculator App

    #react#typescript#tailwind-css
    2
    Ngouend raoul Gerard•700
    @BeinRain06

    @TranDanh1122 you app Coffeeroasters subscription site under the link :

    https://www.frontendmentor.io/solutions/coffeeroasters-subscription-site-3D-pmTGtuQ

    IS OPENING !

    Let me show you how i did it with your last project :

    Lauch Countdown Time

    Link:

    https://countdown-lovat-one.vercel.app/

    PLEASE: iMPORTANT !!!*

    Before ending my message, i want to tell you that i have explain all the process to you by sending you a pull request on your countdown project.

    Go to your Github account open the countdown project and you will see a new branch called branch/show-vercel-deploy created along with your main merge.

    Find and Click on a green button compare and merge request , something like that!, to be able to fully add the file README-2.md into your project.

    It will also remain part of your project if you do that, an you can through it any time you are missing a point in the deployment.

    I hope , you will be able now to easily deploy others projects using vercel.

    With That said . Have A Nice Day/Night and keep going on, you will become much good at it, - @TranDanh1122.

    Marked as helpful
  • P
    Trần Thành Danh•1,500
    @TranDanh1122
    What specific areas of your project would you like help with?

    Hmm, i think this solution not good about logic, that my weakness, my brain cant do anything better than this logic, i dont know why, maybe im stupid or something. About layout and change theme, welcome any idea and comment. Feel free to feedback Have a nice day, thank you so much

    Calculator App

    #react#typescript#tailwind-css
    2
    Ngouend raoul Gerard•700
    @BeinRain06

    Hye @TranDanh1122 ! While looking your profile on, I notice you have a lot of interesting projects.

    I tried to open the preview site of some of them like : calculator App , and Planet Face. But, unfortunately i couldn't see live github website.

    The same problem occurs to me , while trying to open my old deployed projects in github page.

    After having this spinning situation over times, i come to figure out that is a lot easier when using real web host server. I discover Vercel while browsing and seeing deployed projects in frontendmentor working with this tool.

    Vercel allows small config to start deploy front-end app for free, and on top of that it is fast.

    This host web server is developed by the author of NextJS and his team.

    Maybe you can give it a try !

    It will make many others see the real end-work projects you share, help you connect with others that does the same project than yours , or even get genuine feedbacks, ratings upon what others see coming from your skill.

    You can further subscribe to the paid version of vercel , if you wan more features. Especially when comes to mount and deploy a real full stack application.

    Intentionally said, i ain't trying to sell you something, though i see vercel useful for me and wanted to share this info with you.

    You might want considering add it to the final process that bring your web projects alive.

    Hope it all makes sense to you.

    Anyway i could just bring up the solution i have in mind , even if it isn't exactly pointing toward this particular project. But i hope it will be quite useful.

    While wishing you happy new years and happy coding , stay fit and take care of you @TranDanh1122.

    Marked as helpful
  • Gilang Ramadhan•740
    @gilangr1440
    What specific areas of your project would you like help with?

    Got any tips on how to make my project better?

    Blogr Landing Page

    1
    Ngouend raoul Gerard•700
    @BeinRain06

    Hello @gilangr1440 i see how engaged you are on working on your coding. That's good idea.

    You might also notice that your project isn't rated too much once it is published in frontendmentor.

    I don't know really why but for me ! I have trouble to see the deploy version (preview site) of your website. Even the last time i randomly checked one of your earlier project i couldn't open your github live url .

    As for me when it's to develop partition project that involves mostly UI(user interface) i use vercel.

    vercel is a tool(online web program) that help you deploy front-end app faster. It is easy, on trend , and require less configuration.

    This online tools has been developed by the author of NextJS and even if you look at commonly app made it NextJS they are indeed fast to deploy.

    Here is a link to get started using vercel to deploy your live url :

    --> https://vercel.com/docs/getting-started-with-vercel

    You can start it using a free plan , and if later you want more **functionalities subscribes to the paid version. This can be a game changer to start learning about deploy environments.

    I hope i may give you soon if necessary feedbacks when being able to see your project.

    If some preoccupations getting started with vercel raises don't miss to let me know , if i could be a help.

    Have a good one talking to you . I wish you first happy new year 2025, and a really good times while coding @gilangr1440.

    Marked as helpful
View more comments