├── _config.yml ├── images ├── cpbm.jpg ├── rules_same_line.png ├── rules_use_snippets.png ├── rules_nametag_config.png ├── rules_nametag_filled.png ├── rules_same_line_good.png ├── rules_edit_mistakes_bad.png └── rules_edit_mistakes_good.png ├── prerequisite.md ├── README.md ├── stage1task.md ├── introduction.md ├── task2.md ├── getting-started.md ├── FAQ.md ├── coc.md ├── git.md └── html.md /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /images/cpbm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/cpbm.jpg -------------------------------------------------------------------------------- /images/rules_same_line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/rules_same_line.png -------------------------------------------------------------------------------- /prerequisite.md: -------------------------------------------------------------------------------- 1 | ## Prerequisite 2 | 3 | Technologies to Know: 4 | 5 | * [Git](git.md) 6 | * [HTML](html.md) 7 | --- -------------------------------------------------------------------------------- /images/rules_use_snippets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/rules_use_snippets.png -------------------------------------------------------------------------------- /images/rules_nametag_config.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/rules_nametag_config.png -------------------------------------------------------------------------------- /images/rules_nametag_filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/rules_nametag_filled.png -------------------------------------------------------------------------------- /images/rules_same_line_good.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/rules_same_line_good.png -------------------------------------------------------------------------------- /images/rules_edit_mistakes_bad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/rules_edit_mistakes_bad.png -------------------------------------------------------------------------------- /images/rules_edit_mistakes_good.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hnginternship5/HNGInternship/HEAD/images/rules_edit_mistakes_good.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hotels.ng Internship 5.0 2 | 3 | 4 | 5 | Table of Contents 6 | ================= 7 | * [Introduction](introduction.md) 8 | * [Prerequisite](prerequisite.md) 9 | * [Getting Started](getting-started.md) 10 | * [Code of Conduct](coc.md) 11 | * [Task 1](stage1task.md) 12 | * [Task 2](task2.md) 13 | * [FAQ](FAQ.md) 14 | -------------------------------------------------------------------------------- /stage1task.md: -------------------------------------------------------------------------------- 1 | sign up for GitHub. Create a personal repository. Commit a file. Pull the file. Change stuff. Commit again. Check that you have a profile image set here. If you do not have a blog, start one on blogspot, WordPress, medium or anywhere else you want. After all is complete, add this icon to your status here: :hatching_chick: by the time we start, all those without the above will not start with us. 2 | -------------------------------------------------------------------------------- /introduction.md: -------------------------------------------------------------------------------- 1 | ## Introduction 2 | 3 | > The HNG internship is a 3-month remote internship designed to find and develop the most talented software developers. 4 | 5 | Please invite others who are interested in learning to code. Using this link: [https://bit.ly/join_hnginternship5](https://bit.ly/join_hnginternship5) 6 | 7 | Note that this link will be closed at 12 noon on 1st April, 2019. 8 | 9 | > Please do invite others who may be interested in the internship 10 | 11 | Notice: 12 | 13 | *Setting up your profile information such as, name, display name, what you can do, (of course that will change as soon as you learn on), profile image, phone number and status is very important.* 14 | 15 | 16 | **Please set your profile picture - we will disable all users without profile pictures** 17 | --- 18 | 19 | ## Learning Tracks 20 | 1. Machine Learning 21 | 2. Design Track -------------------------------------------------------------------------------- /task2.md: -------------------------------------------------------------------------------- 1 | Join the #design-stage1 channel. Use Figma to design yourself a home page. Your page must follow a particular format: Your picture on the top left corner. Links below your picture About, Blog, Projects. Below that are three icons with links to your social media. On the right (separated by a line from the left section), will be some welcoming information for you. *Everyone* will need to do this. The mentors will give you feedback on your design, however, I will be the final judge. Till your design is accepted, you cannot start the internship. Pay attention to alignment, colors and other important parts of design. 2 | 3 | If you are done with your git task and your design task, then please submit both together to #promotion channel, and a mentor will advance you to stage 1. The design task is a screenshot of what you did in Figma. The git should be a link to your public git repo with some file in there showing that you edited it. 4 | -------------------------------------------------------------------------------- /getting-started.md: -------------------------------------------------------------------------------- 1 | ## Getting-Started 2 | 3 | Here is how to get started after Joining the Internship Slack Channel 4 | 5 | - Click HNG Internship 5 up the top and click `Profile & Account`: 6 | 7 | ![Modify your profile](images/rules_nametag_config.png) 8 | 9 | - When your profile pops up, please fill out **Full Name**, **Display Name**, **Profile Photo** and, **Phone Number**. 10 | 11 | ![A nice nametag](images/rules_nametag_filled.png) 12 | 13 | - Join **#getting-started** for starter instructions and **#announcements** for updates. 14 | 15 | - Introduce yourself 16 | 17 | ## Rules 18 | 19 | Do not **@channel**, **@here**, **@everyone** in **#general**. 20 | - Do not change or erase channel subject 21 | - Post relevant materials and resources in #resources *ONLY* 22 | - Respect each other and the tools we use. 23 | - Don't upload copyrighted content, unless it is freely available from the publisher. 24 | - If you have any issue, please contact any mentor. You can find them with a :star: beside their handles. 25 | -------------------------------------------------------------------------------- /FAQ.md: -------------------------------------------------------------------------------- 1 | ## Using Code Snippets 2 | 3 | When pasting large blocks of code, use snippets instead of pasting a wall of text. 4 | 5 | ![Use Snippets](images/rules_use_snippets.png) 6 | ## Editing Messages 7 | 8 | If you make a mistake when typing a message, simply press the `up arrow` in Slack to fix your mistake. 9 | 10 | > :x: Bad Example - Don't fix things on a new line 11 | > 12 | ![Fixing Messages Bad Example](images/rules_edit_mistakes_bad.png) 13 | 14 | 15 | > :white_check_mark: Good Example - Editing previous message 16 | > 17 | ![Fixing Messages Good Example](images/rules_edit_mistakes_good.png) 18 | 19 | ## Google first before asking someone? 20 | 21 | Asking someone for help should not be your first course of action. Search for solutions yourself first before asking some. If you don't, expect to be [lmgtfy'ed](http://bfy.tw/QI). 22 | 23 | ## Do you keep your chat on the same line where appropriate? 24 | 25 | Slack chat is not the same as having an SMS conversation with 13 year olds - Keep things together where possible and don't split sentences across lines. 26 | 27 | > :x: Bad Example - Don't span things across multiple lines 28 | > 29 | ![Don't span text across multiple lines](images/rules_same_line.png) 30 | 31 | > :white_check_mark: Good Example - Saying something in the same line 32 | > 33 | ![Don't span text across multiple lines](images/rules_same_line_good.png) -------------------------------------------------------------------------------- /coc.md: -------------------------------------------------------------------------------- 1 | HNG Internship Code of Conduct 2 | =========================== 3 | 4 | Welcome! 5 | -------- 6 | 7 | The current admins are: 8 | * Mark Essien - @Mark Essien 9 | 10 | HNGInternship is dedicated to providing a harassment-free experience for everyone, regardless of gender, disability, physical appearance, body size, race, or religion. We do not tolerate harassment of participants in any form. Sexual language and imagery is not appropriate for any chat topic. Participants violating these rules will be expelled from the group at the sole discretion of the group administrators. 11 | 12 | 13 | Behaviour: 14 | ---------------- 15 | 1. Do not @channel, @here or @everyone in #general. 16 | 2. Respect each other and the tools we use.! 17 | 3. Don't upload copyrighted content, unless it is freely available from the publisher. 18 | 4. If you have an issue, contact any mentor. You can find them with a :star: beside their handles 19 | 20 | Logs and Records: 21 | ----------------- 22 | 23 | **Please be mindful that things you say here may at some point become public**. We cannot prevent people from screencapping or otherwise logging this slack. We also can't guarantee that every member's login credentials and logged-in devices are secure. Files uploaded here can be downloaded by anyone with a login. Please exercise caution and refrain from sharing sensitive information that could harm you or others if it became public. 24 | 25 | Message Retention: 26 | ------------------ 27 | 28 | Because this is a free slack account, we have restricted scrollback, but Slack--the company--retains complete logs of all channels and direct messages back to the creation of HNG Internship. Slack is a U.S. company and therefore subject to subpoenas from U.S. courts. Our logs may be subject to subpoena and could become public as part of legal proceedings. 29 | 30 | Reporting 31 | --------- 32 | 33 | If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact the admins. They'll respond as promptly as they can. 34 | 35 | We will respect confidentiality requests for the purpose of protecting victims of abuse. At our discretion, we may publicly name a person about whom we’ve received harassment complaints, or privately warn third parties about them. We will not name harassment victims without their affirmative consent. 36 | 37 | Harassment: 38 | ------------ 39 | 40 | As someone who is part of this Slack, you agree that: 41 | 42 | * We are collectively and individually committed to safety and inclusivity. 43 | * We have zero tolerance for abuse, harassment, or discrimination. 44 | * We respect people’s boundaries and identities. 45 | * We refrain from using language that can be considered oppressive (systemically or otherwise), 46 | eg. sexist, racist, homophobic, transphobic, ableist, classist, etc. - 47 | this includes (but is not limited to) various slurs. 48 | * We avoid using offensive topics as a form of humor. 49 | 50 | Harassment includes offensive comments related to gender, sexual orientation, disability, physical appearance, body size, race, religion, sexual images, deliberate intimidation, stalking, sustained disruption of discussions or other events, and unwelcome sexual attention. 51 | 52 | Harassment includes: 53 | 54 | * Offensive comments related to gender, gender identity and expression, sexual orientation, disability, mental illness, neuro(a)typicality, physical appearance, body size, race, or religion 55 | * Unwelcome comments regarding a person’s lifestyle choices and practices, including those related to food, health, parenting, drugs, and employment. 56 | * Deliberate misgendering or use of ‘dead’ or rejected names 57 | * Gratuitous or off-topic sexual images or behavior in spaces where they’re not appropriate 58 | * Simulated physical contact (e.g. textual descriptions like “*hug*” or “*backrub*”) without consent or after a request to stop. 59 | * Threats of violence 60 | * Incitement of violence towards any individual, including encouraging a person to commit suicide or to engage in self-harm 61 | * Deliberate intimidation 62 | * Sustained disruption of discussion 63 | * Unwelcome sexual attention 64 | * Continued one-on-one communication after requests to cease 65 | * Publication of non-harassing private communication 66 | 67 | Participants asked to stop any harassing behavior are expected to comply immediately. 68 | 69 | If you are being harassed, notice that someone else is being harassed, or have any other concerns, please notify an administrator immediately. We can be pinged directly. 70 | 71 | If you say something that is found offensive, and you are called out on it, let’s: 72 | 73 | * Listen without interruption. 74 | * Believe what the person is saying & do not attempt to disqualify what they have to say. 75 | * Ask for tips / help with avoiding making the offense in the future. 76 | * Apologize and ask forgiveness. 77 | 78 | Failing to follow the community guidelines as described in this document carries consequences. Admins 79 | reserve the right to suspend any account if we receive a complaint(s). 80 | 81 | Consequences 82 | ------------ 83 | 84 | Participants asked to stop any harassing behavior are expected to comply immediately. 85 | 86 | If a participant engages in harassing behavior, the admins may take any action they deem appropriate, up to and including expulsion from this slack and identifying the participant publicly as someone about whom we've received complaints. 87 | 88 | -------------------------------------------------------------------------------- /git.md: -------------------------------------------------------------------------------- 1 | Getting Started With Git and GitHub 2 | =================================== 3 | 4 | Explaining Git and GitHub. Forked from [Jaime Kosoy](https://github.com/jkosoy). 5 | 6 | ## Some links for more in depth learning 7 | ### Hands on / interactive learning 8 | * [Learn Version Control with Git](https://www.git-tower.com/learn/ebook) A website for learning Git. Appears to cost money but has a free html book. 9 | * [Git Immersion](http://gitimmersion.com/lab_01.html) A website with tutorial materials you download and follow along with. 10 | * [Try Git](http://try.github.io/levels/1/challenges/1) A 15 minute interactive tutorial to learn the basics. 11 | * [Git-it](http://nodeschool.io/#git-it) Interactive software you run from the Terminal (requires installing node.js and nmp). 12 | 13 | ### Purely text based resources 14 | * [Git: No Deep Sh*t](http://rogerdudler.github.io/git-guide/) A super simplified way of explaining git, basically a cheatsheet. 15 | * [The Git Book](http://git-scm.com/book) Explains everything that's possible with git in lots and lots of detail. 16 | 17 | 18 | The Git Flow 19 | ================== 20 | 21 | The following snippet is designed to explain Vincent Driessen's [git branching model](http://nvie.com/posts/a-successful-git-branching-model/), at least as well as I understand it. Special thanks to [Stephen Koch](https://twitter.com/skoch) for being the true master here. 22 | 23 | A way to think about Git and Github. 24 | ------------ 25 | Milestones of milestones of milestones. In other words: 26 | 27 | - Open up a text editor. 28 | - Type "Hello World". 29 | - Save this file. 30 | - You have now created a "milestone" on your hard drive of this text. 31 | - You can now retreive that milestone by double clicking it to re-open it in your text editor. 32 | - This should be a concept you already understand quite well. 33 | - Change the contents of that file again. Add in your own text. Save it again. 34 | - By saving it again you've overwritten the previous milestone. 35 | - You can certainly redo the work (e.g. replacing all the text with "Hello World" and saving again) but the original work is gone otherwise. 36 | - Git saves milestones of milestones. 37 | 38 | git commit -am "By typing this command I am saving a collection of saved files." 39 | 40 | - This is great because now we can roll back to old versions of files without having to retype. Aka "source control". 41 | - However, wouldn't it be great if we could further save milestones in the cloud? 42 | - Aka milestones of milestones of milestones. 43 | - Github -> Git -> Save 44 | - Github is two things: 45 | - git, in the cloud 46 | - a social network around source code 47 | - All you need to do to push to Github: 48 | 49 | git push origin master 50 | 51 | - Now one could "clone" that repository on another computer and not just get the latest code but the complete revision history on another computer. 52 | 53 | 54 | 55 | Setting up 56 | ------------ 57 | Assuming your project is in a folder named "Project" on your Desktop. 58 | 59 | ### Starting from scratch 60 | cd ~/Desktop/Project 61 | git init 62 | git checkout -b develop 63 | touch README.md 64 | 65 | - Open the README.md file you just created in your text editor. Describe your project. I've provided a basic template below for what it's worth. Save it. 66 | - Go to Github (or Bitbucket or whereever you want to save your code in the cloud). Create a new project. 67 | - If you're on Github, ***do not check*** Initialize this project with a README since you just made one. 68 | - Determine your SSH clone url. On Github it's probably something like ***git@github.com:USERNAME/PROJECT.git***. Should be on the project's page somewhere. 69 | - Add your remote. 70 | 71 | git remote add origin {{the link you just copied}} 72 | 73 | - Breaking that down 74 | - git :: The git command 75 | - remote add :: We're adding a remote connection for this repository 76 | - origin :: We're naming the remote "origin". You can also call this "github" or "bananasauraus" if you'd like. 77 | 78 | 79 | ### Cloning an existing repository. 80 | 81 | - Determine your SSH clone url. On Github it's probably something like ***git@github.com:USERNAME/PROJECT.git***. Should be on the project's page somewhere. 82 | 83 | cd ~/Desktop 84 | git clone {{the link you just copied}} Project 85 | 86 | - This creates a directory named "Project", clones the repository there and adds a remote named "origin" back to the source. 87 | 88 | cd Project 89 | git checkout develop 90 | 91 | - If that last command fails 92 | 93 | git checkout -b develop 94 | 95 | Updating/The Development Cycle 96 | ------------ 97 | You now have a git repository, likely with two branches: master and develop. Now bake these laws into your mind and process: 98 | 99 | ####You will never commit to ***master*** directly. 100 | ####You will never commit to ***develop*** directly. 101 | 102 | Instead, you will create ***feature branches*** on your machine that exist for the purpose of solving singular issues. You will always base your features off the develop branch. 103 | 104 | git checkout develop 105 | git checkout -b my-feature-branch 106 | 107 | This last command creates a new branch named "my-feature-branch" based off of develop. You can name that branch whatever you like. You should not have to push it to Github unless you intend to work on multiple machines on that feature. 108 | 109 | Make changes. 110 | 111 | git add . 112 | git commit -am "I have made some changes." 113 | 114 | This adds any new files to be tracked and makes a commit. Now let's add them to develop. 115 | 116 | git checkout develop 117 | git merge --no-ff my-feature-branch 118 | git push origin develop 119 | 120 | Releasing 121 | ------------ 122 | Finished with your project? 123 | 124 | - Create a feature branch as normal. 125 | - Update the version history in the README.md file 126 | - Update this to develop as normal. 127 | 128 | git checkout master 129 | git merge --no-ff develop 130 | git push origin master 131 | git tag v1.0.0 132 | git push origin v1.0.0 133 | 134 | Replace 1.0.0 in the snippet here with your appropriate versions. Now you have a tag saved. 135 | -------------------------------------------------------------------------------- /html.md: -------------------------------------------------------------------------------- 1 | Getting Started With HTML 2 | =================================== 3 | 4 | Explaining HTML. Forked from [Cassidy Williams](https://github.com/cassidoo/HTML-CSS-Tutorial). 5 | 6 | ## Table of Contents 7 | * [HTML](#html-time-lets-go) 8 | * Editors 9 | * Tag Structure 10 | * Text Structure 11 | * Links 12 | * Other tags 13 | * Images 14 | * Line Breaks 15 | * Tables 16 | * Making Things Gorgeous The Wrong Way 17 | * Colors 18 | * Width and Height 19 | * Borders 20 | * Text Styles 21 | * The `` tag 22 | * Putting it all together so far 23 | * [CSS](#css-is-magical-and-now-youre-gonna-learn-it) 24 | * Classes and IDs and other Segregation 25 | * Classes 26 | * IDs 27 | * Other Segregation 28 | * The `` tag 29 | * The `
` tag 30 | * Background color 31 | * Floating 32 | * Positioning 33 | * Margins and Padding 34 | * Z-Index 35 | * The `` Tag, Comments, and other Developer Joys 36 | * The `` tag 37 | * Commenting 38 | * HTML Comments 39 | * CSS Comments 40 | * Other Developer Joys 41 | * Forms 42 | * HTML5 and CSS3 43 | * How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...) 44 | * [Final Project!](#final-project) 45 | * And now, the end is near 46 | 47 | ## HTML Time. Let's Go. 48 | 49 | ### Editors 50 | 51 | So the first thing you'll need is an editor to edit your jazz. There's tons of options out there. 52 | 53 | * 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. 54 | * [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. 55 | * [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. 56 | * [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. :) 57 | * [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. 58 | * [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. 59 | 60 | 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! 61 | 62 | ### HTML Tag Structure 63 | 64 | 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. 65 | 66 | 67 | 68 | 69 | 70 | My Website 71 | 72 | 73 | 74 | Hello, World! 75 | 76 | 77 | 78 | So, what are we looking at here? 79 | 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 ``. 80 | 81 | For example, `` is one tag and the closing tag for it is ``, same with `` and `` and `` and ``, and so on. You get it. 82 | The opening and closing tags together are an *element* (which also includes everything written in it). For example, `My Website` is one element. The text inside an element, in the title case, `My Website`, is called the *content* of an element. 83 | 84 | 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. 85 | Here's some lists of tags if you really care to see all of them at this point: 86 | * [HTML Dog Tag List](http://www.htmldog.com/reference/htmltags/) 87 | * [W3Schools Tag List](http://www.w3schools.com/tags/default.asp) 88 | * [Quackit HTML Tag List](http://www.quackit.com/html/tags/) 89 | 90 | So, if you look at our example, you can also put tags inside other tags (like we did with the `` tags inside the `<head>` tags). This is called *nesting* elements. 91 | 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>`). 92 | 93 | Let's take a look again at part1.html in the **1 - Structure** folder. You'll notice that the first line has `<!doctype html>`. Every HTML document and website has to have this special tag, as it tells the browser what language we're using. This is one of those special tags I mentioned that doesn't need a closing tag. 94 | 95 | On the second line, you can see a `<html>` tag. Everything in the website is contained by this tag, and the last line of your entire document will always be `</html>`. 96 | 97 | Inside `<html>`, there are two elements: `<head>`and `<body>`. Contained in `<head></head>`, we will put all kinds of information for the browser that the user doesn't necessarily need to see. For now, we just have `<title>`. The content of `<title>` will be used for the name of the tab of the browser, and also by search engines. 98 | 99 | On the other side of the planet, we have `<body></body>`. 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! 100 | 101 | ### Structuring text 102 | 103 | 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? 104 | 105 | Check out part2.html in the **1 - Structure** folder. The tags that we'll be talking about here are `<h1>`, `<p>`, `<ul>`, and `<li>`. Open the file in the browser to try and understand what the heck is going on. 106 | 107 | Now, let's talk about it. 108 | 109 | First, we have `<h1>`, which adds a *heading* to our website. Basically, a heading is just text with a bigger font. But still. Important. We'll soon learn how to adjust any and all font sizes, but not yet. Just know that your headings should be in `<h1>` tags. Also, if you have a smaller heading, or *sub-heading*, you could use `<h2>`, which is smaller than `<h1>`, but bigger than regular text. You can keep going with more numbers until you reach `<h6>`, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading! 110 | 111 | Next, we have `<p>` tags. `<p>` adds a *paragraph* of text to our website, which are blocks of text that have some space before and after them. Edit the text in the paragraphs given, and add your own to see what I mean! 112 | 113 | And finally, we have `<ul>`. `<ul>` means a bulleted list (also known as an *unordered list*), where every `<li>` is an item in that list (called a *list item*). But what if you want a numbered list? You could change `<ul>` to `<ol>` (and don't forget its closing tag), it's that simple! `<ol>` is an *ordered list*, which has numbers instead of bullet points, and that is truly the only difference. Add some list items (`<li>`) to the list (make sure you stay inside the `<ul>` tags), and then change your `<ul>` tags to `<ol>`! 114 | 115 | ### Links 116 | 117 | Links are what makes the world/Internet go 'round. Seriously. So, let's learn about them. 118 | 119 | Links are made with the `<a>` tag, which stands for *anchor*. 120 | 121 | Open up the **2 - Tags** folder, and add this piece of code right after your heading in page1.html: 122 | 123 | <p>This paragraph <a href="http://www.lalalalalalalalalalalalalalalalalala.com/">has a totally awesome link.</a></p> 124 | 125 | Open page1.html in a browser and click on it! BEAUTIFUL. 126 | 127 | Okay, so let's take a look at this. First of all, you can see the `<a>` tag there contained in the paragraph. Beautiful. 128 | 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: 129 | 130 | <tag attribute="value1" attribute2="value2">Content of tag</tag>` 131 | 132 | Got it? Good. You're so good looking. 133 | 134 | So, anyway, the attribute 'href' tells us where the link is going to go when the user clicks on it (and for those curious, it stands for *hyperreference*). Try adding some more links to the page to different websites! 135 | 136 | Also, one thing you should note: Links don't have to be in `<p>` tags like I put above. You could put them in `<li>` tags in a list, `<h1>` tags for a linking header, or completely on their own! 137 | 138 | #### Adding links to other pages in your website 139 | 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. 140 | 141 | Normally when a beginner links to different pages on their website, they just make links that look like `<a href="http://www.fakewebsite.com/index.htmL">Home</a>` and `<a href="http://www.fakewebsite.com/contactus.htmL">Contact Us</a>`. 142 | 143 | This is okay. BUT, you can do better. So, what if you change your domain name to reallyfakewebsite.com? When you edit your HTML, you'd have to edit every single one of the links to match the new domain. That's gross. There is a better way. 144 | 145 | 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: 146 | 147 | <a href="page2.html">Click here to go back to Page 2.</a> 148 | 149 | Paste this line of code into page1.html. Watch the magic happen. 150 | 151 | Now, if you were to change your domain or location of your files, you don't have to change a thing. Boo yah. 152 | 153 | ### Other tags 154 | 155 | 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. 156 | 157 | #### Images 158 | `<img>`. Let's just say you want to put an image on your website. This is probably a good tag to know. 159 | Add the following to page1.html: 160 | 161 | <img src="http://i.imgur.com/B9q0A.gif" /> 162 | 163 | Open up the page in a browser. WHOA. Image! So, the `<img>` 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). 164 | 165 | One attribute that might be good for you to remember for `<img>` tags is the `alt` attribute. If you changed the code above to: 166 | 167 | <img src="http://i.imgur.com/B9q0A.gif" alt="I could have danced all night" /> 168 | 169 | 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). 170 | 171 | #### Line breaks 172 | Let's just say you want to keep all your content in one paragraph `<p>`, but you still want to break it up. 173 | 174 | That's easy. 175 | 176 | So, there's two special tags here, `<hr>` and `<br>`. They are *empty tags*, meaning they have no closing tag. 177 | 178 | `<hr>` stands for *horizontal rule*, and creates a visible line break. 179 | `<br>` is a simple line break, all it does is split your paragraph up. 180 | 181 | Try inserting these in between some of your `<p>` tags to try it out! 182 | 183 | #### Tables 184 | 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. 185 | 186 | There's several tags for tables, but the essential ones are `<table>`, `<tr>`, `<th>`, and `<td>`. Look at tables.html in your editor. 187 | 188 | We're going to make our own table again on this page. You can delete the one I made for you, or just make one underneath the current one there. 189 | 190 | So, to create a table, you start with the `<table>` tag. Simple enough. 191 | 192 | 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: 193 | 194 | <table border="1"> 195 | </table> 196 | 197 | Boom. Let's add some more. 198 | 199 | The next tag we're gonna check out is `<tr>`, which is for a *table row*. Easy peasy. So, let's add 3 `<tr>` tags to our table. 200 | 201 | <table border="1"> 202 | <tr> 203 | </tr> 204 | <tr> 205 | </tr> 206 | <tr> 207 | </tr> 208 | </table> 209 | 210 | And finally, we have the actual cells of the table. There are two types of tags for this, `<th>` (*table header*) and `<td>` (*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. 211 | 212 | In our first set of `<tr>` tags, add 4 `<th>` tags, and in the second and third `<tr>` tags add 4 `<td>` tags. 213 | 214 | <table border="1"> 215 | <tr> 216 | <th></th> 217 | <th></th> 218 | <th></th> 219 | <th></th> 220 | </tr> 221 | <tr> 222 | <td></td> 223 | <td></td> 224 | <td></td> 225 | <td></td> 226 | </tr> 227 | <tr> 228 | <td></td> 229 | <td></td> 230 | <td></td> 231 | <td></td> 232 | </tr> 233 | </table> 234 | 235 | 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 `<table>` tag: 236 | 237 | <table border="1"> 238 | <tr> 239 | <th>Item</th> 240 | <th>Quantity</th> 241 | <th>Rate</th> 242 | <th>Cost</th> 243 | </tr> 244 | <tr> 245 | <td>Candy</td> 246 | <td>10</td> 247 | <td>$.50</td> 248 | <td>$5.00</td> 249 | </tr> 250 | <tr> 251 | <td>Toothpaste</td> 252 | <td>2</td> 253 | <td>$3.00</td> 254 | <td>$6.00</td> 255 | </tr> 256 | </table> 257 | 258 | Open the page in a browser and check out your work. Nice job! I'm truly impressed. Go eat something good and fattening. 259 | 260 | One other fun thing you can try playing with are the `colspan` and `rowspan` attributes. If you add `colspan="2"` (or `rowspan`, or any other number) into a `<th>` or `<td>` tag, the cell will expand past their cell size. For example, `<th colspan="2">` will give you a table header that spans 2 columns, and `<td rowspan="3">` will yield a cell that is the height of 3 rows. Jazzy! 261 | 262 | 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 `<tr>` and `<td>` tags inside your current `<td>` tags. MaGiCal ThInGs. 263 | 264 | ### Making Things Gorgeous The Wrong Way 265 | 266 | 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. 267 | 268 | 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. 269 | 270 | #### Colors 271 | 272 | 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. 273 | 274 | Add this line of code in the `<body>` somewhere below the header tags (I made a lot for fun...): `<p style="color: red">This text is hot like my body</p>` 275 | 276 | Oh man. Load that baby in a browser. WHAT. MAGNIFICENT. COLOR. 277 | 278 | 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. 279 | 280 | So, you might wonder, "what the heck how does that work can I just type any color in that space where red is?" And the answer is no. You can type a ton of colors there, like `blue` and `yellow` and `cyan` and `magenta`, but you can't just say `oasisorange` or `electricwhite` and hope that that'll work. 281 | 282 | How do you get a specific color of your liking? Well that's when you use RGB or HEX colors. This is kind of a pain to grasp, it took me a little bit, so I'll explain it as simply as I can: RGB stands for Red, Green, and Blue. You can have the values 0 to 255 in each to form pretty much any color in existance. Whoa. The way to form an RGB code similarly to the one above is simple: `style="color: rgb(255,0,0)"`. In this example, there's 255 reds, 0 greens, and 0 blues. So, it's all red. Boom, simple enough. 283 | 284 | Now HEX colors is very similar. It consists of the hashtag sign `#`, and then 6 *hexadecimal digits*, which are 0123456789ABCDEF, with F being the highest digit. Like RGB, the first two digits of HEX are reds, the second two digits are blues, and the third couple of digits are greens. So, to write the same color code above, you'd do `style="color: #FF0000"` to get red, because you have FF for reds, 00 for blues, and 00 for greens. Simple? Simple. 285 | 286 | 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: 287 | 288 | * [Color Picker](http://www.colorpicker.com/) 289 | * [HTML color codes and names](http://www.computerhope.com/htmcolor.htm) 290 | * [HTML Color Codes](http://html-color-codes.info/) 291 | * [HTML Color Picker](http://www.w3schools.com/tags/ref_colorpicker.asp) 292 | 293 | 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. 294 | 295 | Now, you might see the syntax in your HTML journey where you actually have the `color` attribute, like `<p color="red">wut</p>`. Though this is technically allowed, please don't do this. Please. You'll be so much happier in the long run, I promise. 296 | 297 | #### Width and Height 298 | 299 | So, what if you want to make a picture or a paragraph a different size? Easy peasy. 300 | 301 | There are two options you can use, the `style` attribute and the `width` and `height` attributes. I'll show you both. 302 | 303 | Take this block of code here and stick it into style1.html: 304 | 305 | <img src="http://i.imgur.com/wjiVXJe.gif" /> 306 | 307 | 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! 308 | 309 | <img src="http://i.imgur.com/wjiVXJe.gif" width="600" height="800" /> 310 | 311 | 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. 312 | 313 | <img src="http://i.imgur.com/wjiVXJe.gif" width="600" /> 314 | 315 | 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`. 316 | 317 | Now, you can also do these changes with the `style` attribute. 318 | 319 | <img src="http://i.imgur.com/wjiVXJe.gif" style="width: 600px" /> 320 | 321 | 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. 322 | 323 | 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`). 324 | 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: 325 | 326 | <img src="http://i.imgur.com/wjiVXJe.gif" style="width: 600px; height: 800px" /> 327 | 328 | Why is the syntax this funky? Well, that's because it's secretly CSS syntax. But we'll get into that more later. 329 | 330 | #### Borders 331 | 332 | 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. 333 | 334 | Let's take the same image we played with before: 335 | 336 | <img src="http://i.imgur.com/wjiVXJe.gif" /> 337 | 338 | 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. 339 | 340 | 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: 341 | 342 | <img src="http://i.imgur.com/wjiVXJe.gif" style="border:5px solid black" /> 343 | 344 | Whoa. That's a lot of crap in there. Let's break it down. 345 | 346 | The first part of the declaration is obvious, `border`. This is the property that we're editing. Man, this is easy. 347 | 348 | Next, we have 3 parts in the value section. The first part is `5px`. Firstly, `px` stands for *pixels*. We used this above for our width and heights as well. You always have to include the units (just like in 5th grade math) in your styling, and our units here are pixels. Now, that whole first part, `5px`, is the border's thickness. You guessed it: it's 5 pixels thick. Gosh you're smart. 349 | The next part is the *border style*. You can plug in several words here, as indicated [on this webpage](http://www.w3schools.com/css/css_border.asp). We used `solid`, but you can also say `dotted`, `dashed`, or `double`. There are some other words you can use, but those depend on the color of the border. 350 | Color? What? OH YEAH. That's the third part of the border style. You can stick in any color for that, but in this example, we have `black`. 351 | 352 | 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 `<body>` tags of style1.html and check it out, and play with the values yourself! 353 | 354 | <img src="http://i.imgur.com/wjiVXJe.gif" style="border:5px dotted #ffcc00" /> 355 | <img src="http://i.imgur.com/wjiVXJe.gif" style="border:10px ridge rgb(77, 145, 99); width: 300px" /> 356 | <img src="http://i.imgur.com/wjiVXJe.gif" style="border:8px outset red" /> 357 | <img src="http://i.imgur.com/wjiVXJe.gif" style="border:3px double #333a21; height: 30px" /> 358 | 359 | 360 | Notice how I added `width` and `height` to a couple of them. We're getting incestuous with our stylings. Aww yeah. 361 | 362 | #### Text Styles 363 | 364 | 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. 365 | 366 | Add the following to style1.html in **3 - Styles**: 367 | 368 | <p style="text-align: center; font-weight: bold">This text is magnificent.</p> 369 | 370 | 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. 371 | `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). 372 | 373 | Play with this one now: 374 | 375 | <p style="font-family: Arial; font-style: italic">This text is magnificent.</p> 376 | 377 | Browser time. You've now got some text in the font Arial, and it's italic! WOOO HOOOOOO. 378 | 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. :) 379 | And for `font-style`, it can be `normal`, `oblique`, and `italic`. You can play with those now, it's pretty straightforward. 380 | 381 | ### The `<head>` Tag 382 | 383 | 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 `<head>` tag. 384 | 385 | I mentioned before that in the `<head>` is information that the user doesn't see, so it's not that big of a deal, right? WRONG. It's not all about looks. That's at least what I try to tell people when they see me. 386 | 387 | So. What else can go in the `<head>`? We've already got `<title>`, which we've talked about already to help search engines find us. What if we want to help the search engines out a bit more? Incoming, the `<meta>` tag. 388 | 389 | 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. 390 | 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. 391 | 392 | 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. 393 | Open up the **4 - Head** (heh get it? Forehead? I crack myself up.) folder, and open cooking.html in your favorite editor. 394 | 395 | * *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: 396 | 397 | `<meta name="keywords" content="cooking, cook, recipe, food, microwave">` 398 | 399 | Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice! 400 | 401 | * *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: 402 | 403 | `<meta name="description" content="The best cooking website in the entire universe. You're welcome.">` 404 | 405 | 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. 406 | 407 | * *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: 408 | 409 | `<meta name="author" content="Sexy McGoodlooking">` 410 | 411 | Add this after your description line, and stick your name in it! I think I got it as close as possible. 412 | 413 | * *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: 414 | 415 | `<meta http-equiv="refresh" content="30">` 416 | 417 | And there you have it, a self-refreshing webpage. You're so good at this. 418 | 419 | ### Putting it all together so far 420 | 421 | Okay, you have a pretty solid understanding of stuff so far. I want you to take cooking.html, and make it shine. 422 | 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. 423 | Using the information I've given you so far, you can make a pretty good looking site! 424 | 425 | ## CSS is magical, and now you're gonna learn it. 426 | 427 | So far, we've been making things pretty the wrong way. So, we're going to learn it the right way. So excited. 428 | 429 | Right now, I'm going to show you how to write CSS just straight in your HTML documents. That's still kind of wrong, but it'll give you the basics. After that, we'll move into the big leagues and have separate files for everything. Pumped. 430 | 431 | Open up your **3 - Styles** folder again and open style2.html in your favorite editor. This site is pretty barebones. Let's take out the barebones part and just make it pretty. 432 | 433 | We're going to be working in the `<head>` tag again. Underneath the `<title>` tag, stick in the following: 434 | 435 | <style> 436 | body 437 | { } 438 | 439 | h1 440 | { } 441 | 442 | p 443 | { } 444 | 445 | ol 446 | { } 447 | </style> 448 | 449 | 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. 450 | 451 | 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. 452 | Whatever code you have in those curly braces will only affect that tag, so if you try editing the font colors for the `h1` selector, it won't affect whatever is in the `p` selector's tags. Each portion of code `selector { code }` in CSS is called a *declaration*. Make sense? Good. If not, keep reading and hopefully it will become more clear as we go on. 453 | 454 | 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: 455 | 456 | <style> 457 | body 458 | { 459 | font-family: Arial; 460 | } 461 | 462 | h1 463 | { 464 | color: red; 465 | text-align: center; 466 | } 467 | 468 | p 469 | { 470 | font-weight: bolder; 471 | } 472 | 473 | img 474 | { 475 | width: 400px; 476 | border: 5px solid #333333; 477 | } 478 | 479 | ol 480 | { 481 | color: #333333; 482 | } 483 | </style> 484 | 485 | 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! 486 | 487 | You will always have your CSS in the syntax, `selector { property: value; property: value; }`. I've only shown you some properties so far, but don't worry. There are plenty more to come. 488 | 489 | 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! 490 | 491 | ### Classes and IDs and other Segregation 492 | 493 | 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? 494 | 495 | #### Classes 496 | 497 | Let's say that we have 8 `<p>` tags on our HTML page (hint: open style3.html in the **3 - Styles** folder). 498 | 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. 499 | Check out style3.html to see the classes I added to the `<p>` tags on the page. When you add a class, the user doesn't see it. 500 | But, you can style specific classes to do what you want, instead of having all `<p>` tags be the same. 501 | 502 | 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: 503 | 504 | .poemtitle 505 | { 506 | 507 | } 508 | 509 | And there you have it! Even though you might have different styles for your paragraphs, you can style the ones of class `poemtitle` individually. 510 | 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`. 511 | Try doing it on your own if you can (just put your code in the given `<style>` tags), but you're welcome to cheat: 512 | 513 | p 514 | { 515 | font-family: Arial; 516 | } 517 | .poemtitle 518 | { 519 | font-weight: bolder; 520 | } 521 | .author 522 | { 523 | color: #555555; 524 | } 525 | .poem 526 | { 527 | font-style: italic; 528 | } 529 | 530 | Gosh you're good at this. Go eat a cookie. 531 | 532 | [Pausing here for cookie break] 533 | 534 | #### IDs 535 | 536 | 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: 537 | 538 | <p id="special">This is so special that I want it uniquely styled forever.</p> 539 | 540 | When you want to style your IDs, you put a hashtag `#` before it in your CSS, like so: 541 | 542 | #special 543 | { 544 | 545 | } 546 | 547 | 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. 548 | 549 | #### Other Segregation 550 | 551 | Let's say that you want to separate individual text in your paragraphs or sections on your page. Let's introduce 2 new tags: `<span>` and `<div>`. 552 | 553 | ##### The `<span>` tag 554 | The `<span>` 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. 555 | 556 | 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: 557 | 558 | <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> 559 | <p>~ Ellen DeGeneres </p> 560 | 561 | 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. 562 | 563 | 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: 564 | 565 | p span 566 | { 567 | font-style: italic; 568 | } 569 | 570 | 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: 571 | 572 | span 573 | { 574 | font-weight: bold; 575 | } 576 | .author span 577 | { 578 | color: #999999; 579 | } 580 | 581 | 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. 582 | 583 | ##### The `<div>` tag 584 | 585 | Alrighty. Go enjoy a beach vacation and then come back to this. 586 | 587 | Welcome back. 588 | 589 | The `<div>` tag is very similar to the `<span>` tag, in that it separates a section of something but doesn't do much else. However, the difference with `<div>` tags is that they are *block level* elements, not just within a line of text. 590 | 591 | The `<div>` tag might end up being the tag that you use most often. It is what lets you easily make website layouts (with help from CSS of course), and so, let's play with it! 592 | 593 | Open up the **5 - Layout** folder, and use your editor to open `homepage.html`. 594 | 595 | <!doctype html> 596 | <html> 597 | <head> 598 | <title> My Website 599 | 602 | 603 | 604 |
605 |
606 |
607 |
608 | 609 | 610 | 611 | Besides the `
` tags, everything here should look familiar. Each of the `` have a `class`, which means we should style those, right? Right. 612 | 613 | Within those `