Setting Up Your Project: HTML and CSS Basics

1. What We Are Learning

This lesson kicks off Module 3: Quick Win: Your First Manual Web Page. Our goal is to create a project folder with a standard structure (index.html, styles/style.css).

Think of this as setting up a new, clean artboard in Figma. Before you add a single element, you create the file, name it, and maybe set up some initial guides. We're doing the digital equivalent for our website.

We will:

• Create a main folder for our project on your computer.
• Open this folder in VS Code.
• Create the two essential files every simple website needs: an HTML file for content and a CSS file for styling.
• Organize these files into a clean, professional structure.

2. Why This Matters

In design, you know that a well-organized Figma file—with clearly named layers, groups, and pages—is crucial for collaboration and maintainability. A messy file is a nightmare to work with, even for yourself a few weeks later.

The same principle is fundamental in web development. A logical folder structure makes your project:

• Understandable: Anyone (including you, collaborators, and even the AI tools we'll use later) can quickly grasp where everything is.
• Functional: Web browsers and servers are built to expect certain conventions. For example, they automatically look for a file named index.html as the homepage.
• Scalable: As your project grows from one page to many, a good structure prevents chaos.

To start, let's get a high-level overview of why this structure is so important and what the standard conventions are.

3. Step-by-Step Instructions

Now, let's put that theory into practice. We will create our project folder and files. We'll start by using your computer's built-in file manager (Finder on Mac, File Explorer on Windows) and then move into VS Code.

The following guide from the Mozilla Developer Network (MDN) is an excellent resource that walks through the same process we're about to undertake. We'll follow its steps together.

Step 1: Create Your Project Folders

First, we'll create a main folder to hold all your future web projects, and then a specific folder for this first landing page.

1. Open your computer's file manager (Finder/File Explorer).
2. Navigate to your Documents folder. This is a safe and easy-to-find place.
3. Inside Documents, create a new folder named web-projects. This will be the home for all the projects in this course.
4. Now, go inside the new web-projects folder and create another new folder named my-landing-page. This is our root folder for this specific project—the "suitcase" from the video.

Step 2: Open the Project in VS Code

It's important to open the entire folder in VS Code, not just individual files. This tells the editor, "This folder is my entire workspace."

1. Open VS Code.
2. From the top menu, go to File > Open Folder....
3. In the window that appears, navigate to Documents > web-projects, select the my-landing-page folder, and click "Select Folder" (or "Open").
4. VS Code will likely ask if you trust the authors of the files in this folder. Since you created it, click "Yes, I trust the authors".
5. You should now see MY-LANDING-PAGE in all caps in the Explorer panel on the left side of VS Code. It will be empty for now.

Step 3: Create Your HTML and CSS Files

Now we'll create the files directly inside VS Code. This is the standard workflow. The following video shows this process visually.

Let's do it:

1. Create index.html:

   • In the VS Code Explorer panel, make sure no folders are selected. Hover your mouse near the MY-LANDING-PAGE title, and click the "New File" icon.
   • A text box will appear. Type index.html and press Enter. Your main HTML file is now created and opened in the editor.

2. Create the styles folder:

   • Click on an empty area in the Explorer panel to deselect the index.html file.
   • Click the "New Folder" icon.
   • Name the folder styles and press Enter.

3. Create style.css inside the styles folder:

   • Important: First, click on the styles folder in the Explorer to select it. This tells VS Code you want to create the new file inside this folder.
   • Click the "New File" icon again.
   • Name the new file style.css and press Enter.

You've done it! Your folder structure should now look like this in the VS Code Explorer:

my-landing-page/
├── styles/
│   └── style.css
└── index.html

This structure separates content (index.html) from presentation (style.css), which is a core principle of modern web development.

4. What Could Go Wrong

• File extensions are hidden: On Windows, file extensions like .html or .css might be hidden by default. This can cause you to accidentally name a file index.html.txt.
  • How to fix: In the MDN article "Dealing with files," find the section called "File names". It provides instructions on how to show file extensions in Windows. For Mac, this is not usually an issue.
• Files in the wrong place: You might accidentally create style.css outside the styles folder.
  • How to fix: Simply drag and drop the style.css file onto the styles folder within the VS Code Explorer. It will ask you to confirm the move.
• Typos in names: Naming the file idex.html or the folder style instead of styles.
  • How to fix: Right-click the file or folder in the VS Code Explorer and choose "Rename". Carefully correct the name. Remember the rules: all lowercase, use hyphens instead of spaces, and name the homepage index.html.

5. Mini Exercise

To reinforce what you've just learned, repeat the process with a practice project.

1. Using your computer's file manager, go into your web-projects folder.
2. Create a new project folder named practice-project.
3. Open this new practice-project folder in VS Code (you can use File > Open Folder... or open a new VS Code window with File > New Window first).
4. Inside VS Code, create the file index.html.
5. Create the folder styles.
6. Inside the styles folder, create the file style.css.
7. Check that your structure matches the one we created for my-landing-page.

6. Checklist Before Moving Ahead

• I have a web-projects folder in my Documents.
• Inside it, I have a project folder named my-landing-page.
• I have opened the my-landing-page folder in VS Code.
• Inside VS Code, I have created an index.html file at the root level.
• I have created a styles folder.
• Inside the styles folder, I have created a style.css file.
• I understand that index.html is the special name for a homepage.

Conclusion

Congratulations! You have successfully created the foundational structure for your first website. This organized "scaffolding" is the mark of a professional workflow and will make the next steps much smoother. You now have a blank canvas (index.html) and a dedicated place for your paint palette (style.css).

A Look Ahead: In the next lesson, we will finally write some code! We'll add a "Hello, World" message to index.html to create the basic structure of a webpage. Get ready to see your first creation come to life in the browser.