In this video, explore an exercise for setting up the project files, adding content, and running a test to make sure the CSS files are properly linked.
- [Lecturer] In this course we'll be learning CSS by applying each concept to the HTML template included in the exercise files. It can be found in the chapter one 01_04 folder marked starter files. And for some context, here's how the final project will look. It will be an about me, slash portfolio, slash resume page. You can customize the content however you wish by updating the text, copy in images but keep the HTML structure the same so you could follow along with the exercises. If you want to make this more of a personal page or a portfolio page or just a resume page, you can delete whichever sections you don't want to use. However, if you're more of a hand-on learner I would recommend keeping all the sections until the end of the course, then delete the content you don't plan to use. That way, you can follow along with all of the exercises. Let's start by creating a folder for the project files. I'm going to save mine to my desktop. For folders, I like to name them after the client or the domain name or the specific project name. Whatever you choose, name it something descriptive like CSS essential training or CSS project. I'm going to call mine css_portfolio. When naming folders and files, use lowercase letters and avoid using spaces or special characters just to ensure that everything displays properly. A website contains a variety of files. And so for organization, folders are often used to group similar files types together. So let's create a CSS folder and an images folder. Next, we'll copy the HTML template file and save it to your project folder. So let's go back to the exercise files. And I'll just copy this index.html and paste it into my project folder. I would recommend keeping the original file, just in case you need a back up or just want to start the project again. You can have multiple HTML pages and name it whatever you want. But, the homepage is always named index.html. For our website to be seen on the web, you need to upload your files to a web server which automatically looks for an index file to show as the default home page. The starter files also included some placeholder images. These are just a couple of options for a background image that you can use and some placeholder thumbnails for the project items. You can use these in your projects or use your own images. Just make sure to save them to your images folder. We'll talk more about image-sizing and where you can find more images in the next lesson. Next, let's open up the project in your text editor. I'll be using Atom in the Firefox Browser but you can use whichever editor or browser you prefer. I'll add my project folder which is saved on the desktop. And once the project has been added, let's open the index.html file to see what we can customize. You can start by updating the title tag to describe your page. In this case, it's a personal page so your title can be something like your name slash resume or your name and your job title. Throughout the body section there are organizational comments as well as instructions for how to customize the HTML content while maintaining the page structure. In the project section, there are embedded thumbnails here but don't worry about updating the file path just yet. We'll be talking about using absolute versus relative paths for your source files in an upcoming lesson. Take a moment to personalize your page or stick with the placeholder content. You just need to have some content to practice with. The great thing about learning how to edit this page yourself is you can always come back and revise it later. In general, it's good to start any project by adding in as much content as you can first before adding CSS. Having realistic content gives you context which helps when adding in styles. For placeholder text meettheipsums.com links to various text generators that you can use to add some realistic text. And here's what my personalized HTML file looks like. There's not much going on here yet because we haven't added any CSS. So these are just the default styles. Once you finish customizing the content, you're ready for the next lesson, updating images.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts