diff --git a/IMC_WebDev/CSS Blog Final.pdf b/IMC_WebDev/CSS Blog Final.pdf new file mode 100644 index 0000000..5af8c00 Binary files /dev/null and b/IMC_WebDev/CSS Blog Final.pdf differ diff --git a/IMC_WebDev/FinalBlog.md b/IMC_WebDev/FinalBlog.md new file mode 100644 index 0000000..e12d08b --- /dev/null +++ b/IMC_WebDev/FinalBlog.md @@ -0,0 +1,224 @@ +## Building a Mini City: HTML and CSS Portion +## Purpose +HTML and CSS are extremely important parts of learning about how websites work. Every website uses HTML to display content such as text or images. Being able to grasp a few concepts of HTML and CSS can help a lot when it comes to learning more intricate subjects in computer science, so it's important to get some experience with it! + +This tutorial will give you a walkthrough on how certain functions of HTML work and why they are important, all while learning how to build a cool mini-city! + +## Setup +Open any HTML/CSS editor. [This browser-based editor is good to use](https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default). +Follow along with this tutorial, and you will be one step closer to building your first mini-city! + +## Walkthrough + +This tutorial will go over the HTML and CSS portion of the mini-city. You can think of HTML as the foundation of the entire project. If we work to build a strong foundation, our mini-city will look fantastic! + +Our first step when using HTML is to establish a “!DOCTYPE html” function. This simply means that all of our code below this will be rendered as an HTML document. +So, your first line should look like this: +```html + +``` + +Got it? Great! + +Next, we have to actually create our HTML tag. Tags are essentially commands that tell our editor what type of HTML we are writing. This just means that we are beginning to write our HTML code, but first we must actually tell our computer that we will be writing in HTML. To do this, simply type <html> on your second line. Your code should look like this so far: +```html + + +``` + +Now that we have established the fact that we will be writing in HTML, it’s time to get into the fun stuff. We start by writing <head> in our third line of code. This tells our editor that the information for our header will be stored here. + +After we write our <head> tag, we know that we should give our project a title. Let’s title our project “My Mini City.” This is how your code should look now: +```html + + + + My Mini City +``` +You may notice that there is a </title> tag after our title’s name. This is called a closing tag. Closing tags have a “/” before they state which tag they are closing. This just tells our editor that we are no longer editing this tag. + +To create our body section, simply type body on your next line. + +Now, let’s make our classes! Let’s think about what we want our city to look like. +We know that we want the following objects in our city: +The ground +A skyscraper +A smaller building +A road +A bridge +An ocean +A waterfall +A car + +We have to make classes for these objects so that we can create them later on. Classes are simply declarations that we use to establish the fact that we are going to create an object. Then, we can actually create it in CSS! + +We create classes using the <div> tag. Like this: +```html + +
+``` +As you can see, we just created a class called “ground.” Now our editor knows that we are planning to create an object. + +We do the same thing with all of our other objects. When you are done, it should look something like this: +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+ + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+ +``` + +This looks like a huge chunk of code right now, but let’s break it down! + +HTML works as the canvas for all of our objects, so for every object in our city, we create a div class for it. Once we do that, we can edit those divs using our CSS, which is like our paint! It allows us to control how the objects appear on the site, like color, layout, etc. + +Sometimes, objects have “children." For example, since our buildings are placed on the ground, the buildings are the “children” of the ground. +You can see that “building1” is placed within the “ground” tag in our code. + +Our “building1” also has children of its own. Since walls and a roof are components of our building, we place them inside our <building1> tag. We repeat this whenever components belong to each other. (You can also see this with the grass area and trees.) + +After we create all of our objects and their “children,” it is time to close our body and our html tag by using /body and /html. + +When it’s time to design our objects in CSS, we MUST use the exact name we created for them in our HTML. For example, if I want to change the color of the bridge in my city, I need to name it “bridge” in my CSS, just like how it is in my HTML. + +Next, let’s prepare our editor for the CSS portion of the code. We do this by establishing a style tag. Since we will be using CSS, our style tag will look like this: +```html + + + + Mini City Webinar + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+ + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+ + +