All solutions

What are you most proud of, and what would you do differently next time?

The first one I made with zero help. Working with font awsome was a first for me. It worked out exactly as I intended it to be.

What are you most proud of, and what would you do differently next time?

I'm most proud of the overlay. It worked out exactly as I wanted it to.

What challenges did you encounter, and how did you overcome them?

It took me a lot of effort to get the image to fit the size I wanted. It turned out to be easy to fix when I set my width to 100%.

What specific areas of your project would you like help with?

I can't get the background image visible in the mobile state, but to be honest I don't see it in the designs provided by the project.

What are you most proud of, and what would you do differently next time?

I'm proud that I figured out how to make the overlay image in the active state.

What specific areas of your project would you like help with?

I can't get rid of the overflow of the overlay in the active state. I'm open for help there.

What challenges did you encounter, and how did you overcome them?

It took me some time to get the background images on the right place but when I figured out when and how to use the negative numbers it was easy to position them where I wanted them to be.

What specific areas of your project would you like help with?

Funny things happen with the background images when I resize the page to a smaller screen size. the balls in the background move to the other side on the x-axis and than disappear. I tried to give them other percentages in the @media query but without succes. Maybe I have to use px instead of %. Help, anyone?

What are you most proud of, and what would you do differently next time?

I learned to use transform: translateX on this one. I also learned to set my max-width to 'none' in the @media query to get the element to cover the complete width of the screen.

What specific areas of your project would you like help with?

I kept adding flexboxes on the right part of the design to get the right spacing between the elements. Is that the best way or is there a better way?

What are you most proud of, and what would you do differently next time?

I learned a lot programming this one. First I struggled with the background. I managed to get two background pictures in my body but to position them the right way took a lot of effort and help from my son. After that it went wel and I finished the rest farely quick. It looked the way I wanted for the big screen. Adding the @media queries it went wrong. I had a lot of overflow and none of the boxes fitted the screen and the text wouldn't center the screen. Finaly chatGPT gave the answer. I had to add a box-sizing: border-box to my stylesheet for the entire page. After that it all worked on the smaller screen. My text is centered, the boxes will size with the width of the screen and no more overflow. So big lesson learnt on this one! On to the next.

What are you most proud of, and what would you do differently next time?

I'm proud of the record breaking fast time I needed to code this one. All went well in about 2 hours.

What challenges did you encounter, and how did you overcome them?

Little to no challanges in this one. Perfect for my self confidence.

What are you most proud of, and what would you do differently next time?

I'm proud of how fast I'm learning HTML and CSS. I really need to learn more JavaScript. That is still like abracadabra to me.

What challenges did you encounter, and how did you overcome them?

I overcame the JavaScript challenge by asking my son for help. So I need more practice in that area. Does anyone know a good online coarse to study JS, besides w3schools?

What specific areas of your project would you like help with?

Q1: I have no clue in how to get the background image to fit the width of the page. As you can see it isn't wide enough now. Q2: I can't get the line between the questions the right color. I tried the next codes but it doesn't work: ''border-top: 1px solid rgb(250, 236, 250);'' this is how it now is by recommendation of chatGPT. I also tried: "border-top: 1px solid rgba(250, 236, 250, 0.1);" this didn't do anything. Changing rgb to hsl and hsla didn't work. I've put all the questions and answers in their own div and gave the div a border-bottom and color: didn't work.

What are you most proud of, and what would you do differently next time?

This one was easy and didn't took long to finish. I first styled the green card until I was happy. Then I copied it to the other cards, changed the border-color and that was it!

What challenges did you encounter, and how did you overcome them?

No specific challenges this time.

What are you most proud of, and what would you do differently next time?

I'm proud of the change of pictures from a large screen to a small screen.

What challenges did you encounter, and how did you overcome them?

It took me a lot of time to get the picture on the right size to fit the container. Again with some help of my son it turned out to be pretty easy.

What specific areas of your project would you like help with?

No specific help needed this time but comments for improvement are always welcome.

What are you most proud of, and what would you do differently next time?

I'm most proud of the buttons. Fist I coded a button but had trouble adding a link to the button so I decided it was better to make a button of the a-element. It worked out beautiful.

What challenges did you encounter, and how did you overcome them?

See previous question. It also to al lot of effort to get the div centered. I've been playing with width, margins and padding al lot. My son had the golden tip: use width: 100% It's that simple!

What specific areas of your project would you like help with?

I try to be 'clean' in my code. Try to use only what's needed. So my question: did I use any unnecessary code?