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

aurobyte

@taranjeetsingh9130 points

Aspiring Full Stack Developer

Latest solutions

  • Time Tracking Dashboard

    #react#typescript#vite#sass/scss

    aurobyte•130
    Submitted 6 months ago

    I have doubt regarding the setting up css for project as we have #root div inside index.html then we set up other div styling and it mix up styles and layout. So if someone suggest me great resource son how to style react components and index.html so that in starting we have good layout.


    1 comment
  • Newsletter sign-up form with success message

    #accessibility

    aurobyte•130
    Submitted 7 months ago

    I love hearing from people about my css approach as I think I can refine it but struggling with setting image width and height.If anyone can guide me I will be grateful for that.


    0 comments
  • Article Preview Component

    #accessibility

    aurobyte•130
    Submitted 7 months ago

    0 comments
  • News Homepage


    aurobyte•130
    Submitted over 1 year ago

    0 comments
  • Blog preview-card


    aurobyte•130
    Submitted over 1 year ago

    0 comments
  • QR code Responsive


    aurobyte•130
    Submitted over 1 year ago

    2 comments

Latest comments

  • P
    Darkstar•1,420
    @DarkstarXDD
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Built with. 🔨

    • HTML & CSS.
    • TypeScript.
    • Zod - To validate the data received from the server (a JSON file in this case).
    • Motion (formerly Framer Motion) - Used for some small initial load animations.
    • Vite.

    Features. ✨

    • Built according to the ARIA Tab Patterns guide.

    Notes. 📌

    • I think this project should have been done using a framework like React. If so, it would have been faster to get done, with much more cleaner code and will be easier to maintain.
    • Since i went the vanilla way, the first problem i saw was that i would have to repeat the same card markup 18 times (6 cards into 3 panels) inside my HTML. To avoid this, initially i generated the markup with JavaScript. So i would have the markup for one card in JS, and then once the data was retrieved and validated i would loop over the data and create all the card markup and append it to the DOM. This was working fine but since the cards were not in the initial HTML when the page was rendered, there was this annoying layout shift that happened when the cards were later added using JavaScript.
    • There were few options to counter this like showing a loading state until the data was retrieved and the cards were generated, but i eventually ended up hard coding all the card markup in the HTML. So now once the data is retrieved, only the hour values are updated using JS.
    • I left the initial solution where the cards were dynamically generated in it's own branch - solution/dynamic-card-generation
    What specific areas of your project would you like help with?

    Any feedback is appreciated!

    Time Tracking Dashboard

    #typescript#zod#motion
    1
    aurobyte•130
    @taranjeetsingh9
    Posted 6 months ago

    Great solution. I Love your css implementation.

  • Ibeaka Godson•470
    @Warmarth
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of typescript and HTML improvements: -my understanding of interface and type alias -learning the they is an event type -learning the use of picture element and source element in html -and the use of media attributes in html

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

    challenges I encountered were: -positioning of the success card -easy and smooth display of the images -validation of the event and adding it styles

    how I overcame them: -positioning of the success card have no been resolved properly -easy and smooth display of the images, I used the html picture element -validation of the event and adding it styles, I used the includes and endsWith method

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

    I will be needing help success card and other reviews of other section and components will be appreciated

    Responsive Newsletter sign up page built with TYPESCRIPT,CSS & HTML

    #accessibility#typescript
    1
    aurobyte•130
    @taranjeetsingh9
    Posted 7 months ago

    Love the javaScript validations and the way you applied.Also it's helpful to learn about picture tag and it's proper implementation.

    Marked as helpful
  • Rowland•320
    @rowleks
    Submitted 7 months ago

    Article preview card component

    #accessibility#pure-css#solid-js
    1
    aurobyte•130
    @taranjeetsingh9
    Posted 7 months ago

    Great solution. The Semitic tag uses are great way. Just a one minor suggestion for image setting you can use background image as cover to make your design more similar. Love your way of coding.

    Marked as helpful
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

Oops! 😬

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

Log in with GitHub