× Introducting Dog Shelter Project Dog Shelter: Setting Up The Folder Structure Dog Shelter: Building The Navbar Dog Shelter: Building The Hero Section Dog Shelter: Building The Get Involved Section Dog Shelter: Building Dogs For Adoption Section Dog Shelter: Building The QA Section Dog Shelter: Building The Footer Section Dog Shelter: Responsive Design

Dog Shelter Project: Setting The Folder Structure

Welcome to our Dog Shelter Project. In today's video, we'll guide you through the essential steps of setting up a structured project folder, sourcing appropriate images, and creating the fundamental index.html and style.css files. These skills are the building blocks of web design and development, and by the end of this session, you'll be well on your way to creating your very own project. In case you missed it, we've already given you a sneak peek of the project we'll be working on in our previous video. Let's dive in and bring that vision to life!

Setting The Folder Structure- Summary:

After watching the video tutorial on structuring folders, installing Visual Studio Code, and creating your initial index.html and style.css files, you're now well-prepared to begin your web development journey. These foundational skills are essential for building any web project, and you've taken the first steps toward mastering them. With your project's structure in place and the necessary files ready, it's time to roll up your sleeves and start bringing your website to life. Let's dive into the world of web development together!Here is short summary:

Setting The Project

To kickstart our project on the right foot, we'll begin by organizing our project folder structure. Although we've created folders on our desktop in the example, feel free to choose any directory that suits you.
Here's how to create a folder: right-click on your desktop, select "New" from the drop-down menu, choose "Folder," and name it "Dog Shelter." Now that your project folder is ready, double-click to open it, right-click inside, and create another folder named "Images." All your project images will be stored here.

For free images, visit Pixabay.com , search for dog images, and pick the ones you like.

Instaling Code Editor

For this project, we strongly recommend using a code editor. If you don't already have one, we're using Visual Studio, which you can download from Visual Studio. Just follow to prompts.

Creating Index.html & Style.css Files

To set up your project, follow these steps to create your initial files - index.html (your home page) and style.css (your stylesheet): Open Visual Studio (VS). From the menu bar, select "File," then "Open Folder." In the popup window, navigate to your project folder location and click "Select Folder" in the lower right corner.

Once your folder is open, it will appear in the left panel of VS. Click on the first "Plus Sign" (new file) and name the file "index.html." Repeat the process, clicking the "Plus Sign" again, and name the second file "style.css."

Now is your turn! Remember: "Practice makes perfect"!

Worning: Do not copy & paste the above code. Type it in to practice. Please Do Not Copy & Paste the above code as it will not display. Please type in the above code to practice.