Day 11 - HTML Exercises, Quiz and a New Project!

Today I had the whole day to focus on my studies. I started my day nice and early with a nice cup of coffee and ended it with a feeling of confidence!

At 8am I woke up and with no time to waste I dove straight into where I left off in w3schools HTML exercises. Following the same studying routine I would open an exercise read the documentation take notes then solve the problem. I believe the mental break I took yesterday worked wonders because I was more focus than ever putting out 6 pages of notes while reading HTML documentations top to bottom.

I would like to reiterate and say my first time around learning HTML through code camp youtube tutorial I was only thought the basics. I know now you truly don’t know what a language can do until you read the documentations. Now that I have completed all w3school’s HTML exercises I still don’t feel like a pro but I do feel like I got a good grasp on things and what tags are used for what.

I didn’t immediately feel the confidence I just spoke about. I felt it while/after I took w3school’s HTML quiz. The quiz was a little challenging towards the end (I don’t know if that means I am understanding or the quiz was too easy) but I was able to pass with a 95% correct rate out of 40 questions. I wasn’t too confident in half of the test but I trusted myself and when the score was presented my confidence and motivation levels rose to the roof.

What I did next in my day wasn’t really coding study related. I have a discord server for me and my two friends and they sometimes ask me to look at my code so they can reference. I love helping people and when I can help on a topic I am learning I know I am understanding it enough to talk fluently about it. So as a little motivation for me and my friends I hooked up a discord webhook to one of our channels that way we can send updates about our projects and others can view it's progress

After I completed my content review of HTML and tested my new discord feature it was time to make a project again. No tutorials, just my memory and ability to google. As stated before I like to challenge myself when doing projects and work on a topic I don't know too well. For this project I chose to continue my HTML review by making a Periodic Table based off an image from google using my knowledge of tags that make up a table. I started off having to check documentation once or twice but after I got the hang of it all pretty fast. The hardest part was probably the planning part and how to give correct class names to be as efficient as possible. I started by styling one cell giving it all the general stylings the other cells will have that way when I need to add more cells they will each have the general layout using the same class names.

Once all the general styling were sorted out, it was now time to fill in the data. This was probably the longest part and most tedious since it was a lot of cells and content with in the cells. After this eye twitching part of the project I started to add the color for each cell. While doing this I also kept in mind the ability to change colors easily. I did this by giving class names matching their box color, that way if someone needs to change a color for some reason they will be able to switch with ease.

Here's an image of how each cell was constructed in HTML

As you can see it has been a long day but I was determined to finish the project. So next I decided to to work on the second table. Since most of the hard work was laid out already it was a few minutes until I had all the cells set. I ran into a few headaches when trying to position the outside content/text but after a few trial and errors with positioning properties I was able to replicate to satisfactory.

Moving on next up was the ledger, which drove me nuts as well trying to position long sentences next to their colored div. I was quickly able to visualize a solution with in CSS using Google Dev Tools.

Here is a snippet of how I formatted my ledger in HTML

Finally the project was looking beautiful and I all that was left was the numbers sitting outside the table. I kept this part in mind during the begin when I was setting up my cells. Using the main table as an example, this table is actually a 8x19 table and I have created classes specifically for the cells that has to be "invisible" by removing borders and using a color that matches the background. Same concept for the second table. I then accessed what cells needed to have a number and with a few CSS and HTML class stylings I was able to complete this part pretty easily.

I really loved the way this project came out and I was not expecting for me to produce something that would have my satisfactory levels high. I had a lot of fun using table properties in HTML and it is something I will not be shy about anymore. I will most likely finish this project up tomorrow morning as a warm up before moving on to my next project which I already have in mind!

Stay Tuned...