• An additional folder namedcss

Thecssfolder will contain the CSS files needed to style your web page.

Finally, open thecssfolder you just created. Inside of this folder, create the following:

• A new file namedindex.css(use your preferred text editor)

Theindex.cssfile will contain all of the CSS styling rules that will be applied to your web page.

This overall folder structure will help support your workflow as you add files or resources. At a high-level, here’s what it should look like:

filesystem

Great! With your folder structure, HTML, and CSS files all in the right place, we can add content to the web page.

First, open theindex.htmlfile in your preferred text editor. Next, add the required boilerplate HTML code:

<!DOCTYPE html><html><head>  <title></title></head><body>

</body></html>
Copy to clipboard

<!DOCTYPE html><html><head>  <title></title></head><body>

</body></html>

After you add the boilerplate HTML code, feel free to also add the following items:

• Your own title between the<title>tags
• Your own content within the<body>tags. If you need some quick, pre-written content, feel free to use the following and modify as you wish:

<h1>FirstName LastName</h1><p>I'm learning to code on Codecademy! My goals include:</p><ul>  <li>Learn to code</li>  <li>Start a company</li>  <li>Help the world</li></ul><p>This is one of my favorite websites: <a href="https://www.google.com/" target="_blank">Google</a></p>
Copy to clipboard

<h1>FirstName LastName</h1><p>I'm learning to code on Codecademy! My goals include:</p><ul>  <li>Learn to code</li>  <li>Start a company</li>  <li>Help the world</li></ul><p>This is one of my favorite websites: <a href="https://www.google.com/" target="_blank">Google</a></p>

Finally, open theindex.cssfile in your preferred text editor. Add the following pre-written CSS rules to the file (feel free to modify as you wish):

* {  font-family: Helvetica, Arial, sans-serif;}

h1 {  color: SeaGreen;}

p, li {  font-size: 18px;}

a {  text-decoration: none;}
Copy to clipboard

* {  font-family: Helvetica, Arial, sans-serif;}

h1 {  color: SeaGreen;}

p, li {  font-size: 18px;}

a {  text-decoration: none;}

Be sure to save your changes for both files!

As it turns out, the HTML content you added will not be styled by the CSS rules unlessindex.htmlandindex.cssare linked together. In the<head>section, link the stylesheet to the HTML file.

<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
Copy to clipboard

<link href="./resources/css/index.css" type="text/css" rel="stylesheet">

You might be wondering why thehrefattribute is set to./resources/css/index.css. This is because you must specify exactly where theindex.cssfile lives within your folder(s)relativeto whereindex.htmllives (otherwise, the two files won’t link).

Again, make sure to save your changes!

Great work - let’s take a look at your web page in the browser.

Open your preferred web browser. In the menu bar, click on “File” and then click on “Open File…” (or equivalent). Navigate to yourindex.htmlfile and then click “Open” (or equivalent). The browser should load your web page. What do you see?

At this point, feel free to make changes to your HTML or CSS code. Keep in mind that in order to view anynewchanges you make, you’ll have to refresh your browser.

Congrats! In this short time, you learned how to take what you’ve been learning on Codecademy and apply it using the tools you have available on your own personal computer. You successfully learned how to:

• Create a folder structure to support both your workflow and your web page
• Add HTML content and CSS styling to respective files
• Link the HTML and CSS files together
• View your web page in a browser (and refresh the browser to view new changes)

In general, the four points above are a strong starting point for your own developer workflow. As you learn more, you may modify the workflow to fit your specific needs. At this point, feel free to modify the content of the web page or create an entirely new project. Happy coding!

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'