All solutions

This one was deceptively simple looking, the sizing gave me fits; got myself all tangled up with grid, flex, min/max-width's, got out of trouble thanks to Ahmad Shadeed's post Min and Max Width/Height in CSS.

Building the slider indicator was fun although I wasted a ton of time trying to do it with the HTML <progress> element (that is a nightmare to style), gave it up and just used div and span elements.

Learned a ton about what I don't know, as usual. Feedback welcome 😄

My second Junior challenge completed.

It was fun figuring out how to style the toggle switch button and create the custom slider on this one. Had to dig through a number of tutorials and examples but finally got it sorted. It was nice to get back to JS (haven't really touched it in years).

Learned a neat trick along the way, using a data-* attribute to show the word discount on the larger screen sizes.

Managed to get everything working in Firefox, Chrome, Edge, and Safari with one small nit, can't seem to remove the border on the slider thumb for Safari; if anyone knows how please let me know how in the comments.

Feedback welcome.

This is my first Junior challenge and it took me quite a bit longer than I anticipated, even if I discount the rabbit holes I went down and being distracted by Keith Grant's CSS in Depth and Andy Bell's CUBE methodology (time well spent, in both cases).

Funnily, the section I thought would give me the most trouble (the image gallery) went the smoothest, go figure. Anyway, relieved I managed to get it done even though there is still a lot of room for improvement.

Feedback welcome.

Mostly a re-structuring of HTML tags and assigned class names. The CSS is a bit longer but I think (hope) it is easier to follow and that it makes visual elements easier to maintain and/or extract.

This is the second challenge I've refactored. I focused on trying to identify which elements could be looked at as possible reusable components and separated out my CSS accordingly. Whether this is the right approach or not only time will tell.

Also added a JS utility to ensure only the selected item is displayed (inspired by Maria's solution. The bouncing box was inspired by ApplePieGiraffe's solution. Thank you both.

The graphics still gave me fits but at least I had a better idea of why things were going wrong. Also not convinced I've found the most useful way of dealing with them. Any and all suggestions for improvement are welcome.

Before starting on the Junior projects decided to re-visit some earlier challenges and refactor the code in light of what I think I have learned. This is my first refactor.

Any and all suggestions welcome.

This is the last of the currently available newbie challenges, on to the Juniors.

Any and all suggestions for improvement are welcome.

Had an interesting time with this one trying to figure out how to colourize .svg icons and get rid of a pesky red box-shadow Firefox kept adding to the email input field after it was submitted, even if the field was empty. Couldn't quite figure out how to make the logo image fully responsive, the method I used for the dashboard image wouldn't work as I couldn't figure out what to reliably compare the logo size too.

Any and all suggestions for improvement are welcome.

My tenth completed challenge. This one took some planning and re-planning but when I ran into a snag I had a much better idea of what was causing the problem than I had when I was working out the first few challenges. The practice is definitely helping.

Not quite happy with the positioning on my desktop layout, any and all suggestions for improvements are welcome.

Any suggestions for improvements welcome.

This one has taken me awhile to complete, the graphics were giving me fits and I still haven't got them quite right for the mobile layout, the photo looks ok in the browser but on an Android phone it is squished against the top. Any suggestions or hints as to how to fix this would be greatly appreciated.

Many thanks, best wishes to all for the season (fingers-crossed 2021 will be a big improvement on 2020 for everyone).

Used a hover effect with CSS only for the 'active' states. Couldn't figure out how to change the 'icon-share.svg' foreground colour, the background-color property worked ok but the color property had no effect. Any hints as to how it can be changed with CSS??

Getting the hover to work right took a bit of experimenting, was happy to finally get it working.

This was a bit of a challenge. Tried to use the img srcset/size HTML tag to load the alternate file for the mobile 375px size but without any luck. Managed to get the hover, icon, and box animation effects working with CSS but cannot get the box to scale correctly. Any suggestions/hints appreciated.

Hi ... is there any way to stop the background images from moving around when the page is resized? Could not figure out how to make them stay in place as the browser shrinks or expands.

Thanks