Simple pop-up menu documentation
This is a documentation of my project simple pop-up menu.
This was a mockup project I found from frontendmentor.io. This is the specification link: pop-up menu project.
This project took quite long because it had many interruptions by weekend vacation, some birthday rest day, writing a long article, and keeping up with the Philippine elections.
Major learnings I reinforced from this project is document manipulation and event handling. I quite messed up the code just for the coloring of the buttons. I might have to explore concise methods, particularly CSS pseudo-classes to easily style button states.
I finished the basic pop-up by May 3. Then I had to make it responsive. I also added some functionalities (not in the specs) like scrolling trigger which was quite easy. Basically, a scroll will have to trigger my pop-up.
One little problem I encountered on May 7 was that the body by default has an 8-px margin. It was a pesky property that I had to spend some hours just to figure out why my elements were not properly centered.
I did not encounter this problem in building my website because I used a pre-coded CSS reset to remove such properties. However, I did not use that reset for this project. Therefore, I had the opportunity to really dive into the mini-details. After quite some experimentation, I found that I had to zero the body margin. Then, I confirmed from w3schools that the body tag indeed has a troublesome 8-px margin.
Finally, I added a simple close button, finishing it on May 10.