All solutions

My approach to age calculator.

I added age numbers animate to their final number when the form is submitted (with little help from chatGPT :) ). Because of animation I added another container with calculated age from screen readers only, and animated one is hidden for ARIA.

I learned a lot about javascript. It took me a while trying to make calculation script. At first tried to calculate differece in dates in miliseconds ant then converting this do years, months, and days but it didnt work properly.

I also used SASS for the first time.

I used few clamp() functions to provide good responsiveness and was trying to provide good accessability.

Any tips and feedback are welcomed :D

Another challenge completed.

With this challenge I tried to focus on accesability. Added error validation, and sr-only input description to be easier handled by screen readers. I also tweaked colors that are demanded in style-guide because there was issues during accesability test according to contrast of elements.

Any feedback and tips are welcomed :)

Hello, another challenge I completed in mobile first approach.

I don't know what are needed breakpoints for responsive view but on this challenge I have breakpoint for 760px, because it looked bad with desktop design between 480px and 760px.

In this challenge I focused on managing form inputs in good way.

I used aria-describedBy attributes to manage input errors.

I would be very gratefull for feedback and tips, especially in javascript that I refactored with a little of chatGPT help :)

Another challenge with mobile first approach.

I was focused on good responsiveness and clear HTML.

Beside this big part of this challenge was javascript when I focused on validation on multiple inputs using "for" iteration method.

Any tips and feedback are welcomed, especially if my approach to javascript is good?

It was hard but fun challenge.

It is needed to make custom form validation that I made with help of mdn web docs. For main design I used grid Any tips and feedback are welcomed. Especially according to javascript/validation part.

It was challenging for me.

I had troubles with positioning share window and adding triangle to this.

Beside this I didn't know about fill() property so I didn't know how to change color of svg, but visualdennis https://github.com/visualdenniss/frontendmentorProjects/tree/main/src/components/newbie/ArticlePreviewCard solution helped me.

A also trained javascript, in which I am not familiar still.

Beside all these troubles I also added some simple animations in CSS and I am almost happy with my result.

Another challenge where I trained css grid

Tips and feedback are welcomed

Another challenge completed, this time I focused on CSS grid, especially in desktop version. I was also trying not to use .px units.

Tips and feedback are welcomed :)

Another challenge done.

I am not sure if is it good practice to set min-height: 40% to description container to keep distance between button and text od wider screens.

Feedback and tips are welcomed :D

Another practice this time I used both flexbox and CSS Grid.

Tips and feedback are welcomed

Cheers

While doing this challenge I used Javascript for the first time . Beside challenge requirements I also added logic to check if user chose rating before click Submit.

I think I should use radio buttons for choosing rate? I will try to use this in next challenge.

Tips and feedback are welcomed!

Solution according to Mobile-first workflow

Feedback and tips are welcomed

Feedback is welcomed!

First time ever I placed one item on top of another

I used mobile first approach.

Feedback and tips are welcome :)

Is it good approach to get styles for colours and different font weight? How to simplify main CSS? I think there is a big mess Is it good to use variables in this project? If yes where? For colours?