From ca29ec84fa29cb11e1af78dbe4f6c04a4c1446bd Mon Sep 17 00:00:00 2001 From: Shrimadhav U K Date: Sat, 14 May 2016 16:57:48 +0530 Subject: [PATCH 01/11] spelling mistake in IDE changed to ICE --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 77d1b74..782dac1 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ So the first thing you'll need is an editor to edit your jazz. There's tons of * [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. * [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. * [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. - * [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 + * [ICEcoder](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 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! From a23d1456947c22a67d70a790ba22368ae30ffd2d Mon Sep 17 00:00:00 2001 From: Santiago Castro Date: Mon, 17 Apr 2017 05:50:30 -0300 Subject: [PATCH 02/11] Fix broken Markdown headings --- README.md | 92 +++++++++++++++++++++++++++---------------------------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 77d1b74..11b62d3 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,30 @@ HTML+CSS Tutorial ================= -###Who +### Who I'm Cassidy. I'm software engineer & developer evangelist at [Clarifai](http://clarifai.com), and I've been teaching myself HTML, CSS, and other web programming and scripting for over 10 years. And I want to teach you now. Because you're good looking. And because it's useful. -###What +### What In this tutorial, we'll start from the very beginning. You don't need to know anything about HTML and CSS or anything about code to start. I'll include some tutorial files for you to play with and check out. -###When +### When Now. Or whenever. I'm not planning on taking this down anytime soon. But you are only limited by your own schedule. Or set free by it. Whatever. -###Where +### Where On a computer. Here. -###Why +### Why 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. -##Table of Contents +## Table of Contents * [HTML](https://github.com/cassidoo/HTML-CSS-Tutorial#html-time-lets-go) * Editors * Tag Structure @@ -65,9 +65,9 @@ Because this stuff is important. Whether you're a business person formatting yo * [Final Project!](https://github.com/cassidoo/HTML-CSS-Tutorial#final-project) * And now, the end is near -##HTML Time. Let's Go. +## HTML Time. Let's Go. -###Editors +### Editors So the first thing you'll need is an editor to edit your jazz. There's tons of options out there. @@ -79,7 +79,7 @@ So the first thing you'll need is an editor to edit your jazz. There's tons of 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! -###HTML Tag Structure +### HTML Tag Structure Here is a barebones HTML page, about as simple as you can get. You can open it up in the **1 - Structure** folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you'll see a plain webpage with the title "My Website" and the words, "Hello, World!" written on the page. @@ -118,7 +118,7 @@ Inside ``, there are two elements: ``and ``. Contained in ``. Everything visible to the user is contained in these tags. Right now, all that consists of is "Hello, World!" Let's change that for fun. Replace "Hello, World!" with your own text in your favorite HTML editor, and then open the page in your browser. Neat! -###Structuring text +### Structuring text Let's get juicy. We're going to talk about some new tags for structuring your text. Because you're not going to want just one style of text throughout your whole website, right? @@ -132,7 +132,7 @@ Next, we have `

` tags. `

` adds a *paragraph* of text to our website, whic And finally, we have `

    `. `
      ` means a bulleted list (also known as an *unordered list*), where every `
    • ` is an item in that list (called a *list item*). But what if you want a numbered list? You could change `
        ` to `
          ` (and don't forget its closing tag), it's that simple! `
            ` is an *ordered list*, which has numbers instead of bullet points, and that is truly the only difference. Add some list items (`
          1. `) to the list (make sure you stay inside the `
              ` tags), and then change your `
                ` tags to `
                  `! -###Links +### Links Links are what makes the world/Internet go 'round. Seriously. So, let's learn about them. @@ -155,7 +155,7 @@ So, anyway, the attribute 'href' tells us where the link is going to go when the Also, one thing you should note: Links don't have to be in `

                  ` tags like I put above. You could put them in `

                1. ` tags in a list, `

                  ` tags for a linking header, or completely on their own! -####Adding links to other pages in your website +#### Adding links to other pages in your website Let's just say you have a fully functioning website called fakewebsite.com. You have your homepage and your "Contact Us" page in the same directory or folder. Normally when a beginner links to different pages on their website, they just make links that look like `Home` and `Contact Us`. @@ -170,11 +170,11 @@ Paste this line of code into page1.html. Watch the magic happen. Now, if you were to change your domain or location of your files, you don't have to change a thing. Boo yah. -###Other tags +### Other tags So, you can reference the links that I showed you before if you want to check out some jazzy stuff you can do with your page. There are some other ones though that you might want to see before we move on to cooler and bigger things. -####Images +#### Images ``. Let's just say you want to put an image on your website. This is probably a good tag to know. Add the following to page1.html: @@ -188,7 +188,7 @@ One attribute that might be good for you to remember for `` tags is the `al When you load the page in the browser, the image looks the same. But, if you roll your mouse over the image, you'll see some words appear! WOW. That's the `alt` attribute. It stands for the *alternate text* for an image, and it's used when a user can't view the image for whatever reason (using a screen reader, slow connection, error in the `src` attribute, etc.). Or, in the case of [XKCD](http://xkcd.com/), it's used to add more humor to the page (roll your mouse over all of the comics on the site, they always add another joke or two that a lot of people don't know about). -####Line breaks +#### Line breaks Let's just say you want to keep all your content in one paragraph `

                  `, but you still want to break it up. That's easy. @@ -200,7 +200,7 @@ So, there's two special tags here, `

                  ` and `
                  `. They are *empty tags*, me Try inserting these in between some of your `

                  ` tags to try it out! -####Tables +#### Tables Tables are really cool. They can also be a bit confusing. Open up tables.html (in the **2 - Tags** folder) in a browser to check out the example table I made for you there. There's several tags for tables, but the essential ones are ``, ``, `` and ``, which is for a *table row*. Easy peasy. So, let's add 3 `` tags to our table. -
                  `, and ``. Look at tables.html in your editor. @@ -281,13 +281,13 @@ One other fun thing you can try playing with are the `colspan` and `rowspan` att You can also nest tables, but I won't get into that right now. If you want to play around with the code, try adding some `
                  ` tags inside your current `` tags. MaGiCal ThInGs. -###Making Things Gorgeous The Wrong Way +### Making Things Gorgeous The Wrong Way So, your website right now looks pretty bland, and that's normal. But, we want a website that is hot, sexy, ravishing, and powerful. Yes, that's right, we want a website just like you. So first, I will show you the wrong way to style your pages. You might ask why, but trust me, if you learn in this order, you'll understand HTML attributes a lot better, and then when you move on to CSS your mind will explode with joy. Explode. -####Colors +#### Colors Alrighty. Let's get frisky. Open up the **3 - Styles** folder and the file style1.html. You might notice that this file is pretty bland right now, but that's what we're gonna fix. Be patient, my grasshopper. @@ -314,7 +314,7 @@ Try adding colors to various tags on the page! You can make your `

                  ` the col Now, you might see the syntax in your HTML journey where you actually have the `color` attribute, like `

                  wut

                  `. Though this is technically allowed, please don't do this. Please. You'll be so much happier in the long run, I promise. -####Width and Height +#### Width and Height So, what if you want to make a picture or a paragraph a different size? Easy peasy. @@ -347,7 +347,7 @@ If you have more than one property that you want to style, for example both heig Why is the syntax this funky? Well, that's because it's secretly CSS syntax. But we'll get into that more later. -####Borders +#### Borders What if we have a paragraph IN A BOX. That's right. Kind of like a table. But not. That'd be cool. Of course, there are plenty of other things that can have a border. Buttons (we'll get to those later), color blocks (also later), and images, and MORE can have them. Mmmhm. @@ -379,7 +379,7 @@ Let's mix it up a bit with different borders for you to check out. I'm just goi Notice how I added `width` and `height` to a couple of them. We're getting incestuous with our stylings. Aww yeah. -####Text Styles +#### Text Styles Besides having header tags and colors, there are other text styles that you can use. What if you want bold text, or italics? Different sizes? Once again, the `style` attribute comes to the rescue. @@ -398,7 +398,7 @@ Browser time. You've now got some text in the font Arial, and it's italic! WOO The properties we used here are `font-family` and `font-style`. For the former, you can choose a lot of fonts, but you have to be careful. Not every computer has the same fonts. This is just my personal opinion: don't put something here besides Arial unless you've done some JavaScript magic. And because I'm assuming you don't know JavaScript, don't use this unless you're changing this to Arial. At least not yet. :) And for `font-style`, it can be `normal`, `oblique`, and `italic`. You can play with those now, it's pretty straightforward. -###The `` Tag +### The `` Tag Before we start going insane with how good you are at HTML, let's start looking at something that you haven't played with yet. The `` tag. @@ -436,13 +436,13 @@ Add this after your description line, and stick your name in it! I think I got And there you have it, a self-refreshing webpage. You're so good at this. -###Putting it all together so far +### Putting it all together so far Okay, you have a pretty solid understanding of stuff so far. I want you to take cooking.html, and make it shine. Resize the images so the page is more uniform. Add borders to them. Change the font styles and weights. Change the colors. Add some keywords in the metadata and change the title of the page. Using the information I've given you so far, you can make a pretty good looking site! -##CSS is magical, and now you're gonna learn it. +## CSS is magical, and now you're gonna learn it. So far, we've been making things pretty the wrong way. So, we're going to learn it the right way. So excited. @@ -508,11 +508,11 @@ You will always have your CSS in the syntax, `selector { property: value; proper Try playing around with the CSS we have right now. Edit the colors, add some borders, change the font styles. Don't forget your semicolons! -###Classes and IDs and other Segregation +### Classes and IDs and other Segregation So, you have some of the CSS basics down already. You're so smart. It's really a simple language, once you know the basic syntax. So, now we'll get into more fancy stuff. What if you want to edit several tags differently? -####Classes +#### Classes Let's say that we have 8 `

                  ` tags on our HTML page (hint: open style3.html in the **3 - Styles** folder). If we want to style each of these tags differently, we can use *classes*. A class is actually an HTML attribute that you can name whatever you want. @@ -551,7 +551,7 @@ Gosh you're good at this. Go eat a cookie. [Pausing here for cookie break] -####IDs +#### IDs Now, let's talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the `id` attribute like so: @@ -566,11 +566,11 @@ When you want to style your IDs, you put a hashtag `#` before it in your CSS, li Remember: You can only use an ID once. IDs are more helpful when you're controlling the element with JavaScript, not styling, but that's something for another day. -####Other Segregation +#### Other Segregation Let's say that you want to separate individual text in your paragraphs or sections on your page. Let's introduce 2 new tags: `` and `

                  `. -#####The `` tag +##### The `` tag The `` tag is pretty invisible unless you style it. It's used to group *inline-elements* (so like a word in a paragraph), and it doesn't actually do anything unless you style or manipulate it with something else. So, let's say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes ``. For example: @@ -600,7 +600,7 @@ Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell y Make sense? I hope so. To sum up: `` tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next. -#####The `
                  ` tag +##### The `
                  ` tag Alrighty. Go enjoy a beach vacation and then come back to this. @@ -700,7 +700,7 @@ Makes sense? I hope so. You're hot. Okay, so if you open `homepage.html` in the browser, you see nothing. That's okay. Let's change that by learning a few new CSS properties! -######Background color +###### Background color One property that you will learn to know and love is `background-color`. It does exactly what you would expect it to: it sets the background color of the element it is styling! @@ -742,7 +742,7 @@ Let's add some backgrounds. Save in your editor and now refresh in that browser! WOW. COLOR. Now, our site definitely isn't perfect yet. Let's throw some MORE new CSS properties at you! -######Floating +###### Floating One property that you will probably use fairly often is `float`. This is one of those properties that you will learn to both love and hate. It's kind of magical. @@ -810,7 +810,7 @@ Let's make it so that your header and footer are always on the top and bottom of Incoming, the `position` property. -######Positioning +###### Positioning The `position` property is pretty much exactly what one would expect a positioning property to do: It positions things. @@ -873,7 +873,7 @@ Why the heck is that happening? I'll tell you. -######Margins and Padding +###### Margins and Padding ![Alt](cpbm.jpg) @@ -1012,7 +1012,7 @@ The same goes for `padding`, you can also do `padding: 5px 10px 15px 0px;`, etc. Now, with all that you've learned so far, you should probably make this a really great, functional website. I'll teach you just one more thing, and then I'll set you free like a bird or something. -######Z-Index +###### Z-Index The property `z-index` isn't one that you'll run into super often, but it's something that will help you in the long run. @@ -1098,12 +1098,12 @@ But hey, that's a LOT of reusing code. Plus what if someone is trying to read y Duh. -###The `` Tag, Comments, and other Developer Joys +### The `` Tag, Comments, and other Developer Joys Let's just say you want to reuse your styles across your website on every page. It makes sense. It'd be kind of annoying to have drastic changes on every page. -####The `` tag +#### The `` tag That's where the `` tag comes in! The `` tag is an empty tag (like
                  and ), so it has no end tag, and it's used to link to external stylesheets! @@ -1122,7 +1122,7 @@ And finally, `href`. You remember this one, I hope! It's just like our `` t Let's check out this `` tag in action. Open up the **6 - Linking** folder and open home.html, and paste the `` line above on the line below the `` tags in the `<head>`. Voila! That's it. Refresh your browser and check out the magic. It should look just like what we made in the previous section! Now, if you open the main.css file in your editor, you'll see that it's all the CSS you recognize and love, but there's no `<style>` tags. Those tags aren't needed when you are using a CSS file! -####Commenting +#### Commenting Let's just say that you want to show off your code to someone, but they're not exactly sure what you're doing. @@ -1130,7 +1130,7 @@ You can add comments! *Comments* in your code are blocks of text that will not be read by the computer. Every computer language has them. -#####HTML Comments +##### HTML Comments In HTML, a comment looks like this: @@ -1140,7 +1140,7 @@ As you can see, it almost looks like a regular tag, with an opening `<!--` and a Look inside the **7 - Project** folder, and open index.html. You'll see a few comments there. Notice how you can put them all on one line, or in a multi-line block! As long as you have a beginning `<!--` and end `-->`, you have total freedom with comments. -#####CSS Comments +##### CSS Comments Don't worry, you can comment your CSS too! @@ -1155,12 +1155,12 @@ And again, you can have single-line comments, and multi-line ones too. Comments are great for keeping track of what you're doing, especially if a project you're working on spans over a period of time. You can make notes for yourself to check later, or you could just tell someone who is reading your code that they are attractive. -####Other Developer Joys +#### Other Developer Joys There's so many things that could go in this section for such a generic title. So, what am I going to tell you? Well, I'm going to tell you what I *haven't* taught you so far. -#####Forms +##### Forms A common thing you'll see on websites are forms, like textboxes, buttons, and checkboxes. I didn't teach you these because you can't do things with them unless you know a bit more than beginner knowledge, which isn't the purpose of this tutorial. @@ -1172,7 +1172,7 @@ If you're really dying to see a button, here you go: And there you have it, a button on your website! If you actually want to know how to make the button or form do something, you'll need to know some JavaScript. Until you do, here's more information on buttons: [W3Schools - HTML Forms](http://www.w3schools.com/tags/tag_form.asp) -#####HTML5 and CSS3 +##### HTML5 and CSS3 If you've read anything about the internet and developing for it, you've probably heard some key words thrown around, and a couple of those key words are HTML5 and CSS3. What are those, actually? Well, HTML5 is the latest standard for HTML. The previous HTML version came out in 1999, which is quite a while ago. Unless you're time traveling right now and you printed this out to read as you go. @@ -1189,13 +1189,13 @@ If you want to read more about HTML5 and CSS3, check out some of the links below * [HTML5 Rocks](http://www.html5rocks.com/) * [Dive Into HTML5](http://diveintohtml5.info/) -#####How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...) +##### How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...) Honestly I have nothing to put here I just like the joke that HTML stands for that. I hope your HTML is spick and `<span>`. Heh. -##Final Project! +## Final Project! Alrighty! So you've looked at the **7 - Project** folder a bit, but I haven't told you what that folder is for yet. @@ -1219,7 +1219,7 @@ The best way to learn is by doing. Do as much as you can until you think you ha And if you need help you can always come back and visit. :) -##And now, the end is near +## And now, the end is near Actually, now the end is here. From 40371fa99147dfed5c0c251d71ecada5d35aaceb Mon Sep 17 00:00:00 2001 From: Cassidy Williams <cassidoo@users.noreply.github.com> Date: Tue, 23 May 2017 13:08:24 -0700 Subject: [PATCH 03/11] Update editors and spacing --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a0d7578..1f9d0f1 100644 --- a/README.md +++ b/README.md @@ -72,10 +72,11 @@ Because this stuff is important. Whether you're a business person formatting yo So the first thing you'll need is an editor to edit your jazz. There's tons of options out there. * 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. - * [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. + * [Atom](https://atom.io/) - This is what I typically use. It's very customizable with a huge plugin library and open source so it's always being improved. * [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. - * [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. - * [ICEcoder](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 + * [CodePen Projects](http://codepen.io/projects/) - this is an in-browser code editor, so you can code directly within the web browser, no downloads required. :) + * [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. + * [Aptana Studio 3](http://aptana.com/) - 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. 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! From 5e31127f130824604bf0da796fc33ca761d51c98 Mon Sep 17 00:00:00 2001 From: Cassidy Williams <cassidoo@users.noreply.github.com> Date: Tue, 23 May 2017 13:09:06 -0700 Subject: [PATCH 04/11] Update my bio --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1f9d0f1..79a9788 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ HTML+CSS Tutorial ### Who -I'm Cassidy. I'm software engineer & developer evangelist at [Clarifai](http://clarifai.com), and I've been teaching myself HTML, CSS, and other web programming and scripting for over 10 years. +I'm Cassidy. I'm a senior software engineer and I've been teaching myself HTML, CSS, and other web development and scripting for over 10 years. And I want to teach you now. Because you're good looking. And because it's useful. From 76cd090da07d0a04845ca8fe8402628cac87e13c Mon Sep 17 00:00:00 2001 From: d0dders <dodders@outlook.com> Date: Tue, 3 Sep 2019 22:39:32 +0100 Subject: [PATCH 05/11] Fix Color Picker Link Updated the W3 HTML Color Picker link as the previous link was no longer valid and generating a 404 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 79a9788..67389d0 100644 --- a/README.md +++ b/README.md @@ -309,7 +309,7 @@ Don't worry, you won't have to come up with RGB and HEX colors yourself. There' * [Color Picker](http://www.colorpicker.com/) * [HTML color codes and names](http://www.computerhope.com/htmcolor.htm) * [HTML Color Codes](http://html-color-codes.info/) - * [HTML Color Picker](http://www.w3schools.com/tags/ref_colorpicker.asp) + * [HTML Color Picker](http://www.w3schools.com/colors/colors_picker.asp) 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. From ac75978bbd545c878f60363fa1d4926cdec7b31c Mon Sep 17 00:00:00 2001 From: Cassidy Williams <cassidoo@users.noreply.github.com> Date: Sat, 13 Jun 2020 17:33:38 -0700 Subject: [PATCH 06/11] Remove old links, update syntax highlighting in code samples --- README.md | 1071 +++++++++++++++++++++++++++-------------------------- 1 file changed, 540 insertions(+), 531 deletions(-) diff --git a/README.md b/README.md index 67389d0..e65848a 100644 --- a/README.md +++ b/README.md @@ -71,12 +71,13 @@ Because this stuff is important. Whether you're a business person formatting yo So the first thing you'll need is an editor to edit your jazz. There's tons of options out there. - * 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. - * [Atom](https://atom.io/) - This is what I typically use. It's very customizable with a huge plugin library and open source so it's always being improved. - * [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. - * [CodePen Projects](http://codepen.io/projects/) - this is an in-browser code editor, so you can code directly within the web browser, no downloads required. :) - * [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. - * [Aptana Studio 3](http://aptana.com/) - 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. + * Notepad/TextEdit (that's right, the stupid thing that comes on your computer) - 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. + * [Visual Studio Code](https://code.visualstudio.com/) - This is what I typically use. It's open source and has TONS of extensions available. + * [Atom](https://atom.io/) - This is another very customizable option, with a huge plugin library and open source so it's always being improved. + * [Sublime Text 3](https://www.sublimetext.com/3) - 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. + * [CodePen Projects](http://codepen.io/projects/) - This is an in-browser code editor, so you can code directly within the web browser, no downloads required. :) + * [Glitch](https://glitch.com/) - This is another in-browser code editor. It is meant for larger projects, but it's nice to not have to download anything! + * [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. 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! @@ -84,17 +85,19 @@ There's a bunch of others [listed here](http://en.wikipedia.org/wiki/List_of_HTM Here is a barebones HTML page, about as simple as you can get. You can open it up in the **1 - Structure** folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you'll see a plain webpage with the title "My Website" and the words, "Hello, World!" written on the page. - <!doctype html> - <html> - <head> - <title> - My Website - - - - Hello, World! - - +```html + + + + + My Website + + + + Hello, World! + + +``` So, what are we looking at here? HTML, short for *HyperText Markup Language*, consists of these things called tags, which are words written between `<` and `>` characters, like ``. All tags (with just a few exceptions that we'll talk about later) have a matching closing tag, which has the same name as the opening tag, except that it contains `/` after the first `<`, like ``. @@ -141,14 +144,18 @@ Links are made with the `` tag, which stands for *anchor*. Open up the **2 - Tags** folder, and add this piece of code right after your heading in page1.html: -

                  This paragraph has a totally awesome link.

                  - +```html +

                  This paragraph has a totally awesome link.

                  +``` + Open page1.html in a browser and click on it! BEAUTIFUL. Okay, so let's take a look at this. First of all, you can see the `` tag there contained in the paragraph. Beautiful. But what's that funky milk `href=`? Well, that syntax called an *attribute*. Attributes change the way a tag works, and are not visible to the website's user. You only add attributes to the opening tag, not a closing tag. Tags can have multiple attributes, for example: - Content of tag` +```html +Content of tag` +``` Got it? Good. You're so good looking. @@ -165,8 +172,10 @@ This is okay. BUT, you can do better. So, what if you change your domain name When you make a link to a page within your own directory or folder on your website, instead of putting in the whole URL, put in something more like this: - Click here to go back to Page 2. - +```html +Click here to go back to Page 2. +``` + Paste this line of code into page1.html. Watch the magic happen. Now, if you were to change your domain or location of your files, you don't have to change a thing. Boo yah. @@ -179,13 +188,17 @@ So, you can reference the links that I showed you before if you want to check ou ``. Let's just say you want to put an image on your website. This is probably a good tag to know. Add the following to page1.html: - - +```html + +``` + Open up the page in a browser. WHOA. Image! So, the `` tag is one of those special tags. First of all, it doesn't have a closing tag. You just stick in a `/` at the end of the one tag and you're done. Secondly, it also has a `src` attribute (which is short for *source*), and in the value of that attribute you put the URL of the image (similar to `href` in the anchor tag). One attribute that might be good for you to remember for `` tags is the `alt` attribute. If you changed the code above to: - I could have danced all night +```html +I could have danced all night +``` When you load the page in the browser, the image looks the same. But, if you roll your mouse over the image, you'll see some words appear! WOW. That's the `alt` attribute. It stands for the *alternate text* for an image, and it's used when a user can't view the image for whatever reason (using a screen reader, slow connection, error in the `src` attribute, etc.). Or, in the case of [XKCD](http://xkcd.com/), it's used to add more humor to the page (roll your mouse over all of the comics on the site, they always add another joke or two that a lot of people don't know about). @@ -212,69 +225,77 @@ So, to create a table, you start with the `` tag. Simple enough. This will contain all the parts of your table. Sometimes, tables have a `border` attribute that will equal some value for the thickness of the table's border (it's proper to have just "1" or nothing, for reasons we'll explain later). Go ahead and add one so it looks like this: -
                  -
                  - +```html + +
                  +``` + Boom. Let's add some more. The next tag we're gonna check out is `

                  - - - - - - -
                  - +```html + + + + + + + +
                  +``` + And finally, we have the actual cells of the table. There are two types of tags for this, `` (*table header*) and `` (*table data*). As their names indicate, the former is for the header of the table and the latter is for all of the data in the table. In our first set of `` tags, add 4 `` tags, and in the second and third `` tags add 4 `` tags. - - - - - - - - - - - - - - - - - - - -
                  +```html + + + + + + + + + + + + + + + + + + + +
                  +``` Alright! Our table is all set up. We have a table with a `border=1` attribute, 3 rows, and 4 columns. Let's populate it with data so you can see a proper application of the `` tag: -
                  - - - - - - - - - - - - - - - - - - -
                  ItemQuantityRateCost
                  Candy10$.50$5.00
                  Toothpaste2$3.00$6.00
                  +```html + + + + + + + + + + + + + + + + + + + +
                  ItemQuantityRateCost
                  Candy10$.50$5.00
                  Toothpaste2$3.00$6.00
                  +``` Open the page in a browser and check out your work. Nice job! I'm truly impressed. Go eat something good and fattening. @@ -294,7 +315,7 @@ Alrighty. Let's get frisky. Open up the **3 - Styles** folder and the file st Add this line of code in the `` somewhere below the header tags (I made a lot for fun...): `

                  This text is hot like my body

                  ` -Oh man. Load that baby in a browser. WHAT. MAGNIFICENT. COLOR. +Oh man. Load that baby in a browser. WHAT. MAGNIFICENT. COLOR. The first thing we'll look at is the `style` attribute. You can style all kind of things in that, from colors to widths to heights to borders to weights. But for now, let's just talk color. @@ -323,29 +344,39 @@ There are two options you can use, the `style` attribute and the `width` and `he Take this block of code here and stick it into style1.html: - - +```html + +``` + Now, let's just say you want the image to be an exact size, say, 600x800. All you need to do is add `width` and `height` attributes to do just that! - - - + +```html + +``` + Load that baby in a browser. Boo yah. But, you'll notice that the proportions of the image are a little off. What a pain. That's actually pretty easy to fix. Let's say that you absolutely have to have the width at 600 pixels, but the height can slide. It's as easy as taking out the `height` attribute. - +```html + +``` Refresh dat page. Huzzah. Same works for if you have a set height that you want, just include the `height` attribute and not the `width`. Now, you can also do these changes with the `style` attribute. - +```html + +``` Simple enough! Now, we've looked at the `style` attribute a bit now but I haven't explained the syntax. The `style` attribute is for *inline styles*. This means that you're styling your HTML directly in each element, rather than using CSS. But, we haven't gotten that far yet, so I won't go into that part. Now, the syntax within a `style` attribute is a little funky. It is always `style="property: value"`, where the *property* is literally a property of the tag you're editing (for example, `color`, `width`, `height`), and the *value* is to what you're changing or editing the property (for example `blue`, `600px`, `#FF0000`). If you have more than one property that you want to style, for example both height and width, you put a semicolon between delarations. So, in our example, if you want to edit both height and width of our image in the `style` attribute, we'd do: - - +```html + +``` + Why is the syntax this funky? Well, that's because it's secretly CSS syntax. But we'll get into that more later. #### Borders @@ -354,13 +385,17 @@ What if we have a paragraph IN A BOX. That's right. Kind of like a table. But Let's take the same image we played with before: - +```html + +``` Now, you can add `border="5"` to this and you'll get a border with a thickness of 5 pixels around the image. But, this attribute is actually no longer supported for things other than tables (oh yeah, we used this for tables. Memories.), so we can do this a better way. You guessed it. `style` is coming to SAVE THE DAY. The styling for borders with the `style` attribute is a bit different than just adding `border="5"`, but it's also much more powerful. Let's change our code: - +```html + +``` Whoa. That's a lot of crap in there. Let's break it down. @@ -372,11 +407,12 @@ Color? What? OH YEAH. That's the third part of the border style. You can sti Let's mix it up a bit with different borders for you to check out. I'm just going to keep using the same image, you can replace it with whatever. Stick this in the `` tags of style1.html and check it out, and play with the values yourself! - - - - - +```html + + + + +``` Notice how I added `width` and `height` to a couple of them. We're getting incestuous with our stylings. Aww yeah. @@ -385,16 +421,20 @@ Notice how I added `width` and `height` to a couple of them. We're getting ince Besides having header tags and colors, there are other text styles that you can use. What if you want bold text, or italics? Different sizes? Once again, the `style` attribute comes to the rescue. Add the following to style1.html in **3 - Styles**: - -

                  This text is magnificent.

                  + +```html +

                  This text is magnificent.

                  +``` Load that in a browser and check it out. YUS. You've got some magically centered, bolded text! The properties defined here are pretty simple to follow. `text-align` lets you align your text either `center`, `left`, or `right`. Mess around with that so you get it. `font-weight`, you guessed it, edits the weight in your text. It can have the values `normal` for normally weighted text, `bold` for thick characters, `bolder` for thicker characters (specific, right?), `lighter` for lighter-weighted characters, and the numbers `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, and `900` (where 400 is the same as normal and 700 is the same as bold). Play with this one now: - -

                  This text is magnificent.

                  - + +```html +

                  This text is magnificent.

                  +``` + Browser time. You've now got some text in the font Arial, and it's italic! WOOO HOOOOOO. The properties we used here are `font-family` and `font-style`. For the former, you can choose a lot of fonts, but you have to be careful. Not every computer has the same fonts. This is just my personal opinion: don't put something here besides Arial unless you've done some JavaScript magic. And because I'm assuming you don't know JavaScript, don't use this unless you're changing this to Arial. At least not yet. :) And for `font-style`, it can be `normal`, `oblique`, and `italic`. You can play with those now, it's pretty straightforward. @@ -415,25 +455,33 @@ Open up the **4 - Head** (heh get it? Forehead? I crack myself up.) folder, an * *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 `` tag: -`<meta name="keywords" content="cooking, cook, recipe, food, microwave">` - +```html +<meta name="keywords" content="cooking, cook, recipe, food, microwave"> +``` + Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice! * *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: -`<meta name="description" content="The best cooking website in the entire universe. You're welcome.">` +```html +<meta name="description" content="The best cooking website in the entire universe. You're welcome."> +``` 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. * *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: -`<meta name="author" content="Sexy McGoodlooking">` - +```html +<meta name="author" content="Sexy McGoodlooking"> +``` + Add this after your description line, and stick your name in it! I think I got it as close as possible. * *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: -`<meta http-equiv="refresh" content="30">` +```html +<meta http-equiv="refresh" content="30"> +``` And there you have it, a self-refreshing webpage. You're so good at this. @@ -453,20 +501,18 @@ Open up your **3 - Styles** folder again and open style2.html in your favorite e We're going to be working in the `<head>` tag again. Underneath the `<title>` tag, stick in the following: - <style> - body - { } - - h1 - { } - - p - { } - - ol - { } - </style> - +```html +<style> + body { } + + h1 { } + + p { } + + ol { } +</style> +``` + Congratulations. You have some empty CSS. Now, what the heck is CSS anyway? Well, CSS stands for *Cascading Style Sheets*. Gee whiz, that word *style* is everywhere. And it's true. The `style` attribute is for styling *inline* HTML (just that line of code), the `<style>` tag is for holding CSS, and CSS *defines* the styles! Let that sink in. Nice. Stylish. Just like you. Now, you'll notice some familiar keywords in there, in particular, `body`, `h1`, `p`, and `ol`. That's right, they're the tags we know and love! But, in CSS, these are called *selectors*. The selector tells us what tag you're about to style. So, whatever code you put in between the curly braces `{}` after the `body` selector will affect everything in the `<body>` tags. Whatever you put in the braces after the `p` selector will affect what's in the `<p>` tags. @@ -474,34 +520,31 @@ Whatever code you have in those curly braces will only affect that tag, so if yo The code that we're going to be putting in each declaration is the same syntax as the code that we normally put in the `style` attribute. How convenient. So, change your code above to the following: - <style> - body - { - font-family: Arial; - } - - h1 - { - color: red; - text-align: center; - } - - p - { - font-weight: bolder; - } - - img - { - width: 400px; - border: 5px solid #333333; - } - - ol - { - color: #333333; - } - </style> +```html +<style> + body { + font-family: Arial; + } + + h1 { + color: red; + text-align: center; + } + + p { + font-weight: bolder; + } + + img { + width: 400px; + border: 5px solid #333333; + } + + ol { + color: #333333; + } +</style> +``` Recognize that? It's exactly the same! For each selector, there is a *property* of that selector, and each property has a *value*, just like how we wrote it in the `style` attributes! @@ -522,31 +565,30 @@ But, you can style specific classes to do what you want, instead of having all ` How about we style one of the classes specifically? It's simple. Just take the class name you made up (I'll use the `poemtitle` class for my example) and add a period `.` in front of it to select it in CSS, like so: - .poemtitle - { - - } +```css +.poemtitle { + +} +``` And there you have it! Even though you might have different styles for your paragraphs, you can style the ones of class `poemtitle` individually. For this example, let's make all paragraphs with the font family Arial, the `poemtitle`s font weight `bolder`, the `author`s the color `#555555`, and the `poem`s in `italic`. Try doing it on your own if you can (just put your code in the given `<style>` tags), but you're welcome to cheat: - p - { - font-family: Arial; - } - .poemtitle - { - font-weight: bolder; - } - .author - { - color: #555555; - } - .poem - { - font-style: italic; - } +```css +p { + font-family: Arial; +} +.poemtitle { + font-weight: bolder; +} +.author { + color: #555555; +} +.poem { + font-style: italic; +} +``` Gosh you're good at this. Go eat a cookie. @@ -556,14 +598,17 @@ Gosh you're good at this. Go eat a cookie. Now, let's talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the `id` attribute like so: - <p id="special">This is so special that I want it uniquely styled forever.</p> - +```html +<p id="special">This is so special that I want it uniquely styled forever.</p> +``` + When you want to style your IDs, you put a hashtag `#` before it in your CSS, like so: - - #special - { - - } + +```css +#special { + +} +``` Remember: You can only use an ID once. IDs are more helpful when you're controlling the element with JavaScript, not styling, but that's something for another day. @@ -576,34 +621,37 @@ The `<span>` tag is pretty invisible unless you style it. It's used to group *i So, let's say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes `<span>`. For example: - <p>"My grandmother started walking <span>five miles a day</span> when she was sixty. She's ninety-seven now, and <span>we don't know where the heck she is.</span>" </p> - <p>~ Ellen DeGeneres </p> - +```html +<p>"My grandmother started walking <span>five miles a day</span> when she was sixty. She's ninety-seven now, and <span>we don't know where the heck she is.</span>" </p> +<p>~ Ellen DeGeneres </p> +``` + In the above quote, you might want to style the `<span>` tags differently than the rest of the paragraph. Maybe you want those words bold, or italics, or in red. Now you can. Add some `<span>` tags around your favorite lines of the poems in style3.html of the **3 - Styles** folder. Then, put the following CSS in your `<style>` tags: - - p span - { - font-style: italic; - } + +```css +p span { + font-style: italic; +} +``` Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell you. This is called *nesting* CSS. When you have a space in your selector like this, it means that, in this case, the style will only affect `<span>` tags within `<p>` tags. So, if you put `<span>` tags around a word in your `<h1>` tags, your CSS will not affect it. You can still have a plain `span` selector, or nest it in one of your classes too: - span - { - font-weight: bold; - } - .author span - { - color: #999999; - } +```css +span { + font-weight: bold; +} +.author span { + color: #999999; +} +``` Make sense? I hope so. To sum up: `<span>` tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next. ##### The `<div>` tag -Alrighty. Go enjoy a beach vacation and then come back to this. +Alrighty. Go enjoy a beach vacation and then come back to this. Welcome back. @@ -613,81 +661,75 @@ The `<div>` tag might end up being the tag that you use most often. It is what Open up the **5 - Layout** folder, and use your editor to open `homepage.html`. - <!doctype html> - <html> - <head> - <title> My Website - - - -
                  -
                  -
                  -
                  - - +```html + + + + My Website + + + +
                  +
                  +
                  +
                  + + +``` Besides the `
                  ` tags, everything here should look familiar. Each of the `` have a `class`, which means we should style those, right? Right. Within those ` - - - -

                  Poetry

                  - -

                  Check out these incredible poems!

                  - -
                  + + + +

                  Poetry

                  -

                  - Pearls -

                  -

                  - Sarah Baugh -

                  -

                  - The world is your oyster -
                  - What does that mean? -
                  - Is there a pearl hidden in every dark place? -
                  - Or is the world only what we want it to be -
                  - If we have the pearls to pay for it? -
                  - If we pry something open -
                  - That is shut tightly -
                  - And is dark -
                  - Mysterious -
                  - Will we always find something beautiful? -
                  +

                  Check out these incredible poems!

                  - Not ever oyster holds a pearl. -
                  +
                  - Is it the promise of something beautiful -
                  - That keeps us searching for oysters -
                  - In this world? -
                  +

                  + Pearls +

                  +

                  + Sarah Baugh +

                  +

                  + The world is your oyster +
                  + What does that mean? +
                  + Is there a pearl hidden in every dark place? +
                  + Or is the world only what we want it to be +
                  + If we have the pearls to pay for it? +
                  + If we pry something open +
                  + That is shut tightly +
                  + And is dark +
                  + Mysterious +
                  + Will we always find something beautiful? +
                  - Not every pearl is in an oyster. -
                  -

                  - -
                  + Not ever oyster holds a pearl. +
                  -

                  - Real Happiness -

                  -

                  - Shashikant Nishant Sharma -

                  -

                  - Happiness lies in good health
                  - Not in accumulation of wealth
                  - Happiness lies in caring for others
                  - Like dear friends and brothers
                  - Happiness lies in sharing
                  - Not is amassing
                  - Happiness is the state of mind
                  - Nowhere else you can find
                  - Enjoy the moment, live the life
                  - Settle score and end the strife
                  - Happiness is the journey not destination
                  - Happiness Is doing what is your fascination
                  - Happiness is doing what you like
                  - Sleeping, walking, running and riding a bike
                  - Happiness will come near
                  - When you will venture without fear
                  - Render service that you can
                  - Live a life that adorn a man
                  -

                  - -
                  - -

                  - Thanks for reading! -

                  + Is it the promise of something beautiful +
                  + That keeps us searching for oysters +
                  + In this world? +
                  - - \ No newline at end of file + Not every pearl is in an oyster. +
                  +

                  + +
                  + +

                  + Real Happiness +

                  +

                  + Shashikant Nishant Sharma +

                  +

                  + Happiness lies in good health
                  + Not in accumulation of wealth
                  + Happiness lies in caring for others
                  + Like dear friends and brothers
                  + Happiness lies in sharing
                  + Not is amassing
                  + Happiness is the state of mind
                  + Nowhere else you can find
                  + Enjoy the moment, live the life
                  + Settle score and end the strife
                  + Happiness is the journey not destination
                  + Happiness Is doing what is your fascination
                  + Happiness is doing what you like
                  + Sleeping, walking, running and riding a bike
                  + Happiness will come near
                  + When you will venture without fear
                  + Render service that you can
                  + Live a life that adorn a man
                  +

                  + +
                  + +

                  + Thanks for reading! +

                  + + diff --git a/4 - Head/cooking.html b/4 - Head/cooking.html index cfc5870..3f0ba22 100644 --- a/4 - Head/cooking.html +++ b/4 - Head/cooking.html @@ -1,94 +1,105 @@ - + - - Cooking Website - - -

                  How to make your own Cheesy Cracker Snacks

                  - - Make these tasty snacks! -

                  - Today, we're going to teach you how to make some delicious cheesy snacks, fun for the whole family. -

                  - - Ingredients -

                  - You will need the following ingredients: -

                  -
                    -
                  • - Shredded Cheese -
                    • -
                  • - Butter -
                    • -
                  • - Flour -
                    • -
                  • - Salt -
                    • -
                  • - Cold water -
                    • -
                  • - Aluminum can -
                    • -
                  • - Packing tape -
                    • -
                  - -
                  - - The can -

                  - The first step is cutting out the shapes of your crackers from the aluminum can. Cut a thin strip and, then tape the edges together with clear packing tape. -

                  - -
                  - - Process THIS -

                  - Begin combining everything, except the water, in a food processor until the dough looks like sand. -

                  - -
                  - - Adding water -

                  - Next, pulse in the water, 1 tablespoon at a time, until combined. -

                  - -
                  - - Package this -

                  - Remove the dough from the processor and form into a small, tidy package. Wrap in plastic and chill for 20 minutes. -

                  - -
                  - - Roll out -

                  - Once chilled, roll out and flatten the dough. -

                  - -
                  - - Cut this - Cook this -

                  - Place crackers on a lined cookie sheet and bake at 350F for about 15 minutes. -

                  - -
                  - - Boo yah -

                  - And, you're done! -

                  - -

                  This recipe was lovingly ripped off of The Tasty Kitchen.

                  - - \ No newline at end of file + + Cooking Website + + +

                  + How to make your own Cheesy Cracker Snacks +

                  + + Make these tasty snacks! +

                  + Today, we're going to teach you how to make some delicious cheesy snacks, + fun for the whole family. +

                  + + Ingredients +

                  + You will need the following ingredients: +

                  +
                    +
                  • + Shredded Cheese +
                    • +
                  • + Butter +
                    • +
                  • + Flour +
                    • +
                  • + Salt +
                    • +
                  • + Cold water +
                    • +
                  • + Aluminum can +
                    • +
                  • + Packing tape +
                    • +
                  + +
                  + + The can +

                  + The first step is cutting out the shapes of your crackers from the + aluminum can. Cut a thin strip and, then tape the edges together with + clear packing tape. +

                  + +
                  + + Process THIS +

                  + Begin combining everything, except the water, in a food processor until + the dough looks like sand. +

                  + +
                  + + Adding water +

                  + Next, pulse in the water, 1 tablespoon at a time, until combined. +

                  + +
                  + + Package this +

                  + Remove the dough from the processor and form into a small, tidy package. + Wrap in plastic and chill for 20 minutes. +

                  + +
                  + + Roll out +

                  + Once chilled, roll out and flatten the dough. +

                  + +
                  + + Cut this + Cook this +

                  + Place crackers on a lined cookie sheet and bake at 350F for about 15 + minutes. +

                  + +
                  + + Boo yah +

                  + And, you're done! +

                  + +

                  + This recipe was lovingly ripped off of + The Tasty Kitchen. +

                  + + diff --git a/5 - Layout/aboutpage.html b/5 - Layout/aboutpage.html index f10b39c..62a527b 100644 --- a/5 - Layout/aboutpage.html +++ b/5 - Layout/aboutpage.html @@ -1,37 +1,40 @@ - + - - About Me + + About Me - - - - -
                  - This is a header -
                  -
                  - Home -
                  - About -
                  - Contact -
                  -
                  -
                  -

                  About me

                  -

                  A tragedy

                  -

                  - Now, this is the story all about how my life got flipped-turned upside down and I'd like to take a minute, just sit right there I'll tell you how I became the prince of a town called Bel Air.
                  - In West Philadelphia, born and raised on the playground is where I spent most of my days chillin' out, maxin', relaxin' all cool and all shootin' some B-ball outside of the school.
                  - When a couple of guys who were up to no good started makin' trouble in my neighborhood I got in one little fight and my mom got scaredand said, "You're movin' with your aunty and uncle in Bel Air."
                  - I begged and pleaded with her the other day but she packed my suitcase and sent me on my way she gave me a kiss and then she gave me my ticket I put my Walkman on and said, "I might as well kick it!"
                  - - -

                  -
                  -
                  - - \ No newline at end of file + + + +
                  + This is a header +
                  +
                  + Home +
                  + About +
                  + Contact +
                  +
                  +
                  +

                  About me

                  +

                  A tragedy

                  +

                  + Now, this is the story all about how my life got flipped-turned upside + down and I'd like to take a minute, just sit right there I'll tell you + how I became the prince of a town called Bel Air.
                  + In West Philadelphia, born and raised on the playground is where I spent + most of my days chillin' out, maxin', relaxin' all cool and all shootin' + some B-ball outside of the school.
                  + When a couple of guys who were up to no good started makin' trouble in + my neighborhood I got in one little fight and my mom got scaredand said, + "You're movin' with your aunty and uncle in Bel Air."
                  + I begged and pleaded with her the other day but she packed my suitcase + and sent me on my way she gave me a kiss and then she gave me my ticket + I put my Walkman on and said, "I might as well kick it!"
                  +

                  +
                  +
                  + + diff --git a/5 - Layout/contactpage.html b/5 - Layout/contactpage.html index f8da155..d8807da 100644 --- a/5 - Layout/contactpage.html +++ b/5 - Layout/contactpage.html @@ -1,27 +1,24 @@ - + - - Contact Me - - - - - -
                  This is a header
                  -
                  - Home
                  - About
                  - Contact
                  -
                  -
                  -

                  Here's how you can contact me!

                  -
                    -
                  • Phone: 555-555-5555
                    • -
                  • Email: hottiepants314@cutie.com
                    • -
                  -
                  -
                  - - \ No newline at end of file + + + +
                  This is a header
                  +
                  + Home
                  + About
                  + Contact
                  +
                  +
                  +

                  Here's how you can contact me!

                  +
                    +
                  • Phone: 555-555-5555
                    • +
                  • Email: hottiepants314@example.com
                    • +
                  +
                  +
                  + + diff --git a/5 - Layout/homepage.html b/5 - Layout/homepage.html index ba08e25..f250ee3 100644 --- a/5 - Layout/homepage.html +++ b/5 - Layout/homepage.html @@ -1,21 +1,25 @@ - + - - My Website - - - -
                  This is a header
                  -
                  - Home
                  - About
                  - Contact
                  -
                  -
                  - "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." -
                  -
                  - - \ No newline at end of file + + My Website + + + +
                  This is a header
                  +
                  + Home
                  + About
                  + Contact
                  +
                  +
                  + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum." +
                  +
                  + + diff --git a/6 - Linking/home.html b/6 - Linking/home.html index b6e45f0..bac6d48 100644 --- a/6 - Linking/home.html +++ b/6 - Linking/home.html @@ -1,19 +1,24 @@ - + - - My Website - - - -
                  This is a header
                  -
                  - Home
                  - About
                  - Contact
                  -
                  -
                  - "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." -
                  -
                  - - \ No newline at end of file + + My Website + + +
                  This is a header
                  +
                  + Home
                  + About
                  + Contact
                  +
                  +
                  + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum." +
                  +
                  + + diff --git a/6 - Linking/main.css b/6 - Linking/main.css index a4e0583..f1dd2f4 100644 --- a/6 - Linking/main.css +++ b/6 - Linking/main.css @@ -1,51 +1,45 @@ - html - { - height: 100%; - } - body - { - font-family: Arial; - height: 100%; - margin: 0px; - } - .header - { - background-color: #99B5DD; - position: fixed; - top: 0px; - width: 100%; - height: 60px; - padding: 0px 10px; - font-size: 50px; - z-index: 10; - } - .menu - { - background-color: #DE90B1; - height: 100%; - width: 15%; - position: fixed; - left: 0px; - top: 60px; - padding: 10px 0px 0px; - text-align: center; - z-index: 5; - } - .content - { - height: 200px; - position: absolute; - top: 60px; - left: 15%; - padding: 10px; - z-index: 0; - } - .footer - { - background-color: #0F215D; - position: fixed; - bottom: 0px; - height: 60px; - width: 100%; - z-index: 10; - } \ No newline at end of file +html { + height: 100%; +} +body { + font-family: Arial; + height: 100%; + margin: 0px; +} +.header { + background-color: #99b5dd; + position: fixed; + top: 0px; + width: 100%; + height: 60px; + padding: 0px 10px; + font-size: 50px; + z-index: 10; +} +.menu { + background-color: #de90b1; + height: 100%; + width: 15%; + position: fixed; + left: 0px; + top: 60px; + padding: 10px 0px 0px; + text-align: center; + z-index: 5; +} +.content { + height: 200px; + position: absolute; + top: 60px; + left: 15%; + padding: 10px; + z-index: 0; +} +.footer { + background-color: #0f215d; + position: fixed; + bottom: 0px; + height: 60px; + width: 100%; + z-index: 10; +} diff --git a/7 - Project/example.css b/7 - Project/example.css index 283d740..648d8d9 100644 --- a/7 - Project/example.css +++ b/7 - Project/example.css @@ -1,44 +1,43 @@ html { - height: 100%; + height: 100%; } body { - font-family: Arial; - height: 100%; - margin: 0px; + font-family: Arial; + height: 100%; + margin: 0px; } a { - color: red; + color: red; } img { - float: right; - width: 200px; + float: right; + width: 200px; } -p span -{ - font-weight: bold; +p span { + font-weight: bold; } .header { - background-color: #99B5DD; - position: fixed; - top: 0px; - width: 100%; - height: 60px; - padding: 0px 10px; - font-size: 50px; - z-index: 10; + background-color: #99b5dd; + position: fixed; + top: 0px; + width: 100%; + height: 60px; + padding: 0px 10px; + font-size: 50px; + z-index: 10; } .content { - height: 200px; - position: absolute; - top: 60px; - padding: 10px; - z-index: 0; + height: 200px; + position: absolute; + top: 60px; + padding: 10px; + z-index: 0; } .footer { - background-color: #0F215D; - position: fixed; - bottom: 0px; - height: 60px; - width: 100%; - z-index: 10; -} \ No newline at end of file + background-color: #0f215d; + position: fixed; + bottom: 0px; + height: 60px; + width: 100%; + z-index: 10; +} diff --git a/7 - Project/example.html b/7 - Project/example.html index 9727ed5..99b18a4 100644 --- a/7 - Project/example.html +++ b/7 - Project/example.html @@ -1,40 +1,41 @@ - + - - Susan's Website - - - -
                  - Susan Baugh -
                  -
                  -

                  Welcome!

                  -

                  - Thanks for stopping by! My name is Susan and I love art, learning about energy and renewable resources, and playing Candy Crush.
                  - Please have a look around and check out my projects and work!
                  -

                  - I'm Susan - -

                  Publications

                  - -

                  Presentations

                  - - Construction of the Belo Monte Hydroelectric Power Plant in the Amazon
                  - - Microfluidic Devices for Medical and Energy Applications
                  - -

                  Publications

                  - - Paper-based Microfluidics for Energy Applications
                  - - How to Destroy Candy Crush in 5 Easy Steps
                  - -

                  Contact Me

                  - -

                  Email susan@example.com

                  - -
                  -
                  - - \ No newline at end of file + + Susan's Website + + + +
                  + Susan Baugh +
                  +
                  +

                  Welcome!

                  +

                  + Thanks for stopping by! My name is Susan and I love art, learning about + energy and renewable resources, and playing Candy Crush.
                  + Please have a look around and check out my projects and work!
                  +

                  + I'm Susan + +

                  Publications

                  + +

                  Presentations

                  + + Construction of the Belo Monte Hydroelectric Power Plant in the Amazon +
                  + + Microfluidic Devices for Medical and Energy Applications
                  + +

                  Publications

                  + + Paper-based Microfluidics for Energy Applications
                  + + How to Destroy Candy Crush in 5 Easy Steps
                  + +

                  Contact Me

                  + +

                  Email susan@example.com

                  +
                  +
                  + + diff --git a/7 - Project/index.html b/7 - Project/index.html index d31ac1f..58c72f7 100644 --- a/7 - Project/index.html +++ b/7 - Project/index.html @@ -1,24 +1,22 @@ - - - - - My Website - - - - - - - - + + + -

                  [Your name here]

                  - -

                  Let's talk about me.

                  - - \ No newline at end of file +

                  [Your name here]

                  + +

                  Let's talk about me.

                  + + diff --git a/7 - Project/main.css b/7 - Project/main.css index 8b11b61..55e7413 100644 --- a/7 - Project/main.css +++ b/7 - Project/main.css @@ -14,13 +14,11 @@ */ body { - /* Notice that you can have your curly braces on the same line as your selector. Your preference. */ + /* Notice that you can have your curly braces on the same line as your selector. Your preference. */ } h1 { - } p { - } From e5719e1311148061400d3c0c6c9bdc8f836de6e8 Mon Sep 17 00:00:00 2001 From: Cassidy Williams Date: Fri, 25 Sep 2020 12:45:23 -0700 Subject: [PATCH 09/11] Add cushion to the bottom of content for footer --- 7 - Project/example.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7 - Project/example.css b/7 - Project/example.css index 648d8d9..26da4e6 100644 --- a/7 - Project/example.css +++ b/7 - Project/example.css @@ -27,10 +27,10 @@ p span { z-index: 10; } .content { - height: 200px; position: absolute; top: 60px; padding: 10px; + margin-bottom: 60px; z-index: 0; } .footer { From 5e3a02431f7c66e58c896378cc40ee874b7af6bf Mon Sep 17 00:00:00 2001 From: Cassidy Williams <1454517+cassidoo@users.noreply.github.com> Date: Tue, 8 Dec 2020 21:33:18 -0600 Subject: [PATCH 10/11] Remove keyword meta tag --- README.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/README.md b/README.md index 62c905c..cb473e8 100644 --- a/README.md +++ b/README.md @@ -450,16 +450,8 @@ So. What else can go in the ``? We've already got ``, which we've The `<meta>` tag gives *metadata* about the HTML document. Metadata will not be displayed on the page, but machines can read it. An example of metadata not on a webpage is in a typical music file. When you have a music file on your computer and you open it in some media player of some kind, it shows the album title, the artist, the genre, and other information about the song. This information is metadata. The user can't see it directly in the music file, but your music players can read it and will tell you what it is. So, on a website, this metadata is used by search engines, your browser, and other web services to make your website easy to find, read, and display. -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. +There are 3 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. Open up the **4 - Head** (heh get it? Forehead? I crack myself up.) folder, and open cooking.html in your favorite editor. - - * *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: - -```html -<meta name="keywords" content="cooking, cook, recipe, food, microwave"> -``` - -Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice! * *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: From 4aa7ea200c9b864631fd2eef1249dacc824b40fe Mon Sep 17 00:00:00 2001 From: Cassidy Williams <1454517+cassidoo@users.noreply.github.com> Date: Thu, 15 Dec 2022 12:45:01 -0600 Subject: [PATCH 11/11] Update editors and links Dear Atom, good night sweet prince --- README.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index cb473e8..517d517 100644 --- a/README.md +++ b/README.md @@ -71,19 +71,18 @@ Because this stuff is important. Whether you're a business person formatting yo So the first thing you'll need is an editor to edit your jazz. There's tons of options out there. - * Notepad/TextEdit (that's right, the stupid thing that comes on your computer) - 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. + * Notepad/TextEdit (that's right, the stupid thing that comes on your computer) - 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. * [Visual Studio Code](https://code.visualstudio.com/) - This is what I typically use. It's open source and has TONS of extensions available. - * [Atom](https://atom.io/) - This is another very customizable option, with a huge plugin library and open source so it's always being improved. - * [Sublime Text 3](https://www.sublimetext.com/3) - 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. - * [CodePen Projects](http://codepen.io/projects/) - This is an in-browser code editor, so you can code directly within the web browser, no downloads required. :) + * [Sublime Text](https://www.sublimetext.com/) - This is a pretty popular option. Very clean interface. + * [CodePen Projects](https://codepen.io/project) - This is an in-browser code editor, so you can code directly within the web browser, no downloads required. :) * [Glitch](https://glitch.com/) - This is another in-browser code editor. It is meant for larger projects, but it's nice to not have to download anything! - * [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. + * [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. 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! ### HTML Tag Structure -Here is a barebones HTML page, about as simple as you can get. You can open it up in the **1 - Structure** folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you'll see a plain webpage with the title "My Website" and the words, "Hello, World!" written on the page. +Here is a barebones HTML page, about as simple as you can get. You can open it up in the **1 - Structure** folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you'll see a plain webpage with the title "My Website" and the words, "Hello, World!" written on the page. ```html <!doctype html> @@ -107,9 +106,9 @@ The opening and closing tags together are an *element* (which also includes ever 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. Here's some lists of tags if you really care to see all of them at this point: - * [HTML Dog Tag List](http://www.htmldog.com/reference/htmltags/) - * [W3Schools Tag List](http://www.w3schools.com/tags/default.asp) - * [Quackit HTML Tag List](http://www.quackit.com/html/tags/) + * [HTML Dog Tag List](https://www.htmldog.com/references/html/tags/) + * [W3Schools Tag List](https://www.w3schools.com/tags/default.asp) + * [Quackit HTML Tag List](https://www.quackit.com/html/tags/) 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. 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>`).