From the course: CSS Essential Training

Project: Customizing the content

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Customizing the content

“

- [Instructor] Let's begin the course project by setting up our files and folders. Since we're not focusing on HTML in this course, I've provided a template to get us started. It can be found in the Exercise Files in the Starter Files folder. We'll still be working with HTML as we customize the project, but this template will provide the framework to build upon. The template includes an index.html file and an images folder with placeholder image files that you can use for the exercises. We'll talk about how to use your own images in an upcoming video. There's also a CSS folder with a blank CSS file, which we'll be using later. Let's start by creating our project folder in the Exercise Files to keep all the course files organized in one place. This will also make it easier to use the Live Server plugin we installed earlier. I'll talk about that a little more in the next video. For this project, I'll name the folder personal-site. Back in the Template folder, you can move these files to your personal-site folder or make a copy if you'd like to keep an unedited version. I'm gonna make a copy by selecting all the files and folders. Then right-click and select Copy. Then I'll go back to the personal-site folder and paste it. Now let's go back to the text editor to start making changes. If you still have the files open from the previous demo, close them all now. And if you still have the EXTENSIONS sidebar open, click the File icon to go back to the File View. Now let's open our new personal-site folder from the sidebar and double-click the index.html file to open it in the workspace. Now let's go over the template and how you can personalize the project. I encourage you to customize the content, but keep the HTML structure the same to follow along with the exercises. The first bit of content to be updated is in the title tag in line 6. This is used to describe your page, so you should add at least your name and maybe a job title or a tagline. I've also added comments to organize the page and include additional instructions. Feel free to add your own or revise the existing comments. In the header area, the navigation links are already set up to point to specific sections on the page. For example, the href value About will navigate to the section with an ID of About. If you wanna change the names, make sure the href value matches the ID value to maintain proper in-page navigation. Next, update the h1 content with your name and add a tagline or title to the following <p> tag. In the About section, add your bio. You can use as many paragraphs or links as you need as long as it stays within the section tags. For the project section, the template includes the HTML markup for one project. To add more, copy the whole section block and add it underneath. Right-click on the highlighted selection and choose Copy and Paste from the menu, or you can use the keyboard shortcut, Command + C to copy and Command + V to paste on a Mac or Control + C to copy and Control + V to paste on a PC. At the top of the project block, there's markup for adding images, but don't worry about updating it for this exercise. We'll get to that later. For now, update the project name and description in the <h3> and <p> tags. If you wanna use one link after the project description, use the single anchor link. For multiple links, use the list instead. Here's how both link options will look in the final version. This one uses a list, and this one is using just a single link. When you have multiple closing tags close together, it can get confusing, especially if it uses the same HTML tag. So I've added comments to mark where the main page sections end. Feel free to make changes or add your own. Next is the resume section, which contains various subsections, your profile, work experience, and education. Update the content accordingly. And finally, we have the footer section. This includes some basic contact information, like your email and links to social media or other online accounts and a basic copyright note. Here's a little tip for working with longer blocks of code. Being able to collapse the code blocks can help you navigate your file a little more easily. Hover near the line number, and click the arrow to collapse the indented code. Once hidden, the arrow points to the right. Click it again to reveal the hidden code blocks. Take some time now to personalize your content. Once you're finished, make sure to save your changes. In the next video, we'll go over how to view your changes in the browser manually and with the Live Server plugin.

Contents