@Rezz

Well it has been a while since the last devlog. I got a new device to work on. Anyways now I completed the javascript part of the quiz. It was very complicated as I am a beginner and I am sure I won’t be able to replicate most of it if I tried blindly. Still I am going to try because why not? This is the point of the event anyway. A lot of logic was written a lot of things were used which I could not understand. I ran into a lot of bugs because my dumb brain thought it was a good idea to use my own variables instead of following the tutorial. Try out different things instead of doing what the tutorial said. Now I have made the commit and am going to break it all up and try to see how much I understood. Main goal will be to at least redo the UI and use my own themes and give it my touch through CSS and then I will change the questions and answers to a different topic then I will try to break the javascript and fix it. This is a bad idea but praise git.

EDIT:Just realised videos are not working in develops so replaced it.

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

So this is the first time i have ever tried html. My mistake was i jumped directly into projects without any basic learning of HTML because i knew basic coding already. But damn was i wrong, i had to use AI to help me understand each and every command used by the tutorial. Took me an hour just to follow along the tutorial while pausing and asking AI to explain what just happened. Then I tried to erase the code and remake it myself. After a full afternoon of trying i have finally understood the concept and what a developer is supposed to think step by step and i created the entire HTML part alone without the help of anything else and am finally confident i can remake this. Though i am yet to explore all that is possible as this is a very simple project. Gonna move on to CSS next and see what is it about. Hopefully I don’t spend as much time on it as i did with HTML with a code this small. Next devlog after completing the CSS portion.

PS:It’s kinda embarrassing that i only have this to show after four hours of work(it was way more than four hours as this doesn’t count me searching the internet and asking AI for explanations). I uploaded it because the resources said that i should upload once every 3 or 4 hours and i had finally completed the html part so i thought this is the time.