In this module, we will detour from Javascript and introduce the most fundamental document that determines which elements and content to display on a website's screen — the HTML document.
Before we jump into the details of HTML, let us remind ourselves of the big picture of how HTML, Javascript, and CSS all work together to form a web application. How these three interact is comparable to a basic sentence's structure. Take, for instance, the simple sentence:
"The blue dog barks."
This sentence contains a noun, verb, and adjective. Nouns, like "dog," resemble HTML elements: the items or content you see on the screen. Verbs define the action, like how the dog "barks," are like the Javascript code that can manipulate, add, or delete any HTML element. Finally, the adjectives, which describe the nouns, resemble the CSS markup used to stylize HTML elements to make them look a certain way (like "blue" does to "dog"). All three parts together: HTML, Javascript, and CSS, help form what you see and interact with on a web application.
But no matter how you look at it, every action or stylization on a webpage ultimately needs HTML. That is why we say the HTML document is the most fundamental document to a web application. Without it, you have nothing; without the others, you still have elements on the page (albeit static and boring).
In this reading, you will learn about the basic anatomy of an HTML document and how that anatomy is used and structured.
None
Digital news outlets have all but replaced newspapers these days. You have been hired by a startup, online-based news outlet, "Digital Newsday", looking for someone to put the starting touches on their new web application. Given the complex structure of many current news websites, you will have your hands full in constructing an HTML markup that best displays headlines, articles, navigation links, and more. But the public needs you! According to Digital Newsday's mission, they represent human, heartfelt news in a world that is over-cluttered by superficial news.
If you have ever seen an HTML document, one of the first patterns you will notice is keywords and phrases contained in "less than" signs, <, and "greater than" signs, >, like
Let us start by introducing the four items you will find on any HTML document: the "doctype declaration", the ,
, and tags. Think of these first three acting like a blueprint to a house, and the last one, the tag, as the house itself. Like a blueprint, the first three provide background information for how the webpage will be structured and how it will look, but they are not displayed on the webpage. Instead, only the tag, and most everything found within it, get rendered by the browser and appear as an actual element on the screen.The first item on any HTML document is the "doctype declaration." This must be placed alone on the first line at the top of the page. It looks like this:
<!DOCTYPE html>Though technically not a tag, this tag-like text indicates to the browser (like Chrome or Safari) that this document is, in fact, the latest version of HTML, HTML 5, and should be treated as such. You will only see the "document declaration" once, and again, it needs to be first.
The second item you will see on any HTML document is the tag. Like all tags, the tag will have an opening tag and a closing tag, which will look something like this:
<!DOCTYPE html>
<html>
<!-- future content goes here -->
</html>A few important details to note about the syntax we see here:
As a side note, notice how we structured the comments in this example. Unlike Javascript, which uses two slashes // to add comments, you must surround all comments in HTML with a preceding .
The third item essential to all HTML documents is the
tag. The tag is actually placed between the tags and will contain useful data for the browser, but should not actually include any visual elements rendered by the browser. We will dive more into this later. Nevertheless, we must include it, and it goes between the tags like so.<!DOCTYPE html>
<html>
<head>
<!-- future non-visual data goes here -->
</head>
</html>In tandem with the
tag is the tag. The tag is finally the tag that will contain all of the visual elements of the webpage, located between its opening and closing tags. The tag goes directly after the closing tag, but still between the tags, like so:<!DOCTYPE html>
<html>
<head>
<!-- future non-visual data goes here -->
</head>
<body>
<!-- future visual content goes here -->
</body>
</html>And there you have it! This current HTML markup will technically not show anything on the screen, but the browser will recognize it as a legitimate skeleton.
Although we have stated that nothing outside the
tags should render any elements on the browser screen, this is a universally accepted practice. It is possible (though not advised) to add a visible element anywhere in your HTML markup, like within the tag. In this case, the visible element would appear on the screen and not cause any errors!The time has come for you to markup "Digital Newsday's" first tags on their HTML document. Exactly as we saw before, and necessarily so, outline the beginning of the HTML markup by including the doctype declaration, and the html, head, and body tags. Also, within the body add the following comment: "'Digital Newsday' content goes here."
Here is how that would look:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- "Digital Newsday" content goes here -->
</body>
</html>As you can see, the "doctype declaration" is on the first line where it needs to be, and each opening and closing tag is found underneath, with the
and located within the tag.HTML (HyperText Markup Language) is the foundation of any web page. Learn the essential structure of an HTML document and how to create basic elements.
HTML documents have a standard structure that all browsers recognize:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Your visible content goes here -->
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Understanding this structure is crucial:
Let us continue by covering commonly used tags within the <body> of an HTML document that represent visual parts of the page. We will be learning the ins and outs of what makes these tags unique later on. For now, it's important to understand these tags are pre-programmed into the HTML markup and mean something special to the browser. For example, when a browser reads over one of these tags, it might make the font bigger or create a list. We give these preprogrammed tags the name "semantic tags" because they will render additional meaning to the webpage than what is simply being typed. Here are a few examples listed within the <body> tag:
<!DOCTYPE html>
<html>
<head>
<!-- future non-visual data goes here -->
</head>
<body>
<p></p>
<ul></ul>
<input></input>
<form></form>
<section></section>
<article></article>
</body>
</html>It is worth noting that these semantic tags also help browsers and developers know the page's structure and organization, much like the front page of a newspaper. Ideally, you have a top-level heading (e.g. New York Times), a navigational list where you can find different sections (e.g. sports), and then various subheadings (e.g. article titles), then small text (articles themselves), and so on. In fact, print media inspired many HTML tags, which is why many of these semantic tags carry the same names as the ones still used in print media today.
Working within the <body> tag of what we have written before, now is the time for you to add some tags that will eventually hold some of the key features of your "Digital Newsday" website. You start by inputting the following tags (all with their opening and closing forms) into the <body> tag of your document: <nav>, <main>, <section>, <h1>, <article> :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav></nav>
<main></main>
<section></section>
<h1></h1>
<article></article>
</body>
</html>Tags help us organize items on a webpage, much like an outline of the front page of a newspaper. You often have a series of tags that all belong to one part of another, like all of these articles are national news. When this happens, it is very important to place these "sub-topic" tags inside the opening and closing tags of the main topic. This organizational process is better known as "nesting" tags. With any nested tags, the tag that contains the nested tag is referred to as the "parent" tag, and the nested tags are the "children" tags. Let's see this in action of how it might look in the <body> tag of a webpage:
<body>
<nav></nav>
<main>
<section>
<ul></ul>
<form></form>
</section>
<section>
<article></article>
<article></article>
<article></article>
</section>
</main>
</body>Again, we will wait to dive into what each of these tags does for a webpage, but see if you can follow the organization it is trying to create. Notice that the children of the <main> tag are <section> tags, and how these tags likely make two separate sections on a webpage. Each section contains different child tags that will render two entirely different things.
Finally, it is worth noting that nesting tags do not just help organize the webpage for anyone who reads this HTML markup. In fact, the browser will read these nested items and put child elements (again, elements are the actual items put onto a webpage created by tags) within the boundaries of their parent elements. So there is both planning ahead and actual organization going on here by using nesting tags.
Adding the proper elements, via tags, on a webpage is a crucial first step, but organizing them into a proper, nested outline is perhaps equally as important. It is also the next logical step for the markup in your "Digital Newsday" HTML document. Let's use the same tags we listed in the last section, but organize them as you might expect to see on the homepage of a news website. We also would like to nest a <ul> tag, which stands for "unordered list" in the <nav> tag along with a few <li> items, which stands for "list items".
Here is what that might look like:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<main>
<section>
<h1></h1>
<article></article>
</section>
</main>
</body>
</html>There are a few things worth pointing out here, as you can see how the layout of our webpage is starting to take shape. First, you can see that the <body> of the outline only consists of two elements, <nav> and <main>. <nav> is short for navigation which contains an unordered list of items, as you would see a list of links to various news sections. Within <main>, there is only one <section> for now, and that includes what looks like a big title, which is <h1> and one <article>.
The final tidbit that we will learn about HTML tags for this core competency, is how to apply a few basic "attributes" to an individual tag, and understand why they are useful. Attributes are configurations that help us identify HTML elements from other parts of a web application. CSS stylesheet or Javascript code can influence how a tag's element looks or behaves, but they need some identifier to know which elements to change. Enter attributes!
Two of the most commonly used attributes are id and class. The id attribute is attributed to one specific element and the class attribute is attributed to a group of elements with the same styling or behavior needs. Let's see how each of these might look in a few examples of <li> tags which represent items in a list:
<ul>
<li id="firstItem" class="list-item">First Item</li>
<li id="secondItem" class="list-item">Second Item</li>
<li id="thirdItem" class="list-item">Third Item</li>
</ul>You may have noticed that attributes get written in between the "less than", <, and "greater than", >, signs but after the tag keyword, like:
<li ATTRIBUTES GO HERE ></li>Each attribute name is usually followed by an equal sign, =, followed by a value within double quotes. You might have also noticed that in this example we used camelCase for our ids and lowercase letters with hyphens for our class names. These are two of many customary preferences developers use for attribute names which have some advantages, but, in reality, the browser can read any style.
We will learn a lot more about how to properly use these attributes in a full web application, but, for now, just remember that attributes ultimately tell the browser which HTML elements should be influenced by which CSS styles or Javascript code.
Finally, we added words in between the tags of each <li> element. Any text added between tags is text that will actually show up within that tag's element on the webpage.
Let us focus a little more on the contents within the navigation tag, <nav>, we wrote in the last "How To Build It" section. Within that tag, we see a list of unordered items, each tagged with <li>. Let's add both an id and class to each of these list items; and since we know this will eventually be the navigation links to different sections of a news website, let's include some descriptive identifying terms, like so:
<nav>
<ul>
<li id="usNavLink" class="nav-links">U.S.</li>
<li id="worldNavLink" class="nav-links">World</li>
<li id="businessNavLink" class="nav-links">Business</li>
<li id="sportsNavLink" class="nav-links">Sports</li>
</ul>
</nav>As you can see here, the ids of all of our list items are unique to each other. This enables us to single one out if we need to (maybe to highlight the one that is currently selected). Furthermore, you will notice that the classes are all the same. This enables us to easily select all of these links to give them similar styles or actions, which is very likely in this situation.
You may have also already noticed that we added some text within the tags of each <li> that reflect each of these news sections. Remember that words in between tags are the actual words that will show up on the webpage in that tag's element.
In this core competency, we learned some of the basic anatomy of an HTML document: the basic structure, using semantic tags, nesting tags, and using attributes for our tags. We were also reminded that an HTML document is essential for any web application; without it, you have nothing. But, as we will learn, this document will provide references for other important pieces of web development, like Javascript or CSS, which can manipulate and embellish our final application. We know this module is a change in direction from the Javascript you had been learning, but understanding HTML will only make the Javascript you write more meaningful and easier to learn.
Like the name implies, adding styles to our HTML elements is what will make things look and feel the way we want. By adding the <style> tag in the <head> of our HTML markup, we are letting the browser know that we will be writing and organizing our styles in a format called CSS, or "cascading style sheets". We will learn much more about CSS in the future, but for now let's see how we would add a <style> tag to an HTML document and a few styles to show some examples.
<!DOCTYPE html>
<html>
<head>
<style>
<!-- styles go here -->
</style>
</head>
<body>
<nav>
</nav>
<main>
</main>
</body>
</html>Again, notice how the <style> tag is nested in the <head> tags of the document. Remember that the <head> tag should contain much of the data, what developers may call "meta-data", that will influence our HTML document, but will not actually show up as elements on the page, like style sheets.
And just as a sneak peek at what is to come, let's add a few basic styles to our <style> tag, so that you can see how this plays out:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<nav>
</nav>
<main>
</main>
</body>
</html>In this particular case, we have styled the navigation element <nav>, which is usually a bar that runs across the top of most websites and has links to other parts of the website. This navigation bar is set to have a height of twenty pixels and a background color of blue. Notice how there is a specific format to writing styles, but we will elaborate more on that later.
One more thing to add, since styling lists can get quite extensive, almost always you will see them written on separate CSS documents, and only the links to those documents will be listed in the <styles> tag. Nevertheless, as you can see, writing the styles directly onto the HTML document, better known as "embedding", works as well.
Let's return to the website you are building for the news outlet "Digital Newsday". It will only be a matter of time when we will need to add CSS styling to the elements that we have already set up; so let's add our <style> tag in the proper place first.
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<nav>
<ul>
<li id="usNavLink" class="nav-links">U.S.</li>
<li id="worldNavLink" class="nav-links">World</li>
<li id="businessNavLink" class="nav-links">Business</li>
<li id="sportsNavLink" class="nav-links">Sports</li>
</ul>
</nav>
<main>
<section>
<h1></h1>
<article></article>
</section>
</main>
</body>
</html>And just for kicks, we can add a few initial styles in the <style> tag above for our list items, <li>:
<style>
li {
font-size: 20px;
color: blue;
border: 2px solid gray;
}
</style>For this example, we added a font size of 20px and a font color of blue to our list of items and gave them a square gray border that is 2px thick. Again, it is not vital for you to learn how to style elements right now. We will be covering that later. This example merely shows what one example might look like.
We have gotten a glimpse in our last core competency of how HTML works in tandem with CSS styling and Javascript code to create web applications. Remember that HTML operates much like the bare-bones of what physically gets added to a page: the elements and their content, whereas CSS stylize those elements with different looks, like sizes and colors, and Javascript manipulates those elements, both their looks and content.
The question then becomes: how do we get all of these together into a single HTML document? The answer is, once again, tags. Two of the most commonly used tags on an HTML document are the <style> tag and the <script> tag. Appropriately named, the <style> tag holds the markup of all of the CSS styles a developer wants to add to their HTML elements. Similarly, the <script> tag holds all of the Javascript code that a developer would want to use for their web application.
In this reading, you will learn how to use the <style> properly and <script> tags, and learn a few examples of how CSS styles and Javascript code can influence an HTML document.
Basic HTML Structure
Your employers at news outlet "Digital Newsday" thought your previous work to build out the first HTML elements was fantastic. They are prepared for you to move onto the next phase: upgrading your document by making it responsive to CSS styling and Javascript code. Let's get to it!
CSS (Cascading Style Sheets) brings your HTML to life with colors, layout, and design elements.
There are three ways to include CSS in your HTML documents:
Inline CSS is applied directly to HTML elements using the style attribute:
<p style="color: blue; font-size: 18px;">This is a blue paragraph with 18px font size.</p>
While convenient for small changes, inline styles can become hard to manage for larger projects.
Internal CSS is defined within the <style> tag in the document's <head> section:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
.highlight {
background-color: yellow;
}
</style>
</head>This method is good for styling a single page.
External CSS is stored in a separate .css file and linked to the HTML document:
<head>
<link rel="stylesheet" href="styles.css">
</head>This is the preferred method for larger websites as it keeps your HTML and CSS separate, making maintenance easier.
Like the name implies, adding styles to our HTML elements is what will make things look and feel the way we want. By adding the <styles> tag in the <head> of our HTML markup, we are letting the browser know that we will be writing and organizing our styles in a format called CSS, or "cascading style sheets". We will learn much more about CSS in the future, but for now let's see how we would add a <style> tag to an HTML document and a few styles to show some examples.
<!DOCTYPE html>
<html>
<head>
<style>
<!-- styles go here -->
</style>
</head>
<body>
<nav>
</nav>
<main>
</main>
</body>
</html>Again, notice how the <style> tag is nested in the <head> tags of the document. Remember that the <head> tag should contain much of the data, what developers may call "meta-data", that will influence our HTML document, but will not actually show up as elements on the page, like style sheets.
And just as a sneak peek at what is to come, let's add a few basic styles to our <style> tag, so that you can see how this plays out:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<nav>
</nav>
<main>
</main>
</body>
</html>In this particular case, we have styled the navigation element <nav>, which is usually a bar that runs across the top of most websites and has links to other parts of the website. This navigation bar is set to have a height of twenty pixels and a background color of blue. Notice how there is a specific format to writing styles, but we will elaborate more on that later.
One more thing to add, since styling lists can get quite extensive, almost always you will see them written on separate CSS documents, and only the links to those documents will be listed in the <styles> tag. Nevertheless, as you can see, writing the styles directly onto the HTML document, better known as "embedding", works as well.
Let's return to the website you are building for the news outlet "Digital Newsday". It will only be a matter of time when we will need to add CSS styling to the elements that we have already set up; so let's add our <style> tag in the proper place first.
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body>
<nav>
<ul>
<li id="usNavLink" class="nav-links">U.S.</li>
<li id="worldNavLink" class="nav-links">World</li>
<li id="businessNavLink" class="nav-links">Business</li>
<li id="sportsNavLink" class="nav-links">Sports</li>
</ul>
</nav>
<main>
<section>
<h1></h1>
<article></article>
</section>
</main>
</body>
</html>And just for kicks, we can add a few initial styles in the <style> tag above for our list items, <li>:
<style>
li {
font-size: 20px;
color: blue;
border: 2px solid gray;
}
</style>For this example, we added a font size of 20px and a font color of blue to our list of items and gave them a square gray border that is 2px thick. Again, it is not vital for you to learn how to style elements right now. We will be covering that later. This example merely shows what one example might look like.
Similar to how <style> tags link CSS styles to our HTML document, a <script> tag will link Javascript code to our HTML document. And, just like we did with our CSS styles, we can embed our Javascript code right between our <script> opening and closing tags. Here is how that would commonly look:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
</nav>
<main>
</main>
<script>
console.log("Hello, World")
</script>
</body>
</html>A few things to note here. First, notice how our <script> tag is located within the <body> as the very last item. There is some debate as to where the <script> tag should be placed among developers, but for our purposes, we will always put the <script> tag as the last child tag of <body>.
Secondly, notice that within the <script> tags we can write our Javascript code, in the same format that you have learned thus far. In this case, the browser will first render a <nav> and <main> element to the page and then print "Hello, World" to the console.
And just like we noted with the <style> tag, the <script> tag will more than likely just contain a link to separate Javascript documents, since Javascript code can also get pretty lengthy. It is important when building a full application to keep your documents as lean as possible. It is much easier to navigate dozens of short, separated files in organized folders than a single HTML document of 20,000 lines of code.
Adding our <script> tag to our "Digital Newsday" HTML document should be as straightforward as the <style> one was. Within the <script> tag, add a little Javascript snippet that saves the string: "Javascript code is running…" to a variable and prints that value to the console. Though this may seem a little basic, developers print scripts like this all the time to verify that everything is running properly before going through the trouble of adding more complex logic.
Here is how that one would look:
<!DOCTYPE html>
<html>
<head>
<style>
li {
font-size: 10px;
color: blue;
border: 2px solid gray;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="usNavLink" class="nav-links">U.S.</li>
<li id="worldNavLink" class="nav-links">World</li>
<li id="businessNavLink" class="nav-links">Business</li>
<li id="sportsNavLink" class="nav-links">Sports</li>
</ul>
</nav>
<main>
<section>
<h1></h1>
<article></article>
</section>
</main>
<script>
const testJavascript = "Javascript code is running..."
console.log(testJavascript)
</script>
</body>
</html>This core competency taught us how to link basic CSS styling and Javascript code to our HTML document using the style and scripttags. The importance of these two features will become more obvious as time goes on, but at least you can now see how these two are ultimately linked with the one HTML document that drives the entire web application. Our hope is that this is the first of many readings to come that enable you to wrap your head around the big picture of how a web application works. The more you can do this, the easier the smaller details will be for you to learn and use.
Forms allow users to interact with your website by submitting data.
Forms collect user input through various form controls:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Submit</button>
</form>
Tip: Always use the <label> element with form controls to improve accessibility. The for attribute of the label should match the id of the form control.
Learn how to use CSS to create responsive layouts and position elements on your page.
Every HTML element is a box with content, padding, border, and margin:
.box {
width: 300px;
padding: 20px;
border: 2px solid #ff5722;
margin: 30px;
}
Understanding the box model is essential for controlling layout and spacing.
By far, the most useful collection of tools web developers use to understand exactly how the browser is rendering their program are the Chrome development tools, or "dev tools" for short. Virtually useless and unknown to the common web surfer, the Chrome dev tools are essential to the daily work of a web developer. They allow the web developer to pinpoint exactly how the browser reads their program's HTML markup, Javascript code, CSS styles, console, HTTP requests, and much more.
Perhaps it is best to think of the dev tools as a comprehensive diagnostic program always running alongside your web application. For teachers, it's much like having the lesson plan, a video of the lesson itself, and reflections from all the students on how the lesson went, all in one go.
Since the dev tools are so crucial to the daily work of web developers, we thought it best to at least introduce them here. In this reading, you will learn how to access the Chrome dev tools, navigate some of its features, and manipulate some of its content.
Basic HTML Formatting
You have made great strides laying down some of the initial HTML markup for your "Digital Newsday" web application. A web designer specializing in designing the look of the website, not building it, has recently informed you of some initial content and styles they would like you to try for the "list items" in the navigation you have already created. Instead of re-editing your HTML code, this task would be excellent for Chrome development tools that can manipulate content and styling.
As stated before, the Chrome dev tools are your number one resource for understanding exactly how your code is rendered by the browser (in this case, the Chrome browser).
To open the dev tools on most web pages, right-click anywhere on the webpage and select the "Inspect" option from the list. Usually, it is the very last option.
It is worth noting here that the design of some websites blocks your ability to access the browser's default right-click options when you right-click. Some advanced websites have right-click options of their own (rare), and other sites might have features, like maps, that override the right-click option altogether (more common). If this happens, you can alternatively open the dev tools by clicking the browser's settings button (three vertical dots in the top right corner), then "More Tools," and finally, "Development Tools," or you can use the keyboard shortcut Command + Option + I for a Mac or Ctrl + Shift + I for Windows.
After opening the dev tools, you should see a few separate windows appear on the right-hand side of the page. We will talk about some of these features in the following learning objective.
As mentioned before, the Chrome dev tools have many features that allow you to better inspect and manipulate virtually anything on the displayed web page in the browser. We will focus on three main sections now: elements, styles, and the console.
The "elements" section will list the actual HTML markup that was rendered by the browser. You can locate the "elements" section by clicking the "Elements" tab located near the top. As you scroll through the seemingly complex HTML markup, you can still spot all of the essential tags that we discussed so far in this module: the doctype declaration, <html>, <head>, and <body>. You may also notice a <style> tag in the <head> section and many <script> tags in various sections.
You may also notice that if you navigate to any text that is displayed on the webpage (try looking within several tags within the <body>tags) and if you click that text, you can edit it directly in the browser.
The "styling" section holds all CSS styling for any selected element. We will get into the detail of how to style your elements in a future lesson but try and inspect (right-click and click "inspect") on any element on a webpage. In the dev tools, locate the "Styles" tab. Odds are, you will find many styles at work that you could manipulate.
Finally, you can also see the "console" section by clicking the "Console" tab, which you have already encountered before. The console section is where you will see anything that you specify to print to the console or any errors that might come up along the way when the application is running.
Even though you can manipulate the content and style of any element on virtually any website using the Chrome dev tools, you are not changing it for anyone else who visits the website. By using the dev tools, you only manipulate the website as it appears in your browser. Test this by refreshing the page, which will return all edits to normal.
It's now time to open up the Chrome dev tools on what you have written so far for your web application for "Digital Newsweek". Another web designer has suggested that the <li> with the content "U.S." should be changed to "National" and all the <li>s should be given a font size of 30px. They also have suggested to consider the font colors midnightblue, olivedrab, and crimson for the font colors of all the <li>s, to see what might look best.
Here is where we left off in the last core competency:
<!DOCTYPE html>
<html>
<head>
<style>
li {
font-size: 10px;
color: blue;
border: 2px solid gray;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="usNavLink" class="nav-links">U.S.</li>
<li id="worldNavLink" class="nav-links">World</li>
<li id="businessNavLink" class="nav-links">Business</li>
<li id="sportsNavLink" class="nav-links">Sports</li>
</ul>
</nav>
<main>
<section>
<h1></h1>
<article></article>
</section>
</main>
<script>
const testJavascript = "Javascript code is running..."
console.log(testJavascript)
</script>
</body>
</html>If we were to save this HTML markup in a file and load it in a Chrome browser or copy/paste it into a Replit file, we would be able to right-click on one of our <li> elements above and click "Inspect" to open up our dev tools. There, we would be able to navigate to the three dev sections we talked about earlier: "Elements", "Styling", and "Console".
In the "Elements" section we can see our entire HTML markup, particularly:
the <head>, and <body> tags which include the <li> elements we see on the page, and
the <style> and <script> tags that house our CSS styles and Javascript code.
The "Styling" section will show the styles of each element when selected in the HTML markup. And, ignoring a few warning signs if you are using Replit, it looks like the console has printed our Javascript string: "Javascript code is running…".
As requested, let us make a few changes to the content and styles from what we had arbitrarily thrown in there.
First, we will double-click on the text content found within the first <li>, "U.S."
We can then change the text to "National" to see how that looks.
Also, when keeping the <li> selected, we can navigate to the "styling" section to change the font size of all the <li> elements to 30px, and
Try a few of the colors suggested above, such as crimson.
In this core competency, we learned about one of the most useful tools for a web developer: Chrome's "dev" tools. Though there are many more features available within these dev tools that we will introduce later, we covered some of the more essential ones. We learned how to access and manipulate the HTML elements that were found on the webpage, both their content and their styles. We highly encourage you to practice with these dev tools each and every time you are working with Chrome, such as in your module projects. We will officially need these tools more regularly when we undergo our Sprint Challenges.
In this Guided Project, we will delve into the essential building blocks of web development by exploring the structure of an HTML document, commonly used HTML elements, applying styles, and the script tag. These foundational concepts will serve as a strong base for the remainder of the course and empower you to create engaging and dynamic websites throughout your career. As we progress, we will build upon these topics, enabling you to advance your skills and knowledge and ultimately equipping you for success in the exciting world of web development. Let's embark on this rewarding journey together!
This module project will challenge you to build the HTML of a webpage from scratch. As a Web Developer understanding HTML is essential and there is no better way to grasp its concepts than to build with it.
The module project contains advanced problems that will challenge and stretch your understanding of the module's content. The project has built-in tests for you to check your work, and the solution video is available in case you need help or want to see how we solved each challenge. Remember, there is always more than one way to solve a problem. Before reviewing the solution video, be sure to attempt the project and try solving the challenges yourself.
If you can successfully get through all the Module Projects in a sprint, you are ready for the Sprint Challenge and Sprint Assessment, which you must pass to move on to the next Sprint.
The link below will provide you with a direct download of a Module Project zip file:
Create a simple HTML page with a heading, paragraph, and an image. Then style it using CSS to change colors, font sizes, and add some margins and padding. This hands-on practice will reinforce what you've learned in this module.
Remember to check your work in a browser to see how different CSS properties affect your page's appearance!