Before writing CSS, it's good to set up your files and add all the required HTML. Learn how in this video.
- [Instructor] Now that we've talked about browsers, text editors, and HTML, we're ready to start setting up our project files. In this course, we'll be learning CSS by applying each concept to a final project, this resume page. Be sure to hang onto your projects, because we'll continue to build on it in the next course. Since this course focuses on CSS, I'll be providing the starting HTML markup so we can dive into the CSS right away, but you can customize the content however you wish. But make sure to keep the HTML structure pretty much the same to be able to follow along with the exercises throughout the course.
I'll also be providing placeholder content resources if you don't have specific personalizations to add just yet, or take a moment now to think about what content you'd like to add based on this example. The great thing about learning how to code this page yourself is you can always come back and update it later. Let's start with making a folder to hold all the files we'll need to build the course project. Name it something descriptive to make easier to find later, something like Resume or CSS Core Project. I'm going to save mine to my desktop and name it CSS-resume.
If you have access to the exercise files, the starter HTML file is included in the chapter one, module 105 index.html. Make a copy and save it into your resume folder. And that way you'll have a backup copy just in case. If you don't have access to the exercise files, you can still follow along by copying the HTML markup, which I'll be going over shortly.
Just make sure to name it index.html and save it into your project folder. Next, add the project to your text editor. I'll be using Atom, but you can use whichever editor you prefer. I'll just drag my folder into the Atom icon to open it. Double-click on the index.html file to open the file. Let's go over what's included. Starting from the top, line one. This is the doc type, this tells the browser what HTML version the page is written in.
This particular doc type is for HTML5. In the next line, line number two, is the opening HTML tag. The closing HTML tag is all the way at the bottom of the page, in line 72. This HTML tag wraps all of the code and is referred to as the root element. All HTML code must be written within these tags. The opening tag is always at the top right under the doc type and closes at the bottom.
This right here is the lang attribute, which stands for language. EN is for English. If you need the content to be translated, you will either have to update it manually or use third party translation tools. If I change this value to FR for French, this won't automatically translate the existing content, but declaring it will assist translation tools to identify the language that the page is written in. So, I'm going to change mine back to EN since my page is written in English.
The next line, number three, is the head element. The head tag is basically the brains of the page and it closes here in line seven. Information required to run the page is added here, but not the actual page content itself. On line six is the page title, which appears in search results, bookmarks, and the browser tab, so make sure to put something descriptive in here. Since this is your resume page, the best option is to put your name and any sort of tag line, or just simply leave it as resume.
Meta tags are also added here to provide more information about the page. You can see two meta tags here on line four and five. In line four, is the character set meta tag. This is set to UTF-8 to make sure special characters like round quotes or accented E's are rendered properly. This refers to the Unicode 8-bit character encoding, which should be used for web content and supports many languages. The next meta tag in line five is the view port meta tag, and this is more for responsive layouts to make sure CSS on mobile devices are rendered properly.
We won't be covering responsive web design in this course, but it's still good to include the meta tag here for later on. In line eight, this is the opening body tag. All page content goes between the opening and closing body tags. The closing body tag is all the way at the bottom just before the closing HTML page. And this is where you want to add all of the content that you actually want to display in the browser itself. In line nine and line 18 are just examples of HTML comments and these are sprinkled throughout the page with instructions and notes for you to update the content.
HTML comments do not show in the browser. These are all the basic tags that should be included in all web pages. Everything contained between the opening and closing body tags are specific to this project. Starting with the intro section. Starting on line 10 is the header. Here you can update the personal information such as your name or add your own image, and a square image will work best for the final design. In the work experience section, here is where you can add any job details for your resume.
If you want to add more than one job, make sure to copy this entire block and just add it to the bottom, right before the closing section tag. The education section is set up similar to the work experience section. You need to copy this entire block if you want to add an additional school. And finally in the footer is your contact information. Feel free to add or remove any of these social networks and update it to include your own links.
Once you have the HTML file ready to go, open it in your browser. For the best experience, use a modern browser. I'll be using Chrome for the remainder of this course. Right now, this page is still using just the default browser styles, but most of these will be changed later on with CSS. So, I haven't personalized any content in this version just yet. Right here, this is showing a broken image link, and that's because I haven't added my image into this folder just yet. This is just here as a placeholder for you to update with your own image.
I like to look at projects first before adding any CSS, just to be familiar with the default styles. It also helps to become familiar with what the default styles look like to help figure out which styles can be revised with specific CSS properties. Take some time to customize your starter file and personalize the content. If you don't have content to work with right now, you can use a royalty-free service, such as unsplash.it, for images. They have a placeholder service where you can copy a URL directly to one of their image files, or if you want to download the image files, just go to their main website at unsplash.com.
For placeholder text, MeetTheIpsums.com links to various text generators that you can use to add some realistic text blocks. For reference, here is what the final project will look like. This can help you plan what kind of content you would like to add into your project.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property