Thursday, July 23, 2015

Day 4: Inspect Element

So same setup as yesterday; I drove over to the home of one of my classmates and spent the entire day coding another webpage to learn the importance of CSS. Since yesterday whenever I saw him code he'd always have the "inspect element" feature opened up. The lectures describe this feature as being a very important part of debugging a webpage but I had a hard time wrapping my head around that.

The first time I heard about inspect elements was earlier in the year when I saw online someone using it to temporarily change the contents of a tag which were limited only to the computer and erased after refreshing the page. Since then I used it humorously by taking web content like this:


And converting the text into something like this:


To enjoy for the moment of laughter it bring before I hit refresh and everything goes back to normal. Oh and in case you couldn't tell I'm a fan of Battlestar Galactica. 

If there was another reason why inspect elements existed I figured it would be left for usage for someone smarter. 

So the day passed and I was coding the webpage for the day I found myself constantly running into errors and in need of help. The host was always happy to help me out whenever I asked for it but I knew that if I wanted to get any better I'd have to make more of an effort to solve these problems on my own. So I thought about about the inspect element feature and how I could use it to my advantage. So I opened it up and messed around with it for half an hour before it dawn on me how it works. The way it works is so easy and right there in front of me. 

Take a look of this image of the today's assignment with the inspect elements opened on the right: 


Using the highlight feature on the inspect element you can isolate a single object and get its exact specifications of its design (margin, padding, font-size, length, width, etc) and display it on the lower half. It will then let you make temporary revisions to your webpage (kind of like I did with my humor pages) and if those revisions are a better suit for the site then the new settings can be copied and pasted onto the .css file so temporary can become permanent. 

You ever had one of those moments when a switch gets flipped in your brain and all of a sudden everything makes a little more sense? That's what I experienced today and afterwards I was making code corrections on my own. We coded until 1pm and we took a break to walk over to a Greek restaurant for lunch. The day's assignment was completed by the late afternoon and I felt empowered and ready to do more. 

By then the host's wife returned home and we decided to go to the local library to continue with tomorrow's assignment. With a new understanding of the debugging I figured I could get much done in the span of two or three hours. Tomorrow's assignment is to replicate this page: 
 

which is the same as what we did today except we with more features and instructions to avoid divs in sections that have just one use of tags or elements. I told myself that I could at least get the header and sidebar completed by the end of the night. 

Then a few minutes after we started my brain crashed and I was left staring at the screen for half an hour not knowing what I am suppose to do. This occasionally happens when I work myself too long and I temporarily forget how to perform a task. And I was on such a roll. If anything good could come out of that it is that I'm actually taking this seriously. I have a habit of taking frequent breaks but ever since this bootcamp started the frequency has dropped and I loose myself to the coding assignments that have to be completed.

Finally the moment passed and I remembered everything that needed to be done. The library was closing at 9pm and I did all I could do for the last hour I had there. By the time we left I had this much complete: 


It was about half of what I was hoping to accomplish for tomorrow's task. Every Friday is a test and I'm hoping I could give myself enough time tomorrow to complete it. 

Nothing else can be done for the night so it's off to bed.

No comments:

Post a Comment