There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.
Learn what HTML is and what it is used for in Web Development
The third lesson asks the following questions:
- What is HTML?
- What are HTML elements?
- How do we use CodePen?
- What are tags?
- So what are divs, headers, paragraphs and spans exactly?
- How can I inspect an existing web page?
What is HTML?
HTML is an acronym for Hyper Text Markup Language. Its one of the languages used for web development, and was the first language created to accommodate visual web browsers when they were invented in the 1990s. HTML isn’t a proper “programming language” because it doesn’t have commands to cause a computer to perform computation or processing or other tasks. Its a “markup language” which means that its primary function is to put data (be it graphics or text) onscreen for viewers to see.
What are HTML elements?
HTML is comprised of elements. Elements are essentially containers with content on a web page. There are different types of elements/containers for different types of content. Some elements contain text. Some contain images, and others might even contain other containers.
This segment of the pre-course focuses on the following four display elements: division elements (divs), headers, paragraphs, and spans.
How do we use CodePen?
At Lambda School, HTML code is written using a sandbox coding environment called CodePen. HTML can be written directly in the HTML section of CodePen and the results of that code can be viewed onscreen, in real-time.
This is quite a different experience from what I’ve had at work. Generally, I draft pages for our software using Expression Web, and then save my drafts and open them in a browser so I can view them in the same way that a client would. Its a different workflow from seeing changes happen live, like in a collaborative Google doc.
As per the Lambda School text:
CodePen also allows us to leave out a couple of critical elements: the html, head, and body elements. These are important to understand when we start writing HTML code in our text editors, but for now, we can ignore them, because CodePen handles them automatically.
What are tags?
HTML tags are keywords on a web page that are used when writing HTML code. Some coding languages have commands, and tags are essentially the markup language equivalent of commands. They tell the browser how to display web page items.
Like commands in other languages, tags are essentially reserved words. They are enclosed in brackets, to set them apart from common uses of those same words. For example, “p” is just a letter, but <p> is an HTML tag which means paragraph, and is used as a prompt to tell the browser to display text.
Tags encompass the text or other item they’re meant to display and must be opened and closed. Opening a tag is done by typing the tag along with its opening and closing bracket in our code: <p>, in our example above. Closing a tag is done in the same way, with a leading forward slash after the opening bracket, like this: </p>. Text inside of the paragraph command is what’s displayed by invoking the command. For example:
<p>This is an example of a paragraph, even though its only one sentence.</p>
Most tags need to be closed after they’re opened, so they’re generally written in pairs with an opening and closing tag. There are, apparently, a few exceptions to this rule in which only an opening tag is needed.
So what are divs, headers, paragraphs, and spans exactly?
Divs, headers, paragraphs and spans are HTML tags which are meant to display items on a web page. Pararaphs, headers and spans deal with text. Divs are generic containers used to group HTML elements together.
1. Paragraphs are opened and closed with the <p> and </p> tags, respectively. They’re used to display text and by default will do so using a new line, instead of continuing from (or appending) to an existing line.
<p>This is an example of a "paragraph".</p>
2. Spans are generic text containers. They don’t display text via a new line, like a paragraph, but instead continue from the last point that something was displayed. They’re used to “style” text in a web page, and often inside of other text. I think that this means that they’re used to display text that’s bold, or italicized or underlined, or a different font or size or color from the text around it.
<p>This paragraph contains a <span>very important phrase</span> that should be styled in some way</p>
3. Header elements (not to be confused with the /head section at the top of a web page) basically denote the importance of their enclosed text by altering the size and boldness of that text. Think of them as section titles in a textbook or newspaper article.
There are 6 header sizes, denoted as <h1> – <h6> with the largest being <h1> and the smallest being <h6>.
<h1>This is the "most important" headline.</h1> <h3>This headline is less important, or is maybe a section header.</h3> <h6>This is the "least important" headline.</h6>
4. Div tags are used to group other tags together, often so they can be formatted all at once by another technology called CSS, or Cascading Style Sheets. So, they’re essentially a tag used for convenience by people writing web pages. So this means that multiple paragraphs, spans, or whatever else can be treated as a single unit and worked on all at once, without having to duplicate effort or code for each one, individually.
In the below example, I had to misspell “div” as “d1v” because my browser is actually rendering my sample text as code and treating what I wrote as a real div, so none of the tags (the <div> and <p> tags) are showing up, but the text they encapsulate is. Le sigh…
<d1v><p>This "paragraph" is about divs.</p> <p>This paragraph is about divs too. Its a real paragraph since it has more than one sentence.</p> <p>All three of these "paragraphs" are grouped together by a div, so if I ever learn CSS, I can style them simultaneously.</p> </d1v>
How can I inspect an existing web page?
As per the Lambda School text:
When learning HTML, it can be useful to investigate existing web pages. There is a tool built into every browser called the inspector that allows us to do this. Just right-click any element on a webpage and select “inspect” or “inspect element”, depending on the browser. This will pop up a sidebar that allows you to explore all the HTML on the web page. It can be overwhelming for a new developer, but it is a good way to get a taste of what goes into building a complex, production web page.
I’ve done this in the past, and while most web pages do show HTML and CSS, some sites, like YouTube, show stuff that I can’t follow at the moment. It might just be a proliferation of HTML though.
This is on my reading list for before the course starts, although at the rate I’m going, I don’t know if I’ll finish blogging all of this before class starts in a few weeks:
REDO FROM START 
One thought on “Lambda School Pre-Course 3: Learn what HTML is and what it is used for in Web Development”