Module 2: HTML & CSS Basics Part 1

Congratulations on making it this far! It's time to finally start coding. We'll begin our foray with the web's first two building blocks: HTML and CSS.

Module 2 Deliverable

This module does not have a deliverable that you will place in your prework folder. It is, however, important that you complete all of the codealongs outlined in the module.

What Is HTML?

HTML (hypertext markup language) is one of the three cornerstone languages used on every webpage in existence. While the syntax might seem daunting at first, by the end of the course, you will find it simple, straightforward, and completely painless.

HTML handles the basic markup of a page. This means that HTML is responsible for the simplest aspects of a website, including the following:

  • What text elements are on the page?

  • What images are on the page?

  • In what order will the elements appear?

  • Which text elements are the primary headings? Which are the secondary headings?

To draw a distinction, HTML won't be responsible for things like the following:

  • fanciful colors and layouts

  • snazzy effects on the page

  • complex user interactivity

HTML represents the bare skeleton of a webpage. CSS and JS are then used to add the fancy things like visual aesthetics, effects, and event-handling (such as form submissions and database interactions).

The HTML Document

The best way to learn coding concepts is to actually code, so let's roll up our sleeves and get started! You'll install some coding tools in Module 4, but for the next two modules, you'll complete some codealongs to help you get up and running.

Note: For the codealongs in this module and the next, click on the blue Launch button to launch the coding environment. If you need any support when working on these codealongs, please contact our team of tutors and request a tutor session. See the note at the end of this module for more details.

Let's begin by taking a look at the HTML document in this codealong:


Tag, You're It

Every HTML document is made up of various pieces of content, known as HTML elements, which are wrapped in tags. These tags are most often represented by angle brackets (< tag >) with an associated tag name contained inside. We then insert the content between an opening and a closing tag so that our browser understands how to treat the content.

For instance, let's say we wanted HTML to style the following phrase in bold: "Coding Rocks!"

HTML Code:

<strong>Coding Rocks!</strong>

Visualized:

Coding Rocks

Notice how we made use of the opening <strong> tag and the closing </strong> tag to wrap the content. The browser then interprets this HTML: Hey. The developer wants this phrase to be in bold.

Don't worry, there are only a few dozen HTML tags out there, and after just a few weeks in the course, these will all become second nature.

Here are a few tags that you'll come across frequently:

  • title: Aptly named, this tag defines the title of the website as shown on the webpage's tab.

  • head, body: These tags help define the structure of the overall webpage. In essence, head contains invisible matter that the browser uses to render the page correctly, whereas the body tag represents the actual content shown to the user.

  • h1, h2, h3, h4, h5, h6: These tags represent the level of heading a given text block represents. Headings are exactly what they sound like; they are larger or more prominent elements of text on a page. They can be likened to topic sentences on a paper.

  • p: This tag represents paragraphs or blocks of text. You'll use this tag extensively to wrap most of the text on your webpages.

  • strong, em: These tags are used respectively to bold or italicize a given text element.

  • br: This tag is used to create a line of empty space between two blocks of content.

  • img: This tag is used to display images on a page. The syntax is slightly different (see below), but we will walk through its makeup later in the course.

  • a: This tag (which stands for anchor) is used to create links to the same webpage or to other webpages. Again, the syntax is slightly different, but you'll become comfortable using a tags as the course progresses.

  • ul, ol, li: These tags represent unordered lists, ordered lists, and list items. In essence, these HTML elements represent bulleted lists of symbols or numbers.

Let's take a moment to complete this codealong that covers list elements:


HTML Attributes

HTML attributes provide additional information about HTML elements. All HTML elements can have attributes, and they are always added to the opening tag.

Attributes usually come in name/value pairs inside a tag and follow this format: name="value". An example is the href attribute, which specifies the URL of the page the link goes to inside an <a> tag.

Note: Starting with this codealong, you'll have access to the FILETREE. The FILETREE will allow you to switch between the different files you're working on quickly and conveniently. This is also what the coding tools you'll install in Module 4 will look like, so this will help you get used to that format. Simply click on the different file names to switch between the different tabs. If you want to hide the FILETREE, simply click on the folder icon next to the first tab to toggle it open or closed.

Now let's try using HTML attributes:


Formatting Text

As we mentioned before, you can structure your HTML using heading tags (<h1>, <h2>, etc.) and paragraph tags (<p>). Let's practice working with these elements in the following codealong:


Now that you've had a chance to practice some HTML fundamentals, complete a quick check-in to see how you're feeling about your new skills:

Now let's add HTML's stalwart partner, CSS, to our skill set to create our first web page.

Resources

Prework Support

Looking for prework support? Our team of tutors are eager to help! Request a tutor session with the following steps:

1. If not already logged in to BCS, login using your credentials (supplied 24 hours after enrollment).

2. Click Support in the top right.

3. Complete the form fields to submit your request:

  • Under Question Category, select "Tutor Request.”

  • Under Question Category, select "Request a Tutor.”

  • Under Currently, Which Sessions Would You Like to Discuss?, select “Prework assignment”.

4. Complete the additional fields and submit your request.