Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Krishna Rawat• 20

    @Krishnarawatethic

    Submitted

    What are you most proud of, and what would you do differently next time?

    This time I did it faster and learned many things and I would next time try to manage my tags properly to avoid confusion next time.

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

    The challenge was to arrange containers with style tags correctly also some concept related to list styles and table border CSS properties were new and challenging.

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

    I would like me to correct me to how to avoid this image error. I mean whenever I host my pages on GitHub images always never showed.

    Recipe-page || Pure HTML & CSS

    2

    Manish Sindur• 190

    @manishsindur

    Posted

    Removing a / from the src attribute before assets likely solved the problem of loading an image because it changed the path resolution behaviour in HTML.

    Make sure to check your Github as i made a Pull request

    When you specify a path in the src attribute of an img tag without a leading /, the browser interprets it as a relative path. By removing the /, you made the path relative to the current page's URL instead of an absolute path.

    • For example, if your page URL is https://www.example.com/recipes/omelette.html and the original src attribute was src="/assets/images/image-omelette.jpeg", the browser would look for the image at https://www.example.com/assets/images/image-omelette.jpeg.
    • By removing the leading / and having src="assets/images/image-omelette.jpeg", the browser now looks for the image relative to the current page's URL, resulting in https://www.example.com/recipes/assets/images/image-omelette.jpeg.

    So, removing the / changed the path resolution to be relative to the current page, which likely resolved the issue of the image not loading.

    Marked as helpful

    0
  • Yash Bhatt• 280

    @Y-ashbhatt

    Submitted

    What are you most proud of, and what would you do differently next time?

    Was able make Mobile responsive easily this time unlike the confusion with qr-code project. Next time I would like to practice grid because I still went with flexbox.

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

    Getting the size correct was a problem. I constantly compared it to solution to get it as close as possible but this doesn't seem efficient.

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

    The best approach to get size if you don't have figma design files?

    Blog preview card solution

    3

    Manish Sindur• 190

    @manishsindur

    Posted

    Based on the project you've undertaken, when it comes to coding a design image, there are a couple of methods(feel free to watch Cavin Powel and CoderCoder how they approach the project) you can use:

    1. Create the Design in Figma from Scratch: If you have the design image but not the Figma file, consider creating the design from scratch in Figma. This approach offers several advantages:

      • Understanding the Design: By designing in Figma, you'll grasp the layout, typography, colors, and other elements more deeply, aiding in coding.
      • Responsive Design: Figma supports responsive designs, crucial in modern web development. Experiment with various breakpoints to see how the design adapts.

    2. Code the Design by Judgment: If time or resources don't permit using Figma, you can attempt coding based on the image:

      • Analyze the Design: Study the image closely to comprehend its layout, typography, and colors.
      • Translate to HTML/CSS: Code HTML and CSS to replicate the layout and styles.
      • Iterative Improvement: Refine your code iteratively to match the design accurately.

    Considering your current web development experience, I suggest starting with the first approach: creating the design in Figma from scratch. This method will enhance your understanding of the design process and its translation into code.

    As you advance, you might explore the second approach.This method can improve efficiency and confidence as your skills grow.

    Marked as helpful

    1
  • Ivano• 70

    @IvanoCro

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of how it turned out in the end, considering I faced many difficulties that I managed to solve after a lot of pain. I am aware this wasn't for beginners, but I still took on the challenge because I like pushing myself to become better at absolutely everything. Next time, I would do positioning differently.

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

    I encountered a problem where the image simply wouldn't move to the other side, so I managed to use position: relative and adjusted it to be where it should be. I also encountered issues with JavaScript and an error message that I couldn't resolve at all.

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

    I would like feedback and assistance on the best way to learn JavaScript.

    Newsletter sign-up master

    2

    Manish Sindur• 190

    @manishsindur

    Posted

    The best way to learn js is by writing more and more JS. Remember consistency is the key.

    • At least make it responsive.
    • Do a bit research on Form Validation and apply it.
    • Email entered by user should be displayed on the success message, that gives assurance to the users .
    0
  • Ash• 200

    @ash-109

    Submitted

    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    article preview component

    2

    Manish Sindur• 190

    @manishsindur

    Posted

    Nicely Done !!

    0
  • Manish Sindur• 190

    @manishsindur

    Posted

    • Author profile and share icon is not visible in mobile view.
    • Author profile is visible in desktop view but no share icon.
    • By default the mobile view has active view
    0
  • Manish Sindur• 190

    @manishsindur

    Posted

    Border design is good but it might look good on small screens also.

    0
  • Anthony Becarne• 160

    @Abecarne

    Submitted

    What are you most proud of, and what would you do differently next time?

    It was the first time that I tried to guess how long it would take to create this responsive page and I was really close to the timer I have set. The challenge was easier than the last one I did as I already knew few things about responsive.

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

    I didn't faced any real challenge for this one. I might not be perfectly similar with the design given but i'm close enough to be proud of me.

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

    When would you put breakpoint(s) for this kind of page ? I didn't want to spend more time on it but I think that i could do 3 differents medias for this project. What do you think of it ?

    Also, any other feedback would be appreciated :)

    Responsive Four Feature Sections

    1

    Manish Sindur• 190

    @manishsindur

    Posted

    Good Work 👍

    1
  • msumii• 80

    @msumii

    Submitted

    What are you most proud of, and what would you do differently next time?

    Queria fazer minha primeira aplicação em React e escolhi esse desafio para realiza-lo, principalmente bem simples e objetivo o desafio.

    Se tiverem algum feedback para me dar, principalmente por ser minha primeira aplicação em React, vou ficar super agradecido :))

    Product Perview Card

    1

    Manish Sindur• 190

    @manishsindur

    Posted

    good work👍

    1
  • ISAAC EDZORDZI FIAVOR• 110

    @ISAAC-EDZORDZI-FIAVOR

    Submitted

    What are you most proud of, and what would you do differently next time?

    none

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

    none

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

    none

    Recipe with html and css

    1

  • hogibpro98• 70

    @hogibpro98

    Submitted

    What are you most proud of, and what would you do differently next time?

    Noting

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

    Noting

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

    Noting

    Base css

    1

    Manish Sindur• 190

    @manishsindur

    Posted

    Nyc work..👍

    0
  • KaueAlencarr• 30

    @KaueAlencarr

    Submitted

    What are you most proud of, and what would you do differently next time?

    Deus no controle

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

    Deus no controle

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

    Deus no controle

    Cartão de visualização do blog com html e css

    1

  • Gabe Leal• 30

    @lealgabe

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of completing a challenge. It's a mini project completed from start to finish with some struggles in between.

    For my next challenge I will need to study the fundamentals a bit more but practicing helps retain the knowledge better.

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

    My first challenge was that the container and text elements were not sizing as well as I hoped. I requested help from the Frontend Mentor Discord community and tried again.

    They provided me with feedback and resources to read up on.

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

    I would like help and resources on CSS best practices so I can approach the nest project with more confidence.

    QR code component using CSS

    1

    Manish Sindur• 190

    @manishsindur

    Posted

    Yes, there are several excellent resources available for CSS best practices. Some of the top resources include:

    1. CSS Best Practices GitHub Repository: This repository provides a comprehensive guideline of best practices for front-end projects, covering topics like CSS methodologies, linting, cross-browser compatibility, and more[1].

    2. Kinsta Article on CSS Best Practices: Kinsta's article outlines 14 CSS best practices for beginners, including tips on minifying stylesheets, using preprocessors like Sass, considering CSS frameworks, starting with a reset, and more[2].

    3. Reddit Frontend Subreddit: The Reddit frontend community offers advice on improving CSS styling skills through practice, learning about the CSS box model, specificity, and resources like Front-End mentor for exercises[3].

    4. Apollo13Themes Article on Mastering CSS Skills: This article lists 10 great resources to master CSS skills, including Codecademy courses, Mozilla's CSS documentation, freeCodeCamp's Responsive Web Design Certification, CSS-Tricks blog, Smashing Magazine, CodePen for practice, and Frontend Masters Online Bootcamp[4].

    5. CareerKarma Article on CSS Best Practices: CareerKarma's article emphasizes the importance of CSS best practices for web developers, covering concepts like CSS files, selectors, classes, declaration blocks, and providing resources for learning CSS best practices[5].

    These resources offer a wealth of information and guidance to help you enhance your CSS skills and follow best practices in your web development projects.

    Citations: [1] https://github.com/andredesousa/css-best-practices [2] https://kinsta.com/blog/css-best-practices/ [3] https://www.reddit.com/r/Frontend/comments/tblqqb/what_are_the_best_resources_to_be_better_at_css/ [4] https://apollo13themes.com/10-great-resources-to-master-your-css-skills/ [5] https://careerkarma.com/blog/css-best-practices/

    Marked as helpful

    1