All solutions

This was my first project creating a fully interactive web app. My main goal was to practice using JS and to get a fully functioning app.

I would say my JS code is much better than the Accordion challenge I did a few months back but I still know I can improve my JS to minimize the amount of code I am writing.

This is my first attempt at integrating JS and HTML/CSS. I thought the layout looked pretty simple but it ended up taking me alot of time to place the box correctly, I finally got something that works but I am not 100% happy with how I implemented it as my design feels less responsive than it should be. What would be your suggestion for the best way to place the 2/3 images correctly.

As for my JS code I am disappointed with my writing of the code I attempted to use arrays and iterators to clean up the code but struggled to get my elements into arrays, because of this I ended up with VERY long bloated code with lots of unnessercary repeats.

I imagine the whole thing could be done using one function iterator through the elements. I would love to see an example of clean simple code to this problem so I can study it so on the next challenge I can write much better JS.

I am however happy that I have working code as this is my first attempt.

I completed this challenge to keep my CSS and HTML skills sharp. I struggled quite a lot with a few elements of this design, particularly the profile picture: I couldn't figure out the best solution to have it split over the 2 areas my first attempt was to use a overly complex css grid inside the card that overlaid the image over 2 rows, this method worked but seemed unnecessarily complex for such a simple task. On my second attempt I used position relative and a minus value for the top which again worked, I finally settled on just using a minus margin value as this seemed the simplest option. I had a similar problem with the background top and bottom circles. I finally got them positioned after fiddling around with the background-position values but it was very trial and error until it looked right.

My question to the community is what would the best practice way to position these elements be, would what I have done be acceptable or is there a standard way that would be expected.

A time challenge to see if I could complete a challenge in under an hour. I used this challenge to test my memory of CSS and HTML and tried to limit my use of google searches I positioned each element with the parent as much as possible which I believe is the more correct way to position elements. I found the design and layout relatively easy, I tried to use semantic HTML as much as possible.

Used this a challenge to test my speed to complete a project and to use media queries. Took as much advise from previous projects I have done, I tried to position elements with the parents as much as possible and resist using margin to position. Flexbox seemed like the simplest solution as the layout was relatively straight forward. I used a div to create the image overlay, this doesn't seem like the best way, Is there another way to do this?

I was using this as a chance to practice css functions like clamp to make the site as responsive as possible. I was also using variables for the colors to get used to using these more. I am still learning layout and how to create the best layout, this design was quite simple and didnt need much. There were a few instances I used flex box to create an inline row but these were relatively simple. What other ways would you do the layout?

I did struggle with the main image overlay but managed to come up with a solution that worked eventually. What would be the best way to go about doing the image overlay and does the rest of my code make sense?

I completed this project using my current knowledge. I felt flexbox was more appropriate that CSS grid. Is there a more professional way of completing this project?