HTML Dog: Initial Thoughts
I’ve taken some courses on Lynda.com on both HTML and CSS, and I enjoyed learning more about both of these languages with HTML Dog. I took both the intermediate HTML and CSS courses, and found them easy to follow along with. I appreciated the occasional visual, and the succinct explanation throughout. Some content I had already come across before, and so I could compare it to content I had already seen. I never questioned its accuracy, although there was some detail to be desired.
Some of the sectioning elements that were introduced in HTML5 have very narrow distinctions, and I believe require thorough explanation and examples. Because there is naturally some subjectivity in selecting the appropriate semantic element, for example, having a clear understanding to properly identify the correct usage case is critical. For a survey article on HTML5’s sectioning elements, I would give it much praise; for a budding HTML enthusiast, however, I think it serves more as a starting point. The W3C’s specification for the nav tag notes that links are to point to pages within the site, and not to external pages; although an admittedly small detail, I think a well-trained web developer should be aware of this detail, although HTML Dog did not mention that.
Prior to taking these courses on HTML Dog, I had only learned about HTML and CSS via instructional videos, as I had taken courses from Lynda.com. I found HTML 5’s content very easy to navigate at my own pace. Occasionally I would have liked a video to give me a demo, or a more thorough explanation, but ultimately I found this format quite enjoyable.
Surprises
One of the most surprising things I discovered was CSS’s pseudo-element. I had just assumed that CSS would focus exclusively on styling and would shy away from holding actual content. I suppose this is analogous to in-line styling provided in HTML. While neat, I’m thinking this is something that I should use sparingly (although I did use it in some demo code below); I’ll let HTML do its job, and use pseudo-classes if I want to use a fancy sounding selector.
I consider myself a novice in both HTML and CSS, and I love discovering new things about both of these languages, however big or small. Sometimes features that are rarely used can be the most exciting. I found HTML’s bi-directional tag to be such a hidden-gem. This tag has a direction attribute which controls the way text is displayed: left to right or right to left. This is to support languages in which text is conventionally read one way over the other. I’m assuming you can type it one way, and then display it another way–neat!
My overall experience was quite positive with HTML Dog, and although I don’t think it can take you from complete novice to an experienced web developer, I do think it can help get you started, and even supplement some higher-level knowledge that you might miss out on elsewhere. I think the best tool to learn these languages is a toolbox, and HTML Dog fits quite nicely in that box.
From Theory to Practice
To put into practice some of what I learned, I decided to create a sample page. You’ll find a screenshot of it, along with the HTML and CSS code that I wrote in the process.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="a sample page" content="a page with sample contents">
<title>Sample Page</title>
</head>
<body>
<header>
<div class="content-wrap">
A Sample Page
</div>
</header>
<main>
This sample page is meant to showcase some features of HTML and CSS.
</main>
<section>
<h1>HTML</h1>
HTML is a great tool that allows the enconding of information in both a syntactic and semantic way.
HTML 5 supports some great new semantic elements, such as:
<ul>
<li>article</li>
<li>aisde</li>
<li>nav</li>
<li>and many more!</li>
</ul>
<h1>CSS</h1>
CSS allows for presentational control. Style is the name of the game.
</section>
<aside>
<blockquote>semantic information is critical to assistive technologies.
For example, a screen reader will query the browser for semantic
information and use that information to present the document or
application in synthetic speech." <br>--W3C
</blockquote>
</aside>
<footer>
<h2>Resources</h2>
<ul>
<li>W3C</li>
<li>WAI-ARIA</li>
</ul>
</footer>
</body>
</html>header {
background-color: grey;
width: 100%;
height: 80px;
margin: auto;
text-align: center;
background-color: white;
}
.content-wrap {
margin: auto;
border: 0px;
padding: 16px;
width: 50%;
color: orange;
font-size: 30px;
}
main {
padding: 30px 0px;
}
body {
margin: 0;
font-size: 16px;
background-color: grey;
}
blockquote:before{
content: open-quote;
font-size: 100px;
float: left;
}
blockquote:first-letter {
font-size: 100px;
color: orange;
}
blockquote {
margin: 0px;
padding: 15% 15%;
border: 0px;
line-height: 16px;
background-color: white;
}
First off, nice webpage (and nice CSS styling)
It’s really interesting to see how you explored the different kind of tags in html! The bi-directional tag sounds very useful under certain circumstance. Also I thought it was very interesting to hear you saying the ” pseudo-element” of CSS — I never thought about it until seeing you writing about it!
Nice use of CSS for your blockquote John! You wrote “I found HTML Dog’s content very easy to navigate at my own pace,” which I agree with and is why I assigned this instead of a video on Lynda.com. They are great deep dives, but sometimes you don’t want or need to spend 7 hours learning something…