All solutions

Let me know how i can improve!

My first NextJS project. Did this more for learning than for correct implementation

My personal Portfolio, take a look and let me know what you think/ i should Improve on

My 12th submission

Please take a look and let me know if there's anything i should improve on

Interactive rating card!

If you have time please take a look and leave feedback!

Thanks

my first javascript project.

open to feedback! let me know where I can improve.

New submission!

Built the mobile responsive site first and then did the Desktop. made a huge difference while developing the site!

Here's my 7th project!

please leave any pointers/tips on any improvements I can make!

Decided to go back to Vanilla CSS and focus on getting better with it.

Learned a good bit, and solidified some skills

This challenge made me finally understand how to make a site responsive. Please leave feed back on how i can improve! thanks

[UPDATE - 1]

1. Fixed responsiveness with smaller screens

Came back and fixed all of the major issues with this project. Site is now responsive and built with accessibility in mind. Major improvement from the previous submission.

What i learned:

1. transition effects /w images and color
2. how to use span properly to align images and text together
3. Getting grid items to share the same row and col
4. how to properly set up fonts and sizes thanks to: https://wizardry-technique.webflow.io/

Overall was a good learning experience!

[UPDATE - 1]

1. switched to tailwind css
2. made it responsive and will work with any screen down to 375px
3. learned about rgba
4. gained a more nuanced understanding of when to use flex vs grid.
5. should be more in line, but will fix smaller aesthetics in next submission

[UPDATE -2]

1. fixed accessibility issues
2. focus now works for all hover effects
3. image overlay is now responsive and scales with screen
4. fixed minor aesthetic issues

[UPDATE -3]

1. all accesibility issues are now cleared
2. card now matches design

Not much to explain on this one, pretty simple compared to the other ones. overall fun if you time yourself and try to beat your score

Please let comments, anything i could do to get better would be great

[Update -1]

• Switched to tailwind
• Card now perfectly matches that of the Design
• all Accessibility issues have been handled
• Card is now fully responsive

Didn't get it perfect, but for the sake of learning I'll leave the "Fine Tuning" stuff for when i have a better grasps on everything. Overall I learned a lot compared to my previous project. If you have time please take a look , leave a comment on how i can improve. ty ty

What i learned from this project: what a CSS reset is and how awesome it is (https://www.joshwcomeau.com/css/custom-css-reset/) Using grid display and manipulating it making website responsive responsive images /w srcset How to better layout divs (much work still needed but still learned a lot)

overall i'm starting to understand everything more intuitively

[UPDATE -1] Came back to it and improved from my previous attempt

1. switched to TailwindCSS
2. site is now fully responsive
3. understanding how to manipulate display: Absolute

Will work on getting site matching the design perfectly for the next update

This is my first HTML CSS project. Since I'm new i focused more on building the actual page than getting accessibility figured out. This was done with HTML and vanilla CSS. The focus of this project was to get better with Grid elements

[UPDATE]

1. switched to Tailwind Css
2. made site responsive to mobile/smaller screen size
3. fixed spacing issue (still some minor things. will update in 3rd iteration)