Diving Deeper into HTML: Day 4


Today I decided to dig a bit deeper into HTML. To do this I logged into my Lynda.com subscription that I get access to from my university. I began going through the Become a Full Stack Web Developer Learning Path starting with the HTML Essentials Training Course. If you are interested this course is taught by James Williamson.

I must admit in the past, I have tried to learn many things through Lynda.com to no success. Contrary to what I once thought about this website, I can no longer blame Lynda.com as to why I found the material hard to complete. Now I know that the barrier I experienced was because I really didn’t have a plan or purpose to why I was learning the material at hand. Now that I have a definite goal, I find a new sense of interest in Lynda.com course material. It is proving to be beneficial in helping to clarify assumptions I made unknowingly, and to bridge what I didn’t know I didn’t know.

I am still working through FreeCodeCamp.org, because this site provides a structure and curriculum that will direct me along my way. But I cannot expect FreeCodeCamp to provide me with individual study that I need to build my code proficiency. I must rely on books and additional hour of study.

Based on my post from Day 5, I know that I must learn vertical and now horizontal. I pretty must had this in the back of my mind, but there is always the temptation to move as quickly as possible through the material. Listening to the welcoming videos of Chris Lee at the Launch school has really enlightened me on what I need to focus to get the best results possible. I highly recommend if you have not looked into the launch school yet, you should.

I plan on taking my time and working through both programs over the next year. I anticipate that by slowing down, building a strong foundation will help me progress through the material much faster than trying to bulldoze through the material just to say that I am “finished”.

I am not trying to become familiar with code, I want this to be my career and I want to be a really good coder and “focusing on the fundamentals”, as Chris Lee states, “is key”.

Key takeaways

Have a good HTML Reference on hand, start learning off line, and become familiar when I am not actively coding to build my skill. At this point, I am just trying to learn which elements and attributes are available for which elements and their functionality, and better understand HTML in general.

  • I have bookmarked the following resources:
    • The Lynda essentials training does not cover all the elements and attributes of HTML. I doubt any training site does. This means that I will need to refer to the W3C standards or the WHATWG standards and study off line.
    • The Web Platform is an open source website, general web development, that offers a much better online document for authoring the web.
    • Another go-to reference that I will be adding to my list of resources is the Mozilla Developer Network.
    • I also installed an html app to my smartphone which you can google and one that best fits you your needs. If I come across on that I like, I’ll be sure to update and share.
  • I was finding myself struggling because I really didn’t understand the fundamental structure of an HTML document when working on my first FreeCodeCamp project. This definitely slowed me down and caused me to keep restarting my project’s code within the first lines.
    • having a visual representation of an HTML document is paramount to learning the rules.
  • I need to spend time inspecting HTML code of various websites, specifically websites I frequent often. I am interested in becoming familiar with the basic structure of a website.
    • To do this, I will be using a website inspection tools for Chrome, called Webkit Inspector. Alternative browser tools include:
      • Firebug for Firefox
      • Developer tools for Internet Explorer
    • I highly recommend visiting this HTML Essentials Training course on Lynda. It really helped me clarify and understand the basic HTML structure.
      • Document type <!Doctype HTML>
      • Opening HTML tags <html>
        • Opening Heading Tag <head>
          • Meta Character <meta charset=”utf-8″>
          • Meta Description <meta description=”description”>
          • Meta Content <meta content=”A page for learning Full Stack Development”>
          • Title <title>My Full Stack Development Journey</title>
          • css, etc.
        • Closing Heading Tag </head>
        • Opening Body Tag consists of the visual elements of page <body>
          • Heading <h1>The main page content appears inside the body tag. HTML contains several elements that allow you to properly structure and format your content, which we will cover letter.</h1>
          • <p>page paragraph</p>
        • Closing Body Tag </body>
      • Closing HTML tag </html>

This is the basic structure to use and get started in any page design.

  • Review meta tag attributes on my own.
  • Content Models help user agents know what is the type of content expected inside of an element, and controls syntax rules, such as element nesting (7 kinds of content Venn Diagram). This is something that I noticed was a barrier to my progress on the project.

I am going to take the next day or so and review all the content that I discussed and incorporate them into my daily review process as I build my proficiency.

Topics include:

  • Why is HTML important?
  • Exploring an HTML document
  • Formatting content
  • Displaying images
  • Using nav, article, and div elements
  • Linking to pages and downloadable content
  • Creating lists
  • Controlling styling (fonts, colors, and more)
  • Writing basic scripts

Resource:

Code Editors

Comments

comments