done in about 1h30, which was my initial estimation.
What challenges did you encounter, and how did you overcome them?Automatic scaling of fonts using clamp() : didn't know about this !
Also handling the image on the desktop version was quite tricky : had to use a grid to do this, but would like to know another way to do it.
Best Solution: Using the clamp() function is a robust solution for responsive typography. For example, font-size: clamp(1rem, 2vw, 2rem); automatically scales the font size between a minimum of 1rem and a maximum of 2rem, with 2vw as the preferred size.
Best Solution: While using a grid is effective for many layouts, other techniques such as Flexbox or CSS Grid with media queries can also be used. For instance, Flexbox allows for responsive image alignment and distribution, while CSS Grid provides more control over complex layouts. Using object-fit properties like object-fit: cover; can also ensure images scale well within their containers.
this is my first time learning dom manipulation, i still confuse how to selecting multiple element with the same tag. so my first try is just make all the element i want to choose assign it with id.
What challenges did you encounter, and how did you overcome them?i still dont know how to implement the background image. maybe you guys can help for the html stucture or the styling.
What specific areas of your project would you like help with?n/a.
Well hopefully you was using this way to access html element
Let button = document.getElementbyId("button");
But, Now most of developers do not use this. Way to access html element.
Use this ( recommended)
Let button = document.querySelector(".button");
.button if Class other-wise # for id To access all element use this
Let p = document.querySelectorAll("p");
THAT CODE WILL BE ACCESS ON All P Tag Element
For more info kindly search on Google javascript queryselectors, For better understanding
I think that I am starting to understand the basic concepts of semantic html.
What challenges did you encounter, and how did you overcome them?The structure of both thanks-state and form-state is something that I got struggled with. I am not sure that the transition between the two states is efficient.
What specific areas of your project would you like help with?I think that the animations is something that I need to work with. I didn't know how to smoothly transition between the two states.
To use animation in short way or if u have no time. use this site click-here, read documents for more info, Inside the web :).
I encountered an isue with using flexbox in CSS. The main element wouldn't center vertically. After i added a "height" of 100vh to the body (where the display: flex is) it would center it vertically as it should.
First u flex use on element container for example
<div class= "card-container"> <div class= "card1"> </div> </div> " To center the card fist give width and height 100vw and 100vh to the card-container , Use flex css justify -content center == center item horizontilly and align-items center == center item vertically then ur card become on center :), grid and Flex are used on parent elements and they also have some child property search on w3school for better understandingsetting up webpack and all the webpack plugins. Took me days and a lot of tears
well use js and then first js framework like (React.js and Vue.js) and then u could learn webpack easily :)
