You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+78-78Lines changed: 78 additions & 78 deletions
Original file line number
Diff line number
Diff line change
@@ -25,57 +25,57 @@ On a computer. Here.
25
25
Because this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve.
So the first thing you'll need is an editor to edit your jazz. There's tons of options out there.
73
73
74
-
- Notepad (that's right, the stupid thing that comes on your PC) - This is about as basic as you can get. It's totally okay if you want to use this, but I recommend one of the editors below just so you can see code highlighting (which will help you out later on). But, if you want to be a purist, this'll work just fine.
75
-
-[Aptana Studio 3](http://aptana.com/) - This is what I typically use. It's fairly easy to navigate, you create projects in it and it supports standard web projects, PHP, and Ruby. If you're a beginner that probably means nothing to you. Anyway, a decent choice.
76
-
-[Sublime Text 2](http://www.sublimetext.com/2) - This is a pretty popular option, and for good reason. Very clean interface. Once you can navigate it (learning curve isn't that big), it's pretty dreamy. Like your face.
77
-
-[Notepad++](http://notepad-plus-plus.org/) - This is just one step up from Notepad. But it's pretty dece. Code highlighting is in it, and nothing else too fancy, which is what I like about it.
78
-
-[IDEcoder](http://icecoder.net/) - this is an in-browser code editor, which lets you code directly within the web browser, online or offline, it means you only need one program (your browser) to develop websites, which is cool
74
+
* Notepad (that's right, the stupid thing that comes on your PC) - This is about as basic as you can get. It's totally okay if you want to use this, but I recommend one of the editors below just so you can see code highlighting (which will help you out later on). But, if you want to be a purist, this'll work just fine.
75
+
*[Aptana Studio 3](http://aptana.com/) - This is what I typically use. It's fairly easy to navigate, you create projects in it and it supports standard web projects, PHP, and Ruby. If you're a beginner that probably means nothing to you. Anyway, a decent choice.
76
+
*[Sublime Text 2](http://www.sublimetext.com/2) - This is a pretty popular option, and for good reason. Very clean interface. Once you can navigate it (learning curve isn't that big), it's pretty dreamy. Like your face.
77
+
*[Notepad++](http://notepad-plus-plus.org/) - This is just one step up from Notepad. But it's pretty dece. Code highlighting is in it, and nothing else too fancy, which is what I like about it.
78
+
*[IDEcoder](http://icecoder.net/) - this is an in-browser code editor, which lets you code directly within the web browser, online or offline, it means you only need one program (your browser) to develop websites, which is cool
79
79
80
80
There's a bunch of others [listed here](http://en.wikipedia.org/wiki/List_of_HTML_editors), I just listed the ones I've used and liked!
81
81
@@ -103,9 +103,9 @@ The opening and closing tags together are an *element* (which also includes ever
103
103
104
104
Tags organize your page and tell the browser what your page consists of. There's tons of tags out there, some that you may never use.
105
105
Here's some lists of tags if you really care to see all of them at this point:
106
-
-[HTML Dog Tag List](http://www.htmldog.com/reference/htmltags/)
107
-
-[W3Schools Tag List](http://www.w3schools.com/tags/default.asp)
108
-
-[Quackit HTML Tag List](http://www.quackit.com/html/tags/)
106
+
*[HTML Dog Tag List](http://www.htmldog.com/reference/htmltags/)
107
+
*[W3Schools Tag List](http://www.w3schools.com/tags/default.asp)
108
+
*[Quackit HTML Tag List](http://www.quackit.com/html/tags/)
109
109
110
110
So, if you look at our example, you can also put tags inside other tags (like we did with the `<title>` tags inside the `<head>` tags). This is called *nesting* elements.
111
111
In this case, we would say that the `<head>`*contains* the `<title>`. Sometimes when you have a lot of nested tags, it's hard to keep track, so you have to format your code with spacing, as shown. Typically, inner tags are spaced more than their outer tags (just as `<title>` is indented further than `<head>`).
@@ -305,10 +305,10 @@ Now HEX colors is very similar. It consists of the hashtag sign `#`, and then 6
305
305
306
306
Don't worry, you won't have to come up with RGB and HEX colors yourself. There's plenty of websites and programs and color pickers out there to help you with that. Here's a few:
307
307
308
-
-[Color Picker](http://www.colorpicker.com/)
309
-
-[HTML color codes and names](http://www.computerhope.com/htmcolor.htm)
310
-
-[HTML Color Codes](http://html-color-codes.info/)
311
-
-[HTML Color Picker](http://www.w3schools.com/tags/ref_colorpicker.asp)
308
+
*[Color Picker](http://www.colorpicker.com/)
309
+
*[HTML color codes and names](http://www.computerhope.com/htmcolor.htm)
310
+
*[HTML Color Codes](http://html-color-codes.info/)
311
+
*[HTML Color Picker](http://www.w3schools.com/tags/ref_colorpicker.asp)
312
312
313
313
Try adding colors to various tags on the page! You can make your `<h1>` the color `#005DFC`, your `<h3>` tag `rgb(242,127,56)`, and your `<p>` tag `lightblue`. Keep playing til you're happy.
314
314
@@ -412,25 +412,25 @@ So, on a website, this metadata is used by search engines, your browser, and oth
412
412
There are 4 important uses for the `<meta>` tag. There are plenty of other uses, but let's be honest, I don't care about them right now, and I don't think you do either.
413
413
Open up the **4 - Head** (heh get it? Forehead? I crack myself up.) folder, and open cooking.html in your favorite editor.
414
414
415
-
-*Defining keywords for search engines.* Let's say that you have a website that's about cooking, hence our filename. You want people searching for your website to be able to find it. So, you can add the following right before the `<title>` tag:
415
+
**Defining keywords for search engines.* Let's say that you have a website that's about cooking, hence our filename. You want people searching for your website to be able to find it. So, you can add the following right before the `<title>` tag:
Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice!
420
420
421
-
-*Defining a description of your site.* Again, this one is for the search engines. Whenever you search for a website, there's a tiny description in the search results. Go search for anything right now, and you'll see it. So, you can define what that is with this snippet:
421
+
**Defining a description of your site.* Again, this one is for the search engines. Whenever you search for a website, there's a tiny description in the search results. Go search for anything right now, and you'll see it. So, you can define what that is with this snippet:
422
422
423
423
`<meta name="description" content="The best cooking website in the entire universe. You're welcome.">`
424
424
425
425
Add this right after the keywords line in cooking.html. Now if people were searching for this, they'd get this description and instantly see that your website is the best cooking website in the universe.
426
426
427
-
-*Defining the author of a website.* Let's say that someone's looking for the author of your website, because your writing style is sexy. Or something. You can let them know who you are with the following:
427
+
**Defining the author of a website.* Let's say that someone's looking for the author of your website, because your writing style is sexy. Or something. You can let them know who you are with the following:
Add this after your description line, and stick your name in it! I think I got it as close as possible.
432
432
433
-
-*Refreshing your document every 30 seconds.* This one is for your browser. Let's say that you have comments available on your recipes, and you want to have the page refresh so the comments can appear "live". Just add this:
433
+
**Refreshing your document every 30 seconds.* This one is for your browser. Let's say that you have comments available on your recipes, and you want to have the page refresh so the comments can appear "live". Just add this:
434
434
435
435
`<meta http-equiv="refresh" content="30">`
436
436
@@ -815,9 +815,9 @@ Incoming, the `position` property.
815
815
The `position` property is pretty much exactly what one would expect a positioning property to do: It positions things.
816
816
817
817
It can have several states, but we'll focus on the 3 states you'll probably use most: `absolute`, `relative`, and `fixed` (the default state is `static`, but you will rarely need to work with this).
818
-
* In `absolute` positioning, the selected element will be placed in an exact location on the page, and moves with the page. So, in our example, the header could be placed at the top of the page and the footer at the bottom, but when you scroll, they will move with the page and they won't stay where they are supposed to. Some people like this, some don't. In our case, we won't use this.
819
-
* In `relative` positioning, the selected element will be placed *relative* (fancy that) to its default position. I'll show you an example of this later.
820
-
* Now, `fixed` positioning is just like `absolute` positioning, except that once an element is placed in an exact location on the page, it is stuck there. A similar example is like a watermark on a video. It stays the same there, no matter what the content is.
818
+
* In `absolute` positioning, the selected element will be placed in an exact location on the page, and moves with the page. So, in our example, the header could be placed at the top of the page and the footer at the bottom, but when you scroll, they will move with the page and they won't stay where they are supposed to. Some people like this, some don't. In our case, we won't use this.
819
+
* In `relative` positioning, the selected element will be placed *relative* (fancy that) to its default position. I'll show you an example of this later.
820
+
* Now, `fixed` positioning is just like `absolute` positioning, except that once an element is placed in an exact location on the page, it is stuck there. A similar example is like a watermark on a video. It stays the same there, no matter what the content is.
821
821
822
822
How do we actually position things after you use `position`? You can use `top`, `bottom`, `left`, and `right` to place it.
823
823
So, for example, if you want a header bar to be at the top of the page (but it's okay if it scrolls with the page), you'll have `position: absolute;` and `top: 0px;` because you want it to be 0 pixels from the top.
@@ -947,20 +947,20 @@ There is a way to fix this.
947
947
948
948
So, instead of adding space to margins and padding on all four sides, you can add them just to the top, bottom, left, and/or right. There's a few ways to do this:
949
949
950
-
-`margin: 5px 10px 15px 0px;`
951
-
- top margin is 5px
952
-
- right margin is 10px
953
-
- bottom margin is 15px
954
-
- left margin is 0px
955
-
-`margin: 15px 0px 5px;`
956
-
- top margin is 15px
957
-
- right and left margins are 0px
958
-
- bottom margin is 5px
959
-
-`margin: 5px 10px;`
960
-
- top and bottom margins are 5px
961
-
- right and left margins are 10px
962
-
-`margin: 15px;`
963
-
- all four margins are 15px
950
+
*`margin: 5px 10px 15px 0px;`
951
+
* top margin is 5px
952
+
* right margin is 10px
953
+
* bottom margin is 15px
954
+
* left margin is 0px
955
+
*`margin: 15px 0px 5px;`
956
+
* top margin is 15px
957
+
* right and left margins are 0px
958
+
* bottom margin is 5px
959
+
*`margin: 5px 10px;`
960
+
* top and bottom margins are 5px
961
+
* right and left margins are 10px
962
+
*`margin: 15px;`
963
+
* all four margins are 15px
964
964
965
965
The same goes for `padding`, you can also do `padding: 5px 10px 15px 0px;`, etc. for all of the properties above. We're going to make some changes to both the `.header` and the `.menu` here:
966
966
@@ -1030,8 +1030,8 @@ The content would overlap on top of the header (because we just HAD to make our
1030
1030
1031
1031
So, let's add some `z-index` magic to our page! A couple things to note first:
1032
1032
1033
-
-`z-index` only works when you have already set the `position` of an element.
1034
-
- You can assign any number you want to `z-index`, as long as it is an integer (no decimals), and as long as the highest number is the highest level, and the lowest number is the lowest level.
1033
+
*`z-index` only works when you have already set the `position` of an element.
1034
+
* You can assign any number you want to `z-index`, as long as it is an integer (no decimals), and as long as the highest number is the highest level, and the lowest number is the lowest level.
1035
1035
1036
1036
Okay, I'm going to add some `z-index` properties to the page, and I'm also going to add some text changes that you have seen before (`text-align`, `font-family`) and one that you haven't seen before (`font-size`... you get one guess to figure out what this does):
1037
1037
@@ -1184,10 +1184,10 @@ CSS3 has a bunch of new features too. From new selectors to fancy text effects
1184
1184
1185
1185
If you want to read more about HTML5 and CSS3, check out some of the links below. If you feel like you've mastered the materials you learned here, you're probably ready to start diving in further!
0 commit comments