The CSS part is turning out to be way easier than the html part. Maybe because most of it is just styling choices but i learnt a lot from this. I learnt that the browsers by default have their own margins so you first have to universally erase it. Then i learnt about the “box-sizing: border box” thing which is used so that the browser doesn’t increase the size of the box when padding is added. Then i learnt that we use the flex display to place the box perfectly in the centre. Then i experimented with the newly found units like rem, vh and px. Then i followed the tutorial to make the screen in the screenshot which is way better than what only html had to offer. Then i used AI to explain to me why the code was written this way and all the thoughts behind the decisions made. After that i remade everything on my own to see if i could think the way i am supposed to.

After that i have also made the other screens like the question page, result page, the answer containers and a lot more. I learnt to add transition effect for hovering and also learnt how to adjust the media according to the pixels available which are supposed to be used but according to the tutorial we will see them only after we move on to JS so i am looking forward to it. The parts i have not seen are not really solidified into my memory yet as i have not seen the results my inputs are producing so i will re write that part myself after i complete the JS part so that i am able to decide what the size of everything should be on my own as i will be able to visualise the size. I have properly done the first screen tho. Next devlog after completing the JS part. :0

EDIT: Just realised the vids are not working anymore so added a SS