All solutions

I wanted to use this project to practise Redux with React. I feel like my file organisation isn't great (I went through a Udemy course and the Redux tutorial and kind of ended up with a mix of the two suggested systems which I'm not sure is the optimal way). The project was very challenging at some parts but I think I learnt quite a lot, and I'm planning to do another take of this challenge, this time with async operations. And of course, I am yet to write up a nice readme, please don't hate me for it. Anyway, any comments on functionalities, or the code are welcome. Thank you!

I mean it works... but I wouldn't say I'm particularly proud of it :P feedback welcome!

Please try it out and if there's any errors please let me know so I can fix them. Copied most of the behaviour (when it comes to input, display and navigation) from Windows system calculator. I tried to make it accessible so keyboard navigation can be used (numbers + operators or use arrows to navigate keypad). Color themes can be switched with keyboard too. However! I found out that NVDA screen reader hijacks arrow keys however so things don't work as they planned, and overriding that seems counter productive. I also checked with Thunder and while the navigation works fine, it doesn't read out much - but I've only just installed it so haven't had much time to get used to how it operates. Lots more to learn I guess :)

This is my first independent React project so I would love some feedback on organisation, components etc.

I added a delete button to shortened links as all of them are saved to local storage, as well as a Try it out link in the header that takes you to the form.

Please play around with link shortening and let me know if you spot any visual or functional issues. Thanks! :)

ps. Oh hello 100 html issues...

My first time using Tailwind, I think it works? :) it seems quite simple to use but I will definitely use it on a more complex project to learn a bit more.

This challenge looks so innocent, but don't let it deceive you. I learnt so much!

I did my best to make it responsive: the toggle is two radio buttons, and screenreader should announce all changes made. At first I tried adding aria-live to dynamic elements but didn't quite get the result that I wanted, I tried adding aria-labels to make what was read out clearer but eventually added a hidden element to hold the full text, so that when the billing frequency is changed, all info is read out and not just the price change.

If you notice any issues, please let me know! Thanks :)

Okay I have to say that I love this design, it's so clean but fun and modern!

Great grid practice as advertised :D I would love to add some animations to it, I feel like it could use some movement - but while adding animation with GSAP is pretty straightforward, designing it to look good is a whole other story. If you have any advice, let me know!

I used vw to set the font size on smaller screens (the heading was overflowing the viewport), could I have done it another way?

Any other feedback will be very welcome!

The last newbie challenge :)

I'd love some feedback on JS here, I feel like I started it off really nice and neat and then it went a bit downhill with removing errors from the form :D

Any feedback is welcome :)

Hi, are the focus states on the form clear enough? I feel like the button is a bit too subtle, but it's technically the same as the input.

I seem to sometimes get a horizontal scrollbar on smaller screens, but it's not happening consistently so I think it's just a browser issue - or am I missing something?

I also cannot find the thing that HTML validation is picking up on, if someone could have a look and help me out, that would be great :D

Thanks!

Hi! I have two only questions about this, really:

• I used a pseudo element to make the background of one of the divs lighter and it works fine, but now I'm wondering if that was the right decision?

• I added a box-shadow for the hover and focus states, not sure if it's clear enough, what do you think?

Thanks!

Any feedback on the project is welcome, but I also have a question about semantic HTML.

I initially planned to use CSS grid to position elements in desktop layout, but to achieve that, I had to pull the image container outside of the <main> element. I wasn't happy with having just a random <div>, so I thought of changing it to <aside> but I thought that it wasn't the best choice either as it literally has no content in it.

I ended up just positioning the image absolutely which I think is the simplest solution here and I'm happy with it, but would love it if someone could comment on my <aside> problem, just so I know for the future :)

Thanks!

Hi! I really struggled with svg images in this challenge and wasn't able to change the color to what it was in the design - change of fill on svg path didn't work, even when manually changed in the code. I think it's because of the color matrix in the file, but I couldn't find anything helpful in my search - either because I didn't find the right way to describe the problem or because I'm overcomplicating it :)

Either way, I'd be really grateful for any help on that :)

This seemed pretty simple to be honest, which makes me think I missed something? Please help :D

Hey everyone! I wanted to practise flex box here. To get a staggered position of the cards, I set min-width on the container and used align-self on the cards - it works but I wonder if there's a magical flex box property that I could've used instead?

Hi everyone, I would love some feedback on the following:

• I tried my best to make the images resize well for all screen sizes, so if anything looks off, please could you point it out to me
• Is there any way I could improve my code? I tried to make it as clean as I could, but I bet there's room for improvement.
• I used the new readme template - is there anything I should add or is there anything that is not necessary, looks a bit off, unprofessional?

And obviously, any other feedback is welcome!

Hi! Working on other challenges made me realise that I need to work on my JS skills quite a lot, so I decided to include it where I can.

I added some JS functionalities here (it's just a skeleton, really, but you can play with it in the console - more info in readme).

I would like to get some feedback on accessibility - I added custom focus styles and aria-labels to the buttons since they've got no text, but not sure how to handle the main component, should anything be added there?

If you spot any issues, let me know! Thanks :)

This was challenging but I learnt a lot!

• I had to do some thinking with the pricing cards and how the content is distributed on different screen widths. Decided to go with CSS grid template areas in the end and I'm wondering if there's another solution that's not too difficult?
• I would love any feedback about the countdown code, never done anything like this before!
• On the signup page, I decided to stick to one column layout up until 1440px screen width, I felt like going into two earlier made things look very tight - what do you think?
• For the form, I really wanted to try to make the custom dropdown as the bonus challenge suggested, although I realise that a native select dropdown would be more accessible (or just accessible, full stop). I found an article discussing how to make the markup I used accessible for keyboard and screen reader users, but I didn't want to use it without fully understanding what is going on - so I'm going to continue to study this and revisit this issue later on.
• This being said, I would appreciate any feedback regarding accessibility across the rest of the project.
• I've also never done form validation using vanilla JS, anything I could've done better?
• And finally, I decided to try and divide my sass files into components etc. to make it more reusable - but I did it based on some random articles I found online, so if you have a moment to look through the folder structure I'd be very grateful!

Regarding HTML issues in the report - I added role="list" to the pricing cards after reading about issues in webkit based browsers - that screen readers do not recognise lists as lists after list style is set to none.

And of course any other comments you might have are very welcome! Thank you :)

Update: I finally made the dropdown accessible to screen readers and keyboard users!

Hi everyone, added some extra features to this one, so I would really appreciate any feedback. First of all, I tried something slightly different to what I think is standard BEM methodology - I tried to avoid nesting elements in sass as much and personally found it a lot easier to work with - could I get some feedback of whether that is okay?

To challenge myself with JavaScript, I decided to make each card a link while keeping them accessible. I based this off of a CSS tricks article, but since there's more than one card, I had a few more issues to solve. Anyway, clicking on any point on the card will trigger a click on the main link (which is the card heading) - I added a link to google to the "Supervisor" card to show this. More clickable elements (anchor tags, buttons etc.) can be added to each card with class="clickable" and they won't trigger this behaviour. I did test it by adding an additional link, but didn't want to mess with the design.

Let me know what you think, any feedback is welcome, thanks!

Any feedback would be welcome! I initially included the illustration in img tags, then changed my mind and included them in css as background images, not sure which approach is better in this situation.

Also: can someone suggest why images are not showing up in the screenshot? I've included them in my repo, and I can see them when I open the deployed page in Vercel, not sure what's gone wrong between here and there! Thanks :)

I followed Jen Chan's tutorial for the most part here, however I tweaked a few things and added hero section styling for largest screens.