100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | loglevel=silent
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | First Website
2 | ===
3 |
4 | We're gonna go live on GitHub with your very own website!
5 |
6 | **Table of Contents**
7 |
8 | - [First Website](#first-website)
9 | - [Prerequisites](#prerequisites)
10 | - [Overview](#overview)
11 | - [Specs](#specs)
12 | - [Take Away](#take-away)
13 | - [Work Flow](#work-flow)
14 | - [Type of App](#type-of-app)
15 | - [The Big 3](#the-big-3)
16 | - [HTML in 3 Minutes](#html-in-3-minutes)
17 | - [Lesson Steps](#lesson-steps)
18 | - [TODO 1 : Create index.html](#todo-1--create-indexhtml)
19 | - [TODO 2 : Add a Title](#todo-2--add-a-title)
20 | - [TODO 3 : Create Sections for the Menu and Main Content](#todo-3--create-sections-for-the-menu-and-main-content)
21 | - [TODO 4 : Create Structure for our Content](#todo-4--create-structure-for-our-content)
22 | - [TODO 5 : Add Content](#todo-5--add-content)
23 | - [TODO 6 : Add More Content - Interests](#todo-6--add-more-content---interests)
24 | - [TODO 7 : Add an Image and List](#todo-7--add-an-image-and-list)
25 | - [TODO 8 : Navigation and Site Title](#todo-8--navigation-and-site-title)
26 | - [TODO 9 : Make it Pretty](#todo-9--make-it-pretty)
27 | - [CSS Selectors in a Nutshell](#css-selectors-in-a-nutshell)
28 | - [Selecting HTML Elements by ID, Class, or by Tag Type](#selecting-html-elements-by-id-class-or-by-tag-type)
29 | - [TODO 10 : Play around with the CSS](#todo-10--play-around-with-the-css)
30 | - [Extra Credit](#extra-credit)
31 | - [TODO 11 : Add to gitignore](#todo-11--add-update-gitignore)
32 | - [TODO 12 : Go Live](#todo-12--go-live)
33 |
34 | ## Prerequisites
35 |
36 | * [Students will require a GitHub account](https://github.com/join) and will need to remember their GitHub username and password.
37 |
38 | GitHub is a place on the Internet where we can store code! It's a cool social coding platform, kind of like Facebook for coders.
39 |
40 | * [Students will require an AWS Educate account](https://aws.amazon.com/education/awseducate/) (or some other IDE)
41 |
42 | On AWS Educate we will use the Cloud9 service. Cloud9 is a place on the Internet where we can _work_ on code and create virtual workspaces for our coding projects.
43 |
44 |
45 |
46 |
47 | ## Overview
48 |
49 | ### Specs
50 |
51 | * At the end of the lesson students will have built and designed their own website that is viewable on the web.
52 | * The website will be hosted on GitHub under student's own account, and is something they can build upon on over time.
53 | * The live website is hosted using a service called GitHub Pages: If you want to learn more about GitHub Pages, have a look here...
54 | * The website will be the student's own and will feature a short profile of the student.
55 |
56 | ### Take Away
57 |
58 | * Basic HTML5, including HTML (content) and CSS (style).
59 | * Basic web page navigation
60 | * Using git and GitHub
61 |
62 | ### Work Flow
63 |
64 | You'll be creating a whole web page from scratch, from creating the `index.html` file, to writing all the `` tags, adding content and style with CSS.
65 |
66 | To complete the assignment, below you'll find numbered **TODO** lesson steps. While reading this lesson, whenever you come across a **TODO** step, you are expected to do this step, which may require you to create a file, or insert some HTML, CSS or JavaScript in the appropriate place.
67 |
68 | Please follow the instructions closely. Sometimes, however, we may be showing you code examples to make a point, so you only need to add code if we're explicitly telling you to do a lesson step, so please be aware of the actual lesson steps.
69 |
70 | ### Type of App
71 |
72 | We are building a website, to be viewed live on the web at your GitHub page, and it will be viewed in a web browser, like Chrome.
73 |
74 | ## The Big 3
75 |
76 | There's really three parts at play in a webpage:
77 |
78 | * HTML: Hypertext Markup Language - A set of tags to mark or section-off the structure and content of a webpage.
79 | * CSS: Cascading Style Sheets - A syntax for specifying a set of rules that _style_ web pages. CSS is responsible for how a webpage looks!
80 | * JavaScript: A programming language that allows web pages to respond to user input, to dynamically change the content or appearance of a webpage, or make request to load data into a webpage. Essentially, JavaScript is responsible for the _behaviour_ of a webpage.
81 |
82 | ### HTML in 3 Minutes
83 |
84 | Very simply put, HTML is a set of text-tags that tell a web browser how to structure and identify the content of a web page. Developers _markup_ or _section off_ the structure and content of a webpage using HTML tags to _section off_ the parts of the page. Take a look at any webpage, and you'll see things like a header with some type of navigation, maybe a sidebar with more navigation options, and then headings, paragraph text, images and buttons. All of these _page elements_ are marked as such using HTML tags.
85 |
86 | Before we start marking-up our webpage, here's a few things to note about HTML Tags:
87 |
88 | Try to remember that most HTML tags have both an opening and closing tag. So, when you create a `
` tag, which stands for _document division_ (a way of sectioning off page content), you must also create its closing tag, like so:
89 |
90 | ```HTML
91 |
92 |
93 |
94 | ```
95 |
96 | Some HTML tags, like the `` tag, do not require a closing tag, because they are not designed to hold content between the opening and closing tag. The image tag specifies the source of the image it should display using what's called a tag _attribute_, which is a property of the tag, not content of the tag. Check it out:
97 |
98 | ```HTML
99 |
100 | ```
101 |
102 | Notice, above, that the `src` attribute is located _inside_ the `` tag.
103 |
104 | Also note that HTML tags are hierarchical, and **need to be indented to illustrate their hierarchical relationship!** Tags can contain content, like text or images, but can also contain or _nest_ other tags. Have a look:
105 |
106 | ```HTML
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 | ```
116 |
117 | Above, you'll see this pattern often - notice that we have one `
` tag with an id attribute of `content`, and inside this tag, we have two other `
` tags, one for a sidebar and one for a main section of the page. The _content_ `
` is the parent of both the _sidebar_ and _main_ `
`, while _sidebar_ and _main_ are siblings. Notice the indentation - this is extremely important as it clearly and visually spells out these hierarchical relationship. Indentation and relationships of tags (and code blocks) are the things newcomers struggle with the most! Be vigilant here!
118 |
119 | ## Lesson Steps
120 |
121 | ### TODO 1 : Create index.html
122 |
123 | 1. On the left side of your workspace, locate your github.io repository folder.
124 |
125 | 2. Right click on the folder and select “New File” (See below)
126 |
127 |
128 |
129 | 3. Make sure to name the file `index.html` (See below)
130 |
131 |
132 |
133 | Add the following boilerplate code to get started:
134 |
135 | ````HTML
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | ````
147 |
148 | If you're not familiar with the basic tags needed for the structure of an HTML page, you'll want to memorize them.
149 |
150 | At least for now, every HTML page contains the DOCTYPE, html, head and body tags. The `` tag tells the browser you want to render the document using the most recent version of HTML. The opening and closing tags of `` wrap our html page, but are in fact somewhat redundant.
151 |
152 | The next two tag sets make up the two sections of any well formed HTML page: The `` tag represents metadata for a webpage, that is, information about the web page used by the browser, providing extra information about the webpage, but is not content. This is similar to the information on the outside of a postal envelope - the to and from address, the stamp, the processing stamp from the post office - information important to the delivery of the letter, but _nothing_ to do with the _content_ of the letter.
153 |
154 | Finally, every page has a `` tag, and it is between the body tag that all visible content will be placed. That's right, all content you want to show to the user will be children of the ``, so pay careful attention to ensure that when you're adding navigation, paragraphs and images tags, you're doing so within the `` tag.
155 |
156 | Ok then, we made the structure of the site so now we need some content! Give your site a title.
157 |
158 | ### TODO 2 : Add a Title
159 |
160 | The `` tag of a webpage belongs inside of the `<head>` tag. So go ahead and add your title `<title>` tag to your `` tag. This will add your title text to the browser tab. When your done step 4, your whole `index.html` file should look like this:
161 |
162 | ````HTML
163 |
164 |
165 |
166 | Sheba's Amazing Website
167 |
168 |
169 |
170 |
171 |
172 |
173 | ````
174 |
175 | ### TODO 3 : Create Sections for the Menu and Main Content
176 |
177 | **Please note:** All of the tags used to mark our HTML content will reside _between_ the opening and closing of the `` tag. So for rest of the HTML tags you create, _make sure_ you place them _between_ `` and `` like so:
178 |
179 | ```HTML
180 |
181 |
182 |
183 | ```
184 |
185 | We're going to create `
` tags to group our content together. The `
` tag stand for _document division_, and they are special tags that help us divide or group together content on our web page. You can consider them sort of like containers, into which we group content, and those containers can be invisible or _styled_ with visible properties, like a background color, a border, etc.
186 |
187 | Go ahead and add the following structure, so that your `` looks like this:
188 |
189 | ```HTML
190 |
191 |
192 |
195 |
196 |
197 |
198 |
199 |
200 |
201 | ```
202 |
203 | So, to start grouping together our content in a meaningful way, inside the `` tag, we created a new document division using the `
` tag. This is going to contain all the site content so we annotated it as such by setting its _id_ attribute to `id="all-contents"`. Attributes are properties that tell us something more specialized about the tag, and you'll come to understand how these work as you work more with HTML.
204 |
205 | In particular, the `id` attribute allows us to _uniquely_ identify an HTML element in our webpage. Technically speaking, when giving an id to an element, this id _should be_ unique within the page - no two elements should share the same id in the same webpage, and this is an important distinction.
206 |
207 | Finally, inside our _all-contents_ div, we're going to put the site navigation menu and the main content of our site, so we created opening and closing tags for `
80 | 
100 | ```
101 |
102 | Notice, above, that the `src` attribute is located _inside_ the `
128 |
129 | 3. Make sure to name the file `index.html` (See below)
130 |
131 | 
132 |
133 | Add the following boilerplate code to get started:
134 |
135 | ````HTML
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | ````
147 |
148 | If you're not familiar with the basic tags needed for the structure of an HTML page, you'll want to memorize them.
149 |
150 | At least for now, every HTML page contains the DOCTYPE, html, head and body tags. The `` tag tells the browser you want to render the document using the most recent version of HTML. The opening and closing tags of `` wrap our html page, but are in fact somewhat redundant.
151 |
152 | The next two tag sets make up the two sections of any well formed HTML page: The `` tag represents metadata for a webpage, that is, information about the web page used by the browser, providing extra information about the webpage, but is not content. This is similar to the information on the outside of a postal envelope - the to and from address, the stamp, the processing stamp from the post office - information important to the delivery of the letter, but _nothing_ to do with the _content_ of the letter.
153 |
154 | Finally, every page has a `` tag, and it is between the body tag that all visible content will be placed. That's right, all content you want to show to the user will be children of the ``, so pay careful attention to ensure that when you're adding navigation, paragraphs and images tags, you're doing so within the `` tag.
155 |
156 | Ok then, we made the structure of the site so now we need some content! Give your site a title.
157 |
158 | ### TODO 2 : Add a Title
159 |
160 | The `