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

Submitted

Responsive Age Calculator using HTML, CSS and JavaScript

@Jaime-Cont

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

What I'm most proud of is actually taking on the challenge and finishing it in a couple of days, and that it looks close to the solution as well! I have been studying and getting into Web Development for quite some time now, like a month or two, and I'm proud of how much I know right now and am looking forward to learning more!

The main thing I would like to do differently next time is incorporate the mobile first workflow, personally its much easier to make the website responsive when it is initially made for mobile.

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

The challenges I encountered include:

  • Not knowing how to do an incrementing animation
  • Not being proficient enough in responsive web design
  • Not being used to mid-advanced JavaScript

I overcame them by:

  • Looking through the internet and learning from seasoned developers and how they do it, I learned a lot by doing this and even made my workflow better cause of it
  • By testing numerous things I've learned while studying web development, and figuring out which works best in certain scenarios, which will be a great help in the future

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

The areas in my project I would like help with would probably be the following:

  • How to make my website responsive better, I know there are better ways I could've done for it to look better and more responsive
  • JavaScript, I learned a lot while studying but would really be nice to get help in some things I'm not familiar with to grow my knowledge, like the incrementing numbers, I bet there are other ways to do that

Community feedback

P
Lo-Deck 2,460

@Lo-Deck

Posted

Hi well done for this challenge,

I'll give this link you check out the mistake for HTML and CSS. 3WC validator.

It's better to use em or rem instead of px. FreeCodeCamp. FreeCodeCamp.

It's easier to start with a mobile-approach FreeCodeCamp.

Hope to be helpful.

Marked as helpful

0

@Jaime-Cont

Posted

@Lo-Deck Thank you so much for your feedback!

  • I noticed when I checked my mistakes using the validator it said I needed a header for my section, but the challenge didn't need a header like that, so maybe I should've used divs instead of sections since it was all just to fix margins and paddings
  • Also noted on how better it is to use em or rem instead of px! really helpful and will practice that from now on
  • And got it! will start with the mobile-approach first, it really does seem easier for responsiveness
0
P
Lo-Deck 2,460

@Lo-Deck

Posted

Ok, your section need a h2 or h3 instead yes you can use a div, for this challenge you don't really need a h2 or else.

However you have to set a h1 on each page, one per page, and you set it like that :

HTML :

<h1 class="sr-only">age calculator app</h1>

It's only for screen-reader and SEO, and after you hide with CSS. MDN

Marked as helpful

0

@Jaime-Cont

Posted

Okay got it! This is great help thank you so much I'll keep this in mind

0

@Jaime-Cont

Posted

@Lo-Deck Hey wanted to just thank you again! I was able to take out all my HTML and CSS mistakes cause of your feedback, real thankful!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord