HTML and CSS Nightmare

“Create a website for _____” is one of the most dreaded statements I hear to this day. I must first say that I am an absolute rookie at HTML and CSS. The reason for this is because I have never fully understood HTML development throughout all these years. I have performed some tutorials years ago when I first started tinkering with website creation back in high school. However, I never understood how any of the tags would work together. Even when using a website editor such as Dreamweaver, I could not create a pleasant looking website. I would always run into weird spacing issues, misaligned images, or incorrect table formats. Another great source of confusion was how “hackable” HTML was to create content, such as using a table element to fake a double column article. I felt like there was no standard on how good HTML should be written to create a desired layout.

Next was the introduction of CSS files to modify the design of a website and I absolutely lost my mind on how anything works correctly in HTML. While I understood that CSS were suppose to help streamline website development process by separating layout modifiers from the content to another file, I could not comprehend why the tutorials would not just introduce CSS early on to the web page creation process. The WebPages I created following the tutorials become chaotic after I introduce a CSS file to style the website because the element attributes in the HTML and CSS files were not playing well with each other. The next frustration was working with an existing website and having to modify its CSS. I remember changing the CSS to a different layout and then the entire website would “blow up” and have all the elements in the strangest places. What was even worse was that I could not make heads or tails what the DIV and SPAN tags were in the HTML files. I think I’ve been traumatized by website development at this point.

Fast forward to today where I am learning HTML and CSS again for my software engineering class. Fortunately, learning HTML and CSS this time around was a much smoother process because I can actually watch someone (my professor) create a website to the exact specifications. I also found the tutorials this time to be much more readable and comprehensible compared to the tutorials years ago. To test how well I knew HTML and CSS from this new knowledge, I will talk about 3 WODs for this week.

WOD 1 Create “A history of browsers” website

The first WOD (link) involves creating a simple website about a history of browsers. We had to create a table of contents and several sections using headings and paragraphs. In addition, we had to create four hyperlinks to other websites from terms within the four sections. On my first try of this WOD, I decided to take my time to familiarize myself with HTML again. I spent most of my time reading HTML tutorials on how to create the needed layout for the WOD. One issue that came up with this WOD was that I did not know how to create a list for the table of contents. I also did not know how to create links from the table of contents that link to specific portions of the website. After spending around 10 minutes searching for this information, I decided to give up and look at my professor’s video for that specific portion of the WOD. I found out that it involved using an “id” tag to be able to mark specific portions of the website to allow linking. Safe to say, I did not finish this WOD on my first try as I could not perform this WOD on my own.

On my second try of this WOD, I was able to finish the work within the time limit. I finished this WOD at around 16 minutes. However, I was still struggling in remembering all of the HTML tags that I can use. To remedy this problem, I decided to create a small list of common HTML tags to remind me what tags do what.

WOD 2 Use CSS to style the website

The second WOD (link) involves using CSS to style the website I just created. Before I started this WOD, I went back to the CSS tutorials and created a list of tags and attributes I needed to complete the WOD. With this list, I attempted my first try and finished at around 11 minutes. Surprisingly, I did not encounter much difficulty because I did not have to scramble around with the tutorials looking for the correct tags. Attempting a second try got my time down to 7 minutes.

WOD 3 Continue using CSS to change the layout of the site

The third WOD (link) involves using the same CSS file to change the layout of the site. Again, I used my list of tags and attributes to assist me through this WOD. The most difficult portion of this WOD came from trying to align my paragraphs correctly to create a 3 column article because my rightmost column was aligned to the right side of the browser which caused a wide gap between columns. I remedied this problem by making the attribute for this column to be floating left instead of right. With this problem solved, my first attempt netted me a time of around 15 minutes. Knowing the answers to the problems I would encounter, I attempted the WOD again and got my time down to 8 minutes.

Conclusion

I think after all these years of not knowing HTML and CSS; I can finally say I actually know what I am doing when creating websites. I have to applaud my professor for creating a quick and simple tutorial on both HTML and CSS that actually made learning the material bearable. Next week my class will be covering CSS frameworks and I can’t wait to start on it.

The nightmare of HTML. Source: http://xkcd.com/1144/

Advertisements