All solutions

I'm very proud of finally making this challenge. This is one of the hardest CSS-only challenges in this website. I added some JS for interactivity, also added some animations to be a little more fancy.This looks amazing. If you've any doubts about what I did here (or any recommendations on how to simplify the code) feel free to write a comment!

Simple project. I managed to learn that you can change the style of child elements when you hover parent elements. I guess that a project is neveer too simple.

This one was pretty simple. Nonetheless it's good to go back to basics once in a while.

I had a lot of fun with this one. Weirdly enought this is the first time I upload anything with JS in it. I made sure to have good documentation on the whole of project. The HTML is semantic, the CSS responsive, the JS concise and commented. There's even an easter egg for those that are interested in the actual code...

Improved readability compared to the previous solution. Added a comprehensive documentation for this short project since I'm practicing documentation writing.

This was really hard to refactor. The original HTML was unreadable, the responsiveness of the website on the original solution was thrash, there was no documentation about the project on my original README.md. I made the HTML way more readable, deleted classes that were not used, simplified the CSS where it seemed fit, added functional media queries, improved responsiveness a lot, and made an extensive documentation about the whole of the project (This documentation can be seen in the README.md of the github repo).

I was not that satisfied with the original solution to this problem. The background img didn't actually stay at the center when the vh changed. In this new solution I used a combination of CSS Functions to make sure that no matter the vh or vw the background stays where it belongs. I also added a little hover animation for the buttons (In my previous solution, they weren't even buttons).

There was not a lot to improve from my original solution. Still, I managed to simplify the code a little. CSS Grid is really a godsend when one is faced with this complex layouts that have objects with multiple Aspect Ratios.

Fixed some bugs that were left behind on the previous solution. Doing social links is more complicated than it seems. If anyone knows a simpler way to do these (without sacrificing looks, performance, or readability) I'll be glad to know.

This new solution adds animations and simplifies the CSS.

This is a good example to show that even when the layout looks grid-like, as long as the Aspect Ratio of the boxes stays the same, it's still easier to make a 2D layout using flexbox instead of grid. I simplified the code a lot with this new solution.

I really like this one. It's weird to revisit code you wrote so long ago.

Improved my solution a little. Made it more readable, made the code shorter.

Added a shadow to this new solution. Simplified the code for the sake of simplicity and readability. I believe the accomplishment lies in the readability of the code, more than the project itself.

I'm revisiting my projects to make them simpler. This one is the first project I made using CSS Grid. Grid its useful for the weird combination of needing a square on top of an image that adapts to the size of the image. On the other parts of the layour I used CSS flexbox (Since I believe it's way simpler to use). I always use CSS variables since they improve readability a lot and make maintaining CSS code way simpler.

I'm revisiting my old projects with the new knowledge I have acquired. I just wanted to make this project fully responsive, add some animations and experiment with a new naming convention for CSS that I have been developing.

There are some problems with accessibility and with GitHub loading the images properly. I intend to fix these problems in the future.

The responsiveness on this one was hard to get, but I did in the end. I will refactor this project in the future since there is a lot of space for improvement.

This one was complicated, but I was able to pull it off. If you have any advice on how to improve the code, please let me know.

I'm pretty happy with the responsiveness of this project. If you think there's a simpler way to achieve anything on the code, please let me know! I'm really focused on making my code simpler.

The logos work but I'm almost certain that there is an easier way to make them. If you know about one, please let me know.