Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
4

Nishant Goyal

@ngcoder740 points

👨‍💻 Aspiring Front-End Developer | Currently Learning | HTML, CSS, JavaScript Enthusiast 🌱

Latest solutions

  • Responsive page using flex box and vanilla css


    Nishant Goyal•40
    Submitted 3 months ago

    1 comment
  • Vanilla CSS Only


    Nishant Goyal•40
    Submitted 3 months ago

    1 comment
  • I have Used VS Code and Live server also.


    Nishant Goyal•40
    Submitted 3 months ago

    1 comment
  • VS code , Used style.css external file


    Nishant Goyal•40
    Submitted 3 months ago

    1 comment

Latest comments

  • Peeradon Sootsukon•120
    @P-Peeradon
    Submitted 3 months ago

    Using sematic element in building recipe card

    2
    Nishant Goyal•40
    @ngcoder7
    Posted 3 months ago

    Looking goood some adjustments needed.

  • Mo Shanib•40
    @shanib-code
    Submitted 3 months ago

    social links profile created by shanib with the help of frontendmentor

    1
    Nishant Goyal•40
    @ngcoder7
    Posted 3 months ago

    Why did not yo centered the div. But at last good work

  • retnoadrahmawati•80
    @retnoardanaridr
    Submitted 3 months ago

    Blog Preview Card with HTML, CSS

    1
    Nishant Goyal•40
    @ngcoder7
    Posted 3 months ago

    Its good But incomplete so you can give 5 more minutes here and do the completion. Never ever leave any project incomplete as it will become habit in future.

  • P
    Kyle Mulqueen•400
    @kmulqueen
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    What I'm Most Proud Of

    I'm particularly proud of two aspects of this project:

    1. Visual Implementation: My ability to accurately translate the Figma design into a polished final product with clean, efficient CSS that required minimal troubleshooting.

    2. Semantic Structure: How I evolved my approach to semantic HTML during the project—moving from basic structure to a properly organized document with appropriate <article>, <figure>, and <header> elements.

    This dual focus on both visual fidelity and semantic correctness represents a more holistic approach to front-end development that I'll carry forward.

    What I'd Do Differently

    If I were to approach this project again, I would start with the proper semantic structure from the beginning, rather than refactoring it later. Having a solid foundation of semantic HTML before adding styles would likely make the development process even more efficient and result in cleaner code from the outset.

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

    Challenges and Solutions

    Semantic HTML Challenges

    The primary challenge I faced was correctly implementing semantic HTML. Initially, I misused <section> tags within the QR card component, which didn't accurately represent the content structure. This created potential accessibility issues and didn't follow best practices.

    To overcome this challenge, I:

    1. Researched semantic HTML best practices through MDN documentation
    2. Learned about the appropriate use of <article>, <figure>, and <header> elements
    3. Refactored my code to implement proper semantic structure
    Design Precision Challenges

    Another challenge was ensuring the final result precisely matched the Figma design specifications, particularly with:

    • Getting the right box-shadow on the QR card
    • Achieving proper spacing between elements

    I overcame these by:

    1. Using the browser inspector tools to compare my implementation with the design
    2. Making incremental adjustments to CSS properties
    3. Focusing on pixel-perfect implementation of the design specifications

    This methodical approach to both the HTML structure and visual styling resulted in a solution that not only looks correct but is also built on a solid foundation of semantic markup.

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

    Areas Where I'd Like Feedback

    CSS Organization and DRY Principles

    I'm seeking guidance on striking the right balance with my CSS classes. I want to:

    • Keep my code DRY (Don't Repeat Yourself) through thoughtful class creation
    • Avoid overdoing utility classes which might lead to "div soup" with too many classes
    • Establish a maintainable pattern for styling components
    Stylesheet Readability

    I'd appreciate feedback on whether my CSS stylesheet is:

    • Organized in a logical, intuitive way for other developers
    • Structured to make it clear where new styles should be added
    • Commented appropriately to explain complex or non-obvious styling decisions
    • Following naming conventions that make the purpose of styles clear
    HTML Optimization

    While I've improved my semantic HTML structure, I'd still like to know:

    • If there are additional accessibility enhancements I could implement
    • Whether there are SEO opportunities I'm missing in my markup
    • Whether the document structure could be further optimized for screen readers

    Responsive QR Code using HTML & CSS

    2
    Nishant Goyal•40
    @ngcoder7
    Posted 3 months ago

    Its Good but i didnot think that we need semantic element in this as there is no need to do do that in this small project.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub