Skip to content
OverviewSolutions
26
Comments
13
Dipesh
@Dipesh-sapkota1

All comments

  • Josephine Fitalvo•260
    @fitalvojosephineSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I finally finished this challenge. Next time, I will do more research and dig deeper into learning the structure of the DOM, validation, and submission. Honestly, this is where I got stuck. But with the help of YouTube and ChatGPT, I made it. Thank you, Google, YouTube, and ChatGPT.

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

    First, I encountered challenges in the layout and figuring out how to structure my HTML and CSS to implement the DOM. So, I researched it, read some other developers' code, and tried applying it to my own code, eventually finding my own way. I am happy that I overcame it all, including mobile responsiveness, which I managed with the help of reading documentation and implementing it in my CSS code.

    The hardest part was the JS fundamentals of form validation. I researched it to understand how it works, including the functionality of addEventListener, using if statements for error messages, displaying elements using the DOM, toggling state to hide the form, and the regex for invalid email validation. This was really challenging, but I had fun and didn't give up. I must learn more and apply this knowledge to other challenging projects.

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

    So far none. #HappyCodingEveryone

    Newsletter sign-up form with success message using HTML, CSS, JS.

    1
    Dipesh•430
    @Dipesh-sapkota1Posted 4 months ago

    Congratulation on completion of your project

    0
  • Branka R•290
    @brainkaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Pretty happy with how I approached this and managed to get the responsive layout to work on multiple devices.

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

    Many!

    Getting used to adding multiple event listeners for different requirements aka click, input, keypress.

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

    None at the moment!

    Thank you

    Reponsive Tip Calculator App

    1
    Dipesh•430
    @Dipesh-sapkota1Posted 4 months ago

    Congratulation on completing tip-calculator Everything looks great but your form is overflowing vertically, try using logical units for layouts

    0
  • Dipesh•430
    @Dipesh-sapkota1Posted 4 months ago

    Try using container to limit your content

    0
  • qvazi•100
    @qvaziSubmitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    no figma

    next tailwind

    1
    Dipesh•430
    @Dipesh-sapkota1Posted 4 months ago

    Awesome work

    0
  • 7A9Oo•80
    @7A9OoSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    To use variables for the CSS style and selector like first of type . I learned to effectively use CSS custom properties (variables) to manage design attributes more efficiently. creating preset font and use them as class.

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

    Working with media queries

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

    working on mobile media queries first or on desktop

    blog view card using preset font

    2
    Dipesh•430
    @Dipesh-sapkota1Posted 4 months ago

    You did good

    1
  • Rebeka•170
    @BekiaDSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    The layout and the animations. Little details like hover states.

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

    The refactoring of the JS into for loops was a bit mind boggling. I find it difficult to think through the process so I use mindmaps for this. Deploying the tailwind project to netlify also took quite some time to figure out

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

    Any feedback is welcome.

    • on mobile view the top part of the card is cut off because of the h-screen, but if i change it to sm:h-screen it looks fine on mobile, but not aligned on desktop view
    • There is a part commented out in my code that would pop up a share button when hovered over the ellipses (...) at each card. I found here difficult to work with the cards individually with a lot of repetition.
    • Also the bigger issue is that after the mouseover event the popup stays there.

    Tailwind CSS Time Tracking Dashboard

    1
    Dipesh•430
    @Dipesh-sapkota1Posted 4 months ago

    🎉Congratulation on completion of your project🎉

    1.Card Overflow and Layout: -To prevent card overflow issues, consider using min-h-screen. Browsers naturally try to preserve content, and issues often arise from unnecessary CSS. Your layout breaks at the small break-point because the required columns were not specified to fit all the cards. Ensure that your grid system accommodates all elements at different breakpoints.

    2.Netlify Deployment: -Great job attempting to deploy on Netlify! However, I couldn't view your website. When deploying with frameworks or libraries, make sure to specify the base directory and build command. This extra step is crucial for successful deployment.

    3.JavaScript Improvements: -Your JavaScript is currently not working. Here are a few suggestions: Use querySelectorAll for selecting multiple elements and adding event listeners. Break down large functions into smaller, reusable, and manageable functions.

    4.Design Focus: -Being creative is fantastic, but make sure to focus on basic design principles first. This will ensure a solid foundation before adding more creative elements.

    1
  • Lucas Barros•350
    @BarrosLucasJavierSubmitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    No comments at the moment

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

    No comments at the moment

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

    No comments at the moment

    Responsive Newsletter SignUp Component

    1
    Dipesh•430
    @Dipesh-sapkota1Posted 5 months ago

    keep it up

    0
  • Ruan Gomes•100
    @rug19Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Hello guys!

    I started with JavaScript recently and am very excited to learn more about it, so I'm proud that I could do this little project.

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

    Well, I didn't think it was hard, but I did some research about little things to finish the project

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

    I'd like to receive feedback about my script, I don't know if I did a great code.

    Responsive article component

    1
    Dipesh•430
    @Dipesh-sapkota1Posted 5 months ago

    it is good

    Marked as helpful
    1
  • Dipesh•430
    @Dipesh-sapkota1Posted 5 months ago

    look out for fonts and keep it up

    0
  • Dipesh•430
    @Dipesh-sapkota1Posted about 1 year ago

    Congratulation @JosephAbuchi for completing challenge👏🎊

    I would like to give few suggestions to improve your code

    1. Learn to structure your page semantically, in your case you used <footer> to encapsulate your main content of your page. Use <main> element instead
    2. Use at least one <h1> heading on your page.
    3. Use rem units for font-size, rem unit is directly related to the font-size of the root element and changing font-size in the browser setting will directly affect the font-size of your webpage.
    4. Use grid for two dimension layout, it will help you precisely align elements.
    5. Don't define height for your elements unless necessary, let height of the elements be auto.
    6. Don't use position property for making layout, the response of page render will differ according to device. Instead stick to grid or flex-box for layout.
    7. Make a good use of inheritance by defining global CSS properties and proper reset.
    8. Use CSS variables to pre-define your properties, this will make your code clean.
    9. Follow mobile first approach, to make user friendly design.

    You did great, keep coding and happy coding 🙂

    0
  • Dipesh•430
    @Dipesh-sapkota1Posted about 1 year ago

    Congratulation Jose on completion of your project 👏🎊

    I will like to suggest few things

    1. Don't over use box-shadow.
    2. Test your project after completion for accessibility issue. In your case colors in card are not visible.
    3. Identify proper breakpoint for devices, you can learn more about media queries conditions here.
    4. Use grid properties like align-self or justify-self to precisely align elements within gird container.

    You did great on your project and happy coding🙂

    0
  • Mjornog•40
    @MjornogSubmitted about 1 year ago

    My first difficulty in this challenge was in the process of deducing the sizes of the elements on the screen and I “wasted” a lot of time with that, so I'd like to know some tips on how I can make this design process a little faster.

    My first solution using CSS

    2
    Dipesh•430
    @Dipesh-sapkota1Posted about 1 year ago

    Hi @Mjornog 👏 Congratulation for completing front-end mentor challenge.🎉

    • To answer your question for how to dynamically change size of an element? I would like to say It is not necessary to add height and width to a div. Naturally, browser tend to make web responsive, everything will fall into its place own its own and make necessary changes when it is required. We make web unresponsive by adding extra properties.
    • You can implement these points to improve your code.
    1. Follow DRY (Don't Repeat Yourself) principle
      • I saw too many repetition of same properties, use CSS variables to define properties at one place and you can use it again for multiple selectors.
      • Learn about inheritance that will save you many lines of code.
      • Start your CSS with a good CSS reset and base CSS for your elements.
    2. Make your website responsive
    • You can start making your website responsive by following mobile first approach. It will make your life a lot easier.
    • Use CSS Grid or flex-box to make precise alignment of layout.

    3 . Organize your file structure

    • For small project like this does not require multiple CSS. If it requires to add multiple CSS then organize your files in separate folders.

    You did great on your project and happy coding! 👏🎉🙂

    Marked as helpful
    1