All solutions

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

During this challenge I found a way to be more productive and learn at a faster pace which works for me. Feeling Proud.

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

Challenges I faced :

• Didn't know how to import form data to JS object
• Regular expression for validating
• Tried using third party library(validator.js) for validation in Vanilla JS

How did I overcame them?

• Learned a lot from the FreeCodeCamp's article about form
• I did play around with Regular Expression but I just copy pasted the RegEx for email. So Now I'm going to learn more about RegEx.
• I tried hard using validator.js but at the end didn't used it. So if anyone have any helpful resources please do share.

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

• Anything which will make the code better.
• When the email is invalid the color of the text remains red when I click on the form to reenter the email.
• I feel like I have traverse many html nodes in the code. Is it normal to bring so many nodes based on the size of the challenge.
• Some useful resources for using validator.js or any other third party library for validation in Vanilla JS.

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

• I need help with the image in the component. You can compare the image in my attempt to the solution. The image is somehow cropped and there's some space left in the desktop view at the bottom. It's most likely due to image.
• Any suggestions would be appreciated on making the javascript code more efficient?

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

Maybe Next time I wanna make it more accessible. I don't know much about accessibility yet.

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

• I got stuck in setting the quotes behind the content in the first box. I used pseudo elements such as ::before and ::after but couldn't do it then saw some solutions of others. It was easy, I was just making it difficult. At the end I used background-image without pseudo element. Next time, first I will try to do these types of things without ::before and ::after.
• One more there was some extra space in the bottom div but i was able to overcome it by asking in the discord. (Setting grid-template-rows to auto)

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

• I always get confused what to name the classes which are same like multiple boxes or items. For this project I have written item-one, item-two, .... Is it alright to use these class names.
• Next there's this box-shadow I never get it right same as the design. If anyone have some tips on this please do share.

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

Using grid layout for the first time was difficult but eventually I got the hang of it. I asked in the discord server.

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

How to make the width of paragraph of the heading class smaller in screen sizes greater than 1024px?

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

This time around I build the component for mobile and then changed it for desktop using media query. Maybe next I'll try to add support most types of device sizes.

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

I was coding the component for mobile first approach. So took me some time to understand what I have to do. It was way different than what I am used to. Just kept patience and tried to using different methods. Asked some questions in the discord community.

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

If someone could point out better methods than I used that would be helpful.

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

• Even though I faced many problems but I didn't give up and completed the project. I'm proud to complete this.

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

• For me the toughest part was how to let the header image take the full width for the mobile screen. For the image to take full width it had to neglect the padding of the container. So to overcome this I used the negative margin and it solved the problem.

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

• I'll will be happy if someone could tell different method other than using negative margin to fit the image on the top completely taking the width of the container.

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

this time I was able to center the paragraph tag inside a container using line height.

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

None

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

Any advice and improvement in the code will help.

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

I use the local fonts next time and use the flexbox for the card description.

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

I had difficult in the centering the card and changing the box-shadow size when hovered over the card

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

I guess the link in the card description is not clickable as the whole card is covered by the anchor tag of the h2 tag using ::after. So need help with this.

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

• Next time instead of writing style in the head. I will link the CSS style file in the head.

• Furthermore, I'll try to use different method for placing the QR code box. For now, I have used flexbox but I want to try other methods such as using position property etc.

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

I made many newbie mistakes such as forgot to

• close the quotation mark
• set the height of the div element and had issues with image not showing up.

I overcame them using AI tools such as ChatGPT and Phind.

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

• Initially for setting the position of the container-card box I thought to set the width and height to auto.
• Later I realized that when set auto, the element get equal spacing from left and right but it can only be applied to width. It doesn't work on height.
• So is there any way to use this method (width: auto and some other properties) to align the box in the center of the body.