It’s fair to say we are all going to be eager to enhance and embellish, but this phase, can we stick to the project and bring in enhancements at the end of this process?
You’ll see I’ve broken the page into three sections, but it is still the one page. We may as well start at the top. It hasn’t come up in the courses but deserves consideration…
<link href="styles.css" rel="stylesheet"> <script src="script.js"></script>
Simple, eh? If a future lesson squawks at your about this, just humor the author and toss it in, but don’t think you need to have it in your own projects.
Remember to save your original work on your local machine. All you need is a text editor. In your documents folder, create a
cc folder and in that a
choredoor folder. Save all your work there (careful not overwrite past work). Now you can change those three lines.
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"> <link href="./style.css" rel="stylesheet">
and at the bottom,
Save and test. Won’t be much to see since it will work and look the same. Save often, and copy iterations over to your local folder so you can go back and see the progression or revert back to earlier versions if something goes wrong.
It’s not likely we will ever need to override a selector rule in the Google font CSS but having our custom CSS load last gives it greatest sway in the imported styles cascade. Always load your CSS after everyone elses.
Couple last things to consider about in the top section… The human readable language, and character encoding. HTML has been encoded as UTF-8 by most text editors (sans Windows Notepad) but we need to tell the user agent what encoding to use on the plain text. If we want international characters to render correctly this will be important (and is the de facto standard).
<html lang="en"> <head> <meta charset="UTF-8"> <title>Chore Door!</title>
Make this a template action on all your future HTML projects. The character encoding is declared before the title so special characters are rendered correctly in the title bar or tab.
This page doesn’t have an H1 element, but it does have a header. The header (or headline) should match the title element. Notice what your header reads? Hence the title. We’ll be working with the header next.
In the steps we give this element a background color and text alignment in the style rule for class header.
For now let’s stick to the project and use the header image provided. You can go with your artistic improvements when we’re done here, only with lots more insight cached away in your thinking. I’m all for sticking with the program since it makes it easier for me to explain these things while having a local reference of my own.
<div class="header"> <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg"> </div>
As a designer one might want the name of the image file to match the text represented by the image. I would have called it
chore_door.svg. That’s me. Don’t let my subjectivity affect your perspective. That is not my goal. Anything I suggest is purely recommendation, not absolute. Rules of thumb are kind of important to have, though.
If you can for now adopt the original code scheme it will make things a pleasure to go forward and will benefit future readers of this topic. Please strip all the embellishments and adjust your HTML as recommended above, Save and test, and post the new HTML in a reply. We can resume at that time.
BTW, we are far from finished with the HTML. This is just the first step that concisely addresses a small number of concerns. That is how we want to approach this process: Extreme objectivity.