All solutions

Hi everyone! 👋

Wrapping up the Body Mass Index calculator challenge today. As stones are not used for body weight in the US, I added the ability to return the ideal imperial weight range in pounds as well as stones and pounds. Also added some error messages and form validation to this project.

Happy Coding!

Hi everyone! 👋

Closing out this design portfolio challenge today. Decided to build the image gallery slider instead of using a JavaScript library for this component. I also changed up the design a bit--needed to swap around some colors for color contrast and accessibility.

Did my best to make the image gallery accessible, but I probably could still improve things here. I've included two links in my Readme to resources I found useful for creating accessible carousels/sliders.

Time to move on to another project.

Happy Coding!

Hi everyone! 👋

Finally wrapping up this interactive pricing component challenge. Used mostly Grid and some CSS Flexbox for this one. Also swapped some color values for accessibility.

Stying this range was something else! Wild that browsers are so different for this type of form input. I've included links in my Readme to resources I found useful for styling the range and creating a radio button switch.

Happy Coding!

Hi everyone! 👋

Just finished this section component/form challenge. I modified this design to better meet accessibility standards by using darker colors. I also changed the labels so they persist on focus/error states.

There is no backend connection. I decided to leave in the form action/method info in the HTML for now, but this does trigger a 405 Not Allowed on form submission from my GitHub page.

For the validation, I used the Constraint Validation API. I've added links in my Readme to info on forms and accessibility.

If something is not working with accessibility, please let me know. Still learning and trying to improve my coding skills in this area with each challenge.

Happy Coding!

Hi everyone! 👋

Just finished this article component challenge. Styled mainly with CSS Flexbox and Grid. I used JavaScript to open the popup modal and trap keyboard focus.

Although I commented it out since this is a coding challenge, I also included the Open Graph info so this article should format correctly when shared.

Have added useful links in my Readme for how to trap focus with JavaScript, as well as links to the social media developer pages about Open Graph meta tags.

Happy Coding!

Hi everyone! 👋

Finally getting around to posting my solution for this challenge. Tried to make this tip calculator accessible, but still learning a11y so did my best.

The math shown in the Figma example had me switch out how I calculated my total split tip. Had initially rounded up all the values.

I'm sure there are areas in my code that could be improved, but the calculator is working so time to move on to another challenge.

Happy Coding!

Hi everyone! 👋

Just finished this landing page challenge. For the email validation, I used the Constraint Validation API. Styled mainly with CSS Flexbox and Grid for my container.

Happy Coding!

Hi everyone! 👋

Finally getting around to doing some of the card challenges. Mostly used flex with grid for the container.

Used the <s> element to strike out the price and added content via pseudo element to mention the old price for screen readers.

Happy Coding!

Hi everyone! 👋

Just finished this API challenge. Used async, await for the fetch api call. For the styles, used CSS Flexbox with Grid for my container.

Happy Coding!

Hi everyone! 👋

Finished this challenge up this weekend and am now posting my solution. Built this using CSS Flexbox, Grid and JavaScript.

Added some links in my ReadMe to a few resources I found helpful when completing this challenge.

Happy Coding!

Hi everyone! 👋

Wrapped this challenge up yesterday but just now posting. Built this using CSS Grid and JavaScript. Was a nice challenge working with object data.

A couple of the colors did not pass color contrast ratios so I swapped them out for ones that did.

Hi everyone! 👋

I had fun building out this dark and light theme social media dashboard. Used CSS Grid, some Flexbox and a few lines of JavaScript for the toggle switch.

A couple of the colors did not pass color contrast ratios so I swapped them out for ones that did.

Hi everyone! 👋

A lot of CSS Grid with this challenge. Also, my first time using Leaflet JS to create the location page map. If you're interested in CSS Grid, I've added a few links to some of my favorite articles and resources in my readme.

Feedback welcome!

Hi everyone! 👋

I have not done very much with color manipulation so had fun learning more about mixed blend mode. I've added some links about this topic in my readme, including an aspect ratio calculator.

Feedback welcome!

Hi everyone! 👋

Wow, the layered image in this challenge was something else. Took some time to figure out the order. Other than that, I wanted to practice my JavaScript so built this project with that in mind.

I used an accessible accordion pattern for this challenge. I've added links to these coding resources in my readme, including a non-JS version from NHS Digital Service Manual on using the details tag in an "expander" as they call it.

Feedback welcome!

Hi Everyone! 👋

Mainly used Flex with some Grid for this challenge. Created an SVG <symbol> for the rating star and also used a <figure> with <blockquote> for the quotes. Adjusted some colors for better color contrast.

In my readme, I included a link to a CSS Tricks article on five methods for coding 5 star ratings and my favorite color resource for making color adjustments.

Feedback welcome.

Happy Coding!

Hi everyone! 👋

A good challenge to brush up on my radio button knowledge. I added a couple of useful links I found for coding and styling these buttons in my readme.

I also added an error message if the form wasn't completed and changed some colors to meet color contrast ratios for accessibility.

Feedback welcome!

Hi everyone! 👋

Submitting my first Frontend Mentor challenge. I had fun working on this project and learning more about overflow-x :)

• <article> or <div> tag? I went with <article> for each course, but thought about switching back to <div>. I wasn't 100% sure on this one.

Feedback is welcome and appreciated.