All solutions

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

Built with:

• Semantic HTML5 markup
• Native CSS
• Vanilla JavaScript ES6
• Mobile-first workflow
• Custom checkbox styles
• Custom range input
• Form validation
• Custom formula to calculate the strength of the password

Checked with:

• Chrome Screen reader
• Chrome Lighthouse
• PerfectPixel

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

Dear community,

I'm always happy to get any feedback on eventual bags, code optimisation and especially accessibility issues.

Thanks in advance! 🍭 Ortaly

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

Built with:

• Semantic HTML5 markup
• Native CSS
• Vanilla JavaScript
• Mobile-first workflow
• font-size: clamp() - for fluid typography
• Font-family switch
• Form validation
• REST API to search for term in Free Dictionary API
• Audio() constructor mdn - to play audio file
• Dark / Light Theme switch + prefers-color-scheme + Fallback in JavaScript
• Aria role listbox + option to add accessibility for selecting subjects

Checked with:

• Chrome Screen reader
• Chrome Lighthouse
• PerfectPixel

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

At the time point of submitting this challenge, the audio links, provided by Free Dictionary API, for some reason became inaccessible (Bad gateway, Error code 502), though they worked perfectly while developing the challenge... Obviously, this prevents the play sound button functionality.

Please advice if you have any idea how to solve this. Thanks in advance!

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

Built with:

• Semantic HTML5 markup
• Native CSS
• Vanilla JavaScript
• Mobile-first workflow
• JSON to populate questions
• CSS animations (transition + @keyframes)
• Light / Dark theme switch
• Aria role listbox + option to add accessibility for selecting subjects
• CSS @media (prefers-reduced-motion) + Fallback in JavaScript

Checked with:

• Chrome Screen reader
• Chrome Lighthouse
• PerfectPixel

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

I am always glad to get any improvement suggestions, especially for accessibility.

Thanks in advance 🍭

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

Buit with:

• Semantic HTML5 markup
• Native CSS
• Vanilla Javascript
• JSON file to store the pack details
• fetch() to get and populate the data from JSON file
• CSS transition to animate switch toggle
• Accessibility Techniques

Checked with:

• Chrome Screen Reader
• PerfectPixel
• Lighthouse

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

I tried to make this solution as accessible as possible. Please let me know if you spot any issues. Also if you spot any other problem, I would be glad to hear about it :)

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

I tried to make this solution as accessible as possible, please advise if you spot any issues. And of course if there are other bugs, I'll be happy to know about them too :)

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

Features:

• Vanilla Javascript + Native CSS + Semantic HTML5.
• Responsive design + Mobile first approach.
• Form validation.
• Accessibility.
• Customised accessible drop down select element.
• Countdown to launch date (for presentation purpose: the date is set to 30 days in the future from the moment the user visits the website).

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

Accessibility question: I've spotted a bug: if I navigate through the site with the keyboard (using tab key), after arriving to the select element I can't go further or go back to other inputs. So to move back or forth I have to use the mouse... Any suggestions on how to fix this issue are highly appreciated!

Any other suggestions for improvement are also very welcome :)

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

I try to make my solutions as accessible as possible, please advise if you spot any issues.

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

Accessibility (checked with Chrome Screen Reader):

• navigation (also for mobile hamburger menu)
• skip to main content link
• dialog modal
• accordion for expandable card
• error message if input is incorrect

Web Animations API for the update of the status bar

JSON to populate the product's list

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

I've tried to make this calculator app accessible. Please advise if you spot any accessibility issues, or if you have any other suggestions. Thanks in advance 😊

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

This solution selects the correct color scheme chosen based on user's computer preferences. Please let me know if it doesn't work on your machine :) or if you spot any other issues.

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

For this solution I played a little with CSS transitions to add some animations. The data for the dashboard is fetched from the json file.

Any improvement suggestions on code optimisation / best practice are very welcome :)

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

My first time implementing interactive maps. Please advise if you spot some bugs or unexpected behaviour. I am always happy to get improvement suggestions :)

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

This was the first time I used a slider (carousel) to animate the projects gallery. Any improvement suggestions are highly appreciated!

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

With form validation. The form is hooked up to send and store the user's enquiry using a spreadsheet.

UI with little CSS animation on the appearance of the pattern while scrolling. Plus with animation on the appearing of the project images on scroll, using GSAP.

I hope the page is not overloaded and everything functions like it should. Please let me know if you spot any issues!

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

Question: Though on life site sits the Project section where it should, on the screenshot is the Projects section shifted to the left. I think it comes from the animation, that is captured at the "wrong" timing :). Can you still see this section as it should be on your web browser?

It was interesting getting the navigation look and work properly in both desktop & mobile view. Any tips on code optimisation / accessibility are very welcome :)

I added an animation to the appearance of the charts using CSS. Is it the right way to do this or should I use JS?

I am not sure the cropped png as background image looks best. Is there a better solution to this?

Dear Community, any feedback on code optimization or alternative approaches to solution this challenge are highly appreciated :)

Dear Community, any feedback on code optimization or alternative approaches to solution this challenge are highly appreciated :)