CSS BASICS

2.1 Lesson - CSS Basics

Activity 1

Brief: Let’s go back to Adobe Dreamweaver. For this activity, you need to re-open the index.html file from the “SBD2-activity” folder you downloaded in the first lesson of Module 1. Open this file and click on the “Split” view. You will see a white screen with un-styled website information and another window below with the HTML code with the indents you created. 

In the top left of the window, you will see “styles.css” under index.html. When you click on it, the window is empty. This tells us there is a style.css file specified, but the browser cannot find it. 

When you created a folder structure for the website in Module 1, you placed the styles.css file into a separate CSS folder. So, the link inside the <head> section of the HTML document is no longer correct.

See if you can fix the links. 

Activity 2

Brief: Download the provided folder onto your computer. It’s filled with website files but without a structure. Take a screenshot of the folder showing the files unorganised. Start creating folders and organise the website content in a good file structure.

Unorganised

Organised