Udacity introduction to programming

Thinking Like a Programmer

A large goal of this Nanodegree is to give you practice thinking like a computer
programmer. Longtime programmers will often talk about how the programming
thought process has helped them in other areas of their life, but what does it
mean to "think like a programmer?" In this Nanodegree we will focus on five
specific ways of thinking that all programmers have to use all the time. We will
come back to these ideas repeatedly throughout the Nanodegree.

1. Procedural Thinking
Procedural thinking involves creating perfectly clear and unambiguous
instructions for a computer to follow.
It may be easy to tell a person how to sort a deck of cards, but getting a
computer to do that requires more thought. But once you've learned to think
this way you'll find that computers can do it much faster.

2. Abstract Thinking
Abstract thinking means finding similarity, or as programmers would
say, generality amongst seemingly different things.
In this Nanodegree you will visit hundreds of Udacity web pages. It would be
impractical for a programmer to specifically program each of these pages
individually. The Udacity programmers used the power of what's
called abstraction to avoid unnecessary repetition of work.

3. Systems Thinking
Systems thinking happens when you break a big problem down into smaller
pieces. Programmers do this when they create a plan (often on paper) for how a
program will work. It involves big-picture thinking and decision-making about a
problem and how different pieces of a program can work together to solve it. If
this is unclear now, don't worry! You'll understand what this means much more
clearly by the end of the Nanodegree.

4. Technological Empathy
"Technological empathy" comes in many forms. For example, computer empathy
is the ability to understand what a computer is, how it works, and what it's good
and bad at doing.
A computer is a tool, as are the programs we use and the programming
languages used to write them. It's almost impossible to program anything
substantial without a basic understanding of how these tools work.

5. Debugging
Debugging is a systematic process of relentlessly identifying the cause of a
computer program that doesn't work.
When a program doesn't work, it's because there is a mistake (also known as a
"bug") somewhere in the computer code. Since these mistakes are an
unavoidable part of programming, every good programmer has a system for
fixing them and that system usually looks something like this:
1.
2.
3.
4.

Collect evidence (what makes this program fail?)

Generate theories (what may have caused this problem?)
Test those theories (if my theory is correct, how could I find out?)
Fix the problem
Don't forget!
Return to your Udacity Home by clicking Udacity in the navigation bar at the
top of your screen.
Connect with coaches and your fellow students using the Discussion button on
the left side of your screen. We're here to help you. Let's learn together!

How This Will Work

I've been taking and making online courses for the last three years. This
Nanodegree is a curated path of what I've found to be the very best content out
there. Much of it is made by Udacity, but some of it isn't (scratchpad.io, for
example).
This Nanodegree is...

Composed of a series of projects broken into 5 stages. At each stage you

will see a series of lesson videos, followed by a final project that will ask you to
demonstrate the skills you just learned. These projects will cover a wide range of
topics, from web development to computer science fundamentals to
understanding the roles of engineers in a tech company.
Each stage is a collage of content sampled from a variety of classes
taught by professional programmers, tech company creators, and university
professors.
I will help you focus on the most important concepts by providing context
and occasionally filling in gaps.
Don't forget!
Return to your Udacity Home by clicking Udacity in the navigation bar at the
top of your screen.
Connect with coaches and your fellow students using the Discussion button on
the left side of your screen. We're here to help you. Let's learn together!

Your Learning Mindset

In order to be successful you'll need to be self-motivated to learn. This program will be
challenging, and it may be tempting to take a long break or even stop when you get stuck.
Students who persevere, are consistent, and seek out answers on their own are best suited
to succeed. Keep asking questions and never give up!
In a later lesson, we'll dive into this a bit more. For now, there are some basic computer
skills that will be vital to success. REMEMBER: if you aren't an expert in this just yet, you
will simply need to have the mindset to be willing to learn them as you go. Instructions
for each of these skills are provided here. Bookmark this link so you can come
back whenever you need to.
Basic computer skills you'll need:

Find the location of a file on your computer

Attach a file to an email
Rename a file
Compress (zip) and uncompress a file
Download and install programs from the internet

Connecting with your community

Your Nanodegree program will challenge you. That's what happens when you're really
learning! To surmount these challenges, make use of the resources available to
you. Your Nanodegree community will play a huge role in supporting you when you get
stuck and in helping you deepen your learning.
You can head to your forums to ask and answer questions and contribute to discussions.
The Udacity Coach team, as well as the other students in your program, will be there to
respond and help out. You can search to see if someone has already asked a question
related to yours, or you can make a new post if no one has. Chances are, someone else is
wondering about the same thing you are, so dont be shy!

Tips for Asking Good Questions

When reaching out for help in the forum, there are some key strategies to get the best
possible support.
Provide context
Include URL links to the video or quiz you need help with.
Explain your process (include screenshots if necessary)

 Got an error message? Include it!

Format your code using Markdown
On the line before and after your code, use three backticks(```) Checkout some
examples below!

Su
pport from the Udacity Team
The Udacity team is here to help you reach your Nanodegree goals! Select Resources at
the top-right of the page to access discussion forums and 1:1 appointments with coaches.
Our mission is to make your learning experience as effective and smooth as possible. Let
us know how we can help!

Forums: Along with your student community, the Udacity team maintains
a strong presence in the forum to help make sure your questions get answered
and to connect you with other useful resources.

Slack Community: This platform allows students to quickly chat about

issues in any of the course material as well as offer help to stuck classmates. If
you haven't joined yet, use this invitation link to join your fellow classmates in
the IPND Slack Community.

1:1 Appointments: For more specific, coding-related questions, schedule

a one-on-one appointment with a Coach by clicking on Coach Appointments in

the Resources tab of your Udacity home. We will help you get those bugs
resolved in no time!

How Does Project Submission Work?

Quiz: Integrity And Mindset

The Udacity Team has provided deadlines for you based on our analysis of the time it has
taken students who have gone before you to complete each stage. We provide project
deadlines in order to keep students on track to graduate within our recommended time
frame.
We know life gets in the way once in awhile. If you miss a deadline, don't worry! Just do
your best to get back on schedule. Don't forget, there is no penalty for missing a deadline
and you are more than welcome to establish your own timeline according to your personal
schedule.
You can always submit projects early, so if you complete a project before your designated
deadline, go ahead and submit it and keep moving forward. Never stop learning!
The Udacity Team has provided deadlines for you based on our analysis of the time it has
taken students who have gone before you to complete each stage. We provide project
deadlines in order to keep students on track to graduate within our recommended time
frame.
We know life gets in the way once in awhile. If you miss a deadline, don't worry! Just do
your best to get back on schedule. Don't forget, there is no penalty for missing a deadline
and you are more than welcome to establish your own timeline according to your personal
schedule.
You can always submit projects early, so if you complete a project before your designated
deadline, go ahead and submit it and keep moving forward. Never stop learning!

Quiz: How Do I Find Time For My Nanodegree?

We've looked at the data, talked to Udacity graduates, and found some keys to success.
Checkout the results of our research below, or visit the Study Tips blogpost (with a
video message from Udacity Data Scientist, Nick,) for the full version.

Final Tips

.
Html
An Early Win

What you are about to see is the first lesson of the first course of this
Nanodegree.
You should complete this lesson in a few days if you can. Throughout this
lesson you will be taking notes on what you're learning. Afterwards, you will
convert your notes to simple HTML (like what you're reading now) and then
submit them for personalized feedback from a Udacity reviewer.
Personal feedback is one of the best parts about taking a Nanodegree, and
we want you to experience it as early in the program as possible.

Try your best to complete this lesson (and Stage 0 which comes after), within
a week of signing up!

Where to Focus Your Attention

Your instructor for this lesson is Steve Huffman.

Steve is the cofounder of Reddit, an incredible programmer, and an amazing teacher. He

taught me a lot of what I know about building real web pages with code.
This lesson has two parts.
Part 1

In Part 1 you will develop enough technological empathy to understand what

happens when you open (or create) a web page. Specifically, you'll gain:

Basic understanding of how the internet works.

Understanding of how users, computers, servers, http, and the
internetall fit together.
Part 2

In Part 2 you will use HTML tags to create a simple HTML document that a browser
can display as a web page.
Note that the next video is Steve introducing the entire course. You won't actually take the
whole course in this Nanodegree program, but it's still worth learning what his course covers
in case you decide you want to take the whole thing later.

Unit 1
The basics of the web

1)
2)
3)
4)
5)

The web
HTML
URLS
HTTP
Web Applications

Questuions
1)
a.
b.
c.
d.

What is the main type of document on the web ???

Html <<correct>>
Microsoft word
Pdf
Plain text

2) What type of file can be found on web ???

All of the given below
Plain text
Html
Images
Videos
Music
Major pieces
Html
Hyper text mark up language
Html is made up of
=>text content what you see
=>mark up what it looks like
=>references to--------------Other documents -------- e.g images. Videos
Links to other pages
Html markup
<NAME>contents</NAME>
OPENING TAG

CLOSING TAG

Quiz: Bold Tag

Note: the textbox should have default text in it for you to edit. In the meantime,
it should look like this:
HTML is reasonably straightforward

Your job is to make "reasonably straightforward" bold by using the <b> tag.

Em tag => emphasis tag --- >> I makes things italic !

Quiz: Italics
Instructions: Make the phrase 'HTML is reasonably straightforward' italic.
Note: the textbox should have default text in it for you to edit. In the meantime,
it should look like this:
HTML is <b>reasonably straightforward</b>

Computers Are Stupid

Programmers often describe computers as "stupid."
When they say this, they (usually) aren't insulting computers. They are addressing an
important point about how computers understand the instructions that human programmers
give them.
In spoken languages, we can craft sentences with a great deal of ambiguity. Consider,
for example, the sentence "Each of us saw her duck." Does that mean each of us saw her
pet duck? Or did we each see her duck under something? Depending on the context, you
might be able to infer which interpretation is correct.
Computers can't make these inferences and so they interpret language literally. Computer
programming languages are designed to limit ambiguity, but sometimes this can result in
issues between the programmer and the machine.

Keep this idea in mind as you watch the next video. Think about how sensitive computers
are to typos and how small mistakes (mistakes that a "smart" human could easily correct)
can lead to huge problems when given to a "stupid" computer.

Quiz: Missing End Tag

If you miss the closing </em>Tag everything after opening <em> tag is italicized

HTML ATTRIBUTES
<TAG ATTR=value>contents</TAG>
Anchor -<a>--=> links
<a href=www.google.com>hello</a>
Opening tag

URL

closing tag

Attribute name

Quiz: Making Links

Errata:
URLs need the protocol

The URL in the link should be "http://udacity.com" and not "udacity.com".

If the default text is missing

IMAGES
<Img> src=url(link to content or site) alt=alternate text(it looks with image)
Required broken request
Blind
<Img> tag has no closing tag its also known as void tag

VOID tag is a tag that has no contents. As it has no contents in it so it is not

requiring a closing tag.
<img >src=http://udacity.com/cs253x/hipmunk.png alt = hipmunk>

It's OK to Forget
You may be wondering why anchor tags use the href attribute while img tags use
the src attribute. And you may become frustrated when (not if) you make the mistake of
using one when you really need the other. Because when you make this mistake, your
HTML will not work.
So how will you ever remember details like this? Well... you don't have to!
In fact, you may have already forgotten how to add links to HTML. That's fine. Unless
you're writing HTML all the time, details like these aren't worth remembering. A Google
search for "adding links in html" will always get you your answer.
New programmers often struggle with this because in other learning environments it's often
important that you remember a lot of facts. But programming doesn't work like that! There's
just too many facts to remember them all. Instead, you need to understand a few big ideas
and know how to get the details you need when you need them.
When you do forget stuff, there's lots of resources to help you out. A Google search is
usually helpful. Another great place is http://www.w3schools.com/, a website with
lots of documentation on web development, including a huge reference guide of HTML
tags. As you get more experience programming, the more you'll learn about all the amazing
resources the web has for new andprofessional programmers.

Quiz: Whitespace
Note: the textbox should have default text in it for you to edit. In the meantime,
it should look like this:
Hello everyone! We're using two lines now!

Your job is to insert a line-break using the <br> tag.

Quiz: Paragraph Tag

Note: the textbox should have default text in it for you to edit. In the meantime,
it should look like this:
Hello everyone! We're using two lines now!

Your job is to insert a line-break using the <p> tag.

Inline Vs Block
"\n" that Steve writes is how programmers represent a "newline" character in
common coding languages such as C, Java, Python, etc.

<br> inline it have no space in height very close

Ex
Hello hello
Hello hello
Text <br>text

text is very close

<p>block it has some difference in height and width

Exe

Hello hello
Hello hello

there is a gap in two lines

<p>text></p>text

Where to Focus
In the previous video Steve explained the distinction between inline and block elements.
You might be a bit confused about the difference between the two, and that's okay. It's not
necessary to understand everything right now and this topic will be revisited in the next
lesson.
In the next video you will have your first encounter with container elements: elements
that do nothing but contain stuff inside themselves. The purpose of these elements will not
be clear yet, but in the next lesson you will see how these elements can be used to create
web pages with complex structures.

Quiz: Span And Div

We now recommend using scratchpad.io instead of the HTML playground
Steve refers to.

Difference between span and div

<span class=hello>
CSS
Text
</span>
Inline

<div class=bar>
text
</div>
block

<span>this is one line</span>

yes this is one line
----=== this prints the whole text in one line
<div>this is one line</div> this prints the text in two lines
yes this is one line

That's right! a, span, br, img, and strong are all inline elements while
div, p, and form are block elements.
HTML DOCOUMENT
<!DOCTYPE html>
<html><head>
<title>Title</title>
</head>
<body>
Content </body>
</html>.

head, metadata,java script,css

HTML Document Structure

The concept of code structure will come up frequently thoughout this Nanodegree program.
That's because programmers write code not just for computers, but for people as well.
Writing code that people can easily read is a VERY important idea in computer
programming. And a huge part of writing good code is structuring it well.
If you've ever written an English essay, you're familiar with the purpose of indenting every
paragraph. It's a visual marker that a new idea has begun. Indentation serves a similar
purpose in writing code. Some languages have slightly different rules about proper
indentation, but the concept is generally the same as in English - a new indent is a new
idea.
One big difference between indenting programming languages and indenting English,
however, is that an indentation level persists throughout an idea. In HTML particularly, the

indentation level increases when an idea begins and decreases when an idea is finished.
If this is a bit confusing, let's look at an example:

Lesson 1 Summary
You've learned a lot so far! Let's recap some of the big ideas:

The World Wide Web

The web is composed largely of HTML documents. HTML stands for Hypertext Markup
Language and is the language the browsers use to interpret web pages. The components
of the web include the client (your computer and browser), the Internet, and servers.
The client and servers interact through something called the Hypertext Transfer
Protocol (HTTP).

Basic HTML Elements

HTML Elements are what we use to tell a web browser how to display content in a web
page.
Most HTML elements consist of an opening and a closing tag with
some contentbetween them.
<b>text</b> Makes the 'text' content bold
<em>text</em> Makes the 'text' content italic

HTML Attributes
Some elements accept additional values called attributes in their opening tags.
Attributes provide additional information to the browser. For example, the anchor tag takes
an attribute called href that defines a URL to link to.
<a href="url">link</a> Creates a hyperlink to the href attribute value urland names it link
<img src="url" alt="text"> Displays the image hosted at the src attribute value "url" (this

can also be a path to a local file on your computer). If the image cannot be displayed, then
the alt attribute value "text" is shown.

More HTML Elements

<p>text</p> Defines a paragraph. The content of the <p> element is in a "box"
<br> Creates a line break
<div>content</div> Creates a "box" container element
<span>content</span> Creates an "inline" container element

Let's disect this code a bit:

1) The first line is something that should appear on every webpage you make. <!DOCTYPE
html> defines the type of the document so the browser will render it correctly.
2) The <html> tag opens our document. Everything that shows on the webpage is placed
within this tag.
3) The <head> tag defines metadata for our web page. This includes the title of the page
(this is what appears in the top of your tab or browser window). Notice that the <head> tag
is indented to a new level because the <html> tag was opened but not closed (a new idea
was started but not completed). Moreso, the <title> tag is indented another level further
(the <head> tag was opened but not closed).
4) The <title> tag is closed on the same line it was opened which we usually do if the
content of a tag is short. On the other hand, the <head> tag is closed on a different line.
The closing tag is indented to the same level as the matching opening one.
Now take a look at the contents of the <body> tag. Is there anything about the structure
that is surprising to you?

Project Submission

Getting Feedback
Throughout your Nanodegree program, you will submit your work for review.
When you submit a project, you will receive a grade that indicates either that

you've passed that stage or that you need to work on your project and submit
again.
Important:

You will not receive a grade for your Stage 0 submission (but
you will receive feedback)
We want you to submit your notes from the first lesson within one week of
beginning the Nanodegree, but there will not be any consequences for
missing this deadline.
Future stages (Stage 1 - Stage 5) should try to be completed on time.
This is a formative checkpoint designed to give you immediate
feedback and ensure you have the confidence and the support you need to keep
moving forward.
Stage 0 Project:

Write your notes in an html file using the tags learned in this Stage such
as <p>,<div>, <h1>, <b>, <em>, <span>
Keep it simple. CSS for styling is not necessary for the Project.
Make sure you use proper HTML Document structure for your code. Refer
to this lesson if you need help with this structure.
Once you are ready with your html file, use the Submit Project button to
upload your project for review!
Important Concepts

How the Web Works

The web is a bunch of computers that communicate with each other. When a person
goes to a web page like www.google.com, their computer sends a HTTP Request to
a server. The server finds the appropriate HTML document and sends it back to the
user's computer where a web browser interprets the page and displays it on the user's
screen. This video does a good job of explaining.
HTML
HTML stands for Hypertext Markup Language. HTML documents form the majority
of the content on the web. HTML documents contain text content which describes
"what you see" and markup which describes "how it looks". This videogives a good
overview.

Tags and Elements

HTML documents are made of HTML elements. When writing HTML, we tell
browsers the type of each element by using HTML tags. This video explains the
distinction well.
Why Computers are Stupid
Computers are stupid because they interpret instructions literally. This makes them
very unforgiving since a small mistake by a programmer can cause huge problems in a
program.
Inline vs Block Elements
HTML elements are either inline or block. Block elements form an
"invisible box" around the content inside of them.
HTML
<!-- This line is an HTML comment. -->
<!-- Comments help PEOPLE read code. They are ignored by the computer. You
should use comments to leave notes for yourself (and anyone else who might read
your code later). -->
<!-- The <head> element contains information that won't be displayed on the page.
-->
<head>
<!-- The <title> element normally sets the name of the browser tab (but in this
example codepen's title overrides the title I set) -->
<title>Andy's Notes</title>
</head>
<!-- The <h1> tag stands for "heading 1". Heading tags go all the way up to <h6>.
Lower numbered headings indicate content that is more important. -->
<h1>Important Concepts</h1>
<b>How the Web Works</b>
<p>The web is a bunch of computers that communicate
with each other. When a person goes to a web
page like www.google.com, their computer sends
a <em>HTTP Request</em> to a <em>server</em>. The
server finds the appropriate HTML document and sends
it back to the user's computer where a <em>web browser</em>
interprets the page and displays it on the user's screen.
<a href="https://www.udacity.com/course/viewer#!/c-nd000/l-3873828673/e-

48329854/m-48480496">This video</a>
does a good job of explaining.
</p>
<b>HTML</b>
<p>HTML stands for <em>Hypertext Markup Language.</em> HTML documents
form the majority of the
content on the web. HTML documents contain <em>text content</em> which
describes "what you see"
and <em>markup</em> which describes "how it looks".
<a href="https://www.udacity.com/course/viewer#!/c-nd000/l-3873828673/m48724340"> This
video</a> gives a good overview.
</p>
<b>Tags and Elements</b>
<p>HTML documents are made of HTML <b>elements</b>. When
writing HTML, we tell browsers the type of each element by using HTML
<b>tags</b>.
<a href="https://www.udacity.com/course/viewer#!/c-nd000/l-3873828673/m48723444">This video</a>
explains the distinction well.
</p>
<b>Why Computers are Stupid</b>
<p>Computers are stupid because they interpret instructions
literally. This makes them very unforgiving since a
small mistake by a programmer can cause huge problems
in a program.
</p>
<b>Inline vs Block Elements</b>
<p>HTML elements are either <b>inline</b> or <b>block</b>. Block
elements form an "invisible box" around the content inside of
them.
</p>

<p>,<div>, <h1>, <b>, <em>, <span>

Review for submission of my web page

<h1>HTML DOCOUMENT</h1><br>
REQUIRED

Any content on the page should be kept within <body> tag.

2
<!DOCTYPE html>
REQUIRED

The first line of the code should always be <!DOCTYPE html> as it conveys to the rendering browser
that the code is written in HTML. Hence, it should precede any comments written in the code as well,
otherwise some browsers might go berserk.
3
<html><head>
SUGGESTION

Here is the basic structure for HTML code for reference:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Below is the interpretations for tags:
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
4
<title>tHIS IS MY FIRST ASSIGNMENT</title>
AWESOME

Good job with <head> definition. Read more about other <head> tag's child elements here.
5
</head>

6
<body>

7
<img src="C:\Users\SAURABH\Desktop\udacity classes\Assignment\a.png" alt="Picture">
SUGGESTION

Good job adding "alt" text to this <img> element! That will be especially helpful for users with visual
impairments (who use screen readers) and even for Search Engine Optimization.
However, screen readers just read out loud the html text it finds. When it reaches an image, it reads
the alt text. Having that in mind, a more descriptive alternative text would be desirable: ideally it
should describe the content of the image perfectly.
Example: <img src="dog.jpg" alt="Picture of a Golden Retriever dog sitting">
8
The day is <em>awesome</em>and I am learning Html basics n CSS through <b>Udacity
</b>nanodegree
SUGGESTION

Text sections should always be enclosed within <p> tags for structure. They should not be left
dangling in the code.
9
<p>Its so good that I am learning new thing through online</p>

10
<a href="https://www.udacity.com">Nanodegree</a><span>HTML & CSS</span>

11
<div>Its not about learning but the environment that you are getting to learn new things on
the go</div>
SUGGESTION

Optional commentGood job on using <span> and <div> tags.

For the difference between <div> and <span> tags:
Div is a block (new lines appear before and after the element with it consuming the full width
available) element; span is inline (these elements do not force new lines before or after its
placement, and it only consumes as much space as necessary.), so:
-Div's places in separate lines; span's in one line
-Div's has width, span's haven't

This means that to use them semantically, divs should be used to wrap sections of a document,
while spans should be used to wrap small portions of text, images, etc.
For example:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Note that it is illegal to place a block level element within an inline element, so:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
...is illegal.
12
</body>

13
</html>
AWESOME

Good attempt !
Looking forward to more of your wonderful submissions from the coming stages.
Good luck and happy learning. :)
14

HTML Document Structure

The concept of code structure will come up frequently thoughout this Nanodegree program.
That's because programmers write code not just for computers, but for people as well.
Writing code that people can easily read is a VERY important idea in computer
programming. And a huge part of writing good code is structuring it well.
If you've ever written an English essay, you're familiar with the purpose of indenting every
paragraph. It's a visual marker that a new idea has begun. Indentation serves a similar
purpose in writing code. Some languages have slightly different rules about proper
indentation, but the concept is generally the same as in English - a new indent is a new
idea.
One big difference between indenting programming languages and indenting English,
however, is that an indentation level persists throughout an idea. In HTML particularly, the

indentation level increases when an idea begins and decreases when an idea is finished.
If this is a bit confusing, let's look at an example:

Let's disect this code a bit:

1) The first line is something that should appear on every webpage you make. <!DOCTYPE
html> defines the type of the document so the browser will render it correctly.
2) The <html> tag opens our document. Everything that shows on the webpage is placed
within this tag.
3) The <head> tag defines metadata for our web page. This includes the title of the page
(this is what appears in the top of your tab or browser window). Notice that the <head> tag
is indented to a new level because the <html> tag was opened but not closed (a new idea
was started but not completed). Moreso, the <title> tag is indented another level further
(the <head> tag was opened but not closed).
4) The <title> tag is closed on the same line it was opened which we usually do if the
content of a tag is short. On the other hand, the <head> tag is closed on a different line.
The closing tag is indented to the same level as the matching opening one.
Now take a look at the contents of the <body> tag. Is there anything about the structure
that is surprising to you?

Let's disect this code a bit:

1) The first line is something that should appear on every webpage you make. <!DOCTYPE
html> defines the type of the document so the browser will render it correctly.
2) The <html> tag opens our document. Everything that shows on the webpage is placed
within this tag.
3) The <head> tag defines metadata for our web page. This includes the title of the page
(this is what appears in the top of your tab or browser window). Notice that the <head> tag
is indented to a new level because the <html> tag was opened but not closed (a new idea
was started but not completed). Moreso, the <title> tag is indented another level further
(the <head> tag was opened but not closed).
4) The <title> tag is closed on the same line it was opened which we usually do if the
content of a tag is short. On the other hand, the <head> tag is closed on a different line.
The closing tag is indented to the same level as the matching opening one.
Now take a look at the contents of the <body> tag. Is there anything about the structure
that is surprising to you?

Lesson 1 Summary

You've learned a lot so far! Let's recap some of the big ideas:

The World Wide Web

The web is composed largely of HTML documents. HTML stands for Hypertext Markup
Language and is the language the browsers use to interpret web pages. The components
of the web include the client (your computer and browser), the Internet, and servers.
The client and servers interact through something called the Hypertext Transfer
Protocol (HTTP).

Basic HTML Elements

HTML Elements are what we use to tell a web browser how to display content in a web
page.
Most HTML elements consist of an opening and a closing tag with
some contentbetween them.
<b>text</b> Makes the 'text' content bold
<em>text</em> Makes the 'text' content italic

HTML Attributes
Some elements accept additional values called attributes in their opening tags.
Attributes provide additional information to the browser. For example, the anchor tag takes
an attribute called href that defines a URL to link to.
<a href="url">link</a> Creates a hyperlink to the href attribute value urland names it link
<img src="url" alt="text"> Displays the image hosted at the src attribute value "url" (this

can also be a path to a local file on your computer). If the image cannot be displayed, then
the alt attribute value "text" is shown.

More HTML Elements

<p>text</p> Defines a paragraph. The content of the <p> element is in a "box"
<br> Creates a line break
<div>content</div> Creates a "box" container element
<span>content</span> Creates an "inline" container element

The Four Stages Of Expertise

How We Will Use The Stages

Table of Contents

1. Lesson 1: The Basics of the Web and HTML

o How the Web Works
o HTML
o Tags and Elements

o Why Computers are Stupid

o Inline vs Block Elements
2. Lesson 2: Creating a Structured Document with HTML
o Developer Tools
o HTML's "tree-like" Structure
o Indentations and Boxes
o Text Editors
3. Lesson 3: Adding CSS Style to HTML Structure
o Avoiding Repetition
o CSS
o Coding Resources
Important Concepts

Lesson 1: The Basics of the Web and HTML

How the Web Works

The web is a bunch of computers that communicate with each

other. When a person goes to a web page like
www.google.com, their computer sends a HTTP Request to
a server.
The server finds the appropriate HTML document and sends it
back to the user's computer where a web browser interprets
the page and displays it on the user's screen. This video does
a good job of explaining more.

HTML
HTML stands for Hypertext Markup Language.HTML
documents form the majority of the content on the web.
HTML documents contain text content which describes "what
you see" and markup which describes "how it looks". This
video gives a good overview.

Tags and Elements

HTML documents are made of HTMLelements. When writing
HTML, we tell browsers the type of each element by using
HTML tags. This video explains the distinction well.

Why Computers are Stupid

Computers are stupid because they interpret instructions

literally. This makes them very unforgiving since a small
mistake by a programmer can cause huge problems in a
program.

Inline vs Block Elements

HTML elements are either inline or block. Block elements
form an "invisible box" around the content inside of them.
Lesson 2: Creating a Structured Document with HTML

Developer Tools (in the Browser)

HTML elements are either inline or block. Block elements
form an "invisible box" around the content inside of them.

The "tree-like structure" of HTML

The "tree-like structure" comes from the fact that HTML
elements can have other elements inside of them. You can
draw this relationship like a family tree. My mother had
multiple children. So did her mother, and so on...
In a browser, this structure shows up as a series of nested
boxes. There are boxes inside of boxes inside of boxes, and
so on...

The relationship between indented HTML and

boxes
When you read an HTML document as text, you see a wave of
changing indentations going up and down the left side of the
document. The more indented an element is, the more deeply
nested its corresponding "box" is.

Text Editors (for programming)

When writing code, programmers use special text editors (like
Sublime Text for example). These editors make the
programmer's life easier. For example, some text editors will
automatically generate a closing HTML tag when you write an
opening tag.
Lesson 3: Adding CSS Style to HTML Structure

Avoiding Repetition
Avoiding repetition is important for a variety of reasons.
Avoiding Errors: When programmers don'tavoid repetition,
they will often have to do the same thing over and over. This
may mean copy and pasting certain style attributes into many
HTML elements or rewriting the same code (sometimes with

minor differences) many times. This can lead to errors when

the programmer decides to make a change to something. If
they don't dilligently make that same change everywhere the
repeated code appears, problems will arise.
Consistency: In this web page, I wanted every lesson to look
the same. Instead of manually giving each one the same
style, I was able to assign each lesson div the
same class and then specify the style for that class in only
one place! By avoiding repetion, it's now very easy for me to
make changes to this style.

CSS
CSS stands for Cascading Style Sheets and they give
programmers a way to control the style of related HTML
elements. This is done by giving similar HTML elements the
same classname and then specifying the style that should
apply to that class.

Coding Resources
The following coding resources will help me learn to "think like
a programmer":

Udacity - From the Udacity homepage I can access lots of

classes to help me on my journey, including the Intro to
Programming Nanodegree program! I can find lots of support
under the "Resources" tab of my Nanodegree program
Udacity Discussion Forums - The Udacity Discussion
Forums are a great place to go if I need help with a lesson or
project.
Stack Overflow - Stack Overflow is a site professional
programmers use all the time when debugging code. There
are many years of discussion and troubleshooting help on this
site!
Python Tutor - Python Tutor is a site that could be really
helpful when I start lerning the Python programming language
in Stage 2. It helps me to visualize how code runs.

CSS
/* This is a CSS comment */
body
{
padding: 20px 10px;
font-family: Helvetica;
max-width: 2000px;
margin: 0 auto; /* The 0 refers to the top and bottom margins and the "auto"
automatically */
font-size: 1.4em;
}
/* sets the left and right margins to equal values. This centers the body on the

page.*/
h1
{
}
p
{

text-align: center;
color: #294860;

margin: 10px 0;

}
ul
{
*/
}

list-style-type: none; /* this removes the bullets that show up by default in unordered lists

li
{
font-size: 20px;
line-height: 44px; /* each line of text should occupy 44 pixels of height (good for mobile
usage and fat fingers) */
}

.lesson
{
background-color: #294860;
border-radius: 20px;
color: white;
padding: 10px;
margin: 10px auto;
}
h2
{
}

margin: 10px;

.concept
{
background-color: #DFEAF1;
padding: 4px;
margin: 10px;
border-radius: 4px;
color: black;
}

.concept-title
{
font-size: 28px;
margin: 8px;
text-align: center;
color: #294860;
}
.concept-description
{
font-weight: lighter;
margin: 6px;
}
.code
{
font-family: Courier;
color : black;
font-weight: bold;
padding-left: 4px;
padding-right: 4px;
}

HTML
<!DOCTYPE html>
<!-- This is an HTML comment -->
<head>
<title>Andy's Notes</title>
<link rel="stylesheet" href="andy-style.css">
</head>
<body>
<div class="TOC">
<h1>Table of Contents</h1>
<ol>
<li><a href="#lesson-1">Lesson 1: The Basics of the Web and HTML</a>
<ul>
<li><a href="#lesson-1-1">How the Web Works</a></li>
<li><a href="#lesson-1-2">HTML</a></li>
<li><a href="#lesson-1-3">Tags and Elements</a></li>
<li><a href="#lesson-1-4">Why Computers are Stupid</a></li>
<li><a href="#lesson-1-5">Inline vs Block Elements</a></li>
</ul>
</li>
<li class="TOC-lesson"><a href="#lesson-2">Lesson 2: Creating a Structured
Document with HTML</a>
<ul>
<li><a href="#lesson-2-1">Developer Tools</a></li>
<li><a href="#lesson-2-2">HTML's "tree-like" Structure</a></li>
<li><a href="#lesson-2-3">Indentations and Boxes</a></li>

<li><a href="#lesson-2-4">Text Editors</a></li>

</ul>
</li>
<li class="TOC-lesson"><a href="#lesson-3">Lesson 3: Adding CSS Style to HTML
Structure</a>
<ul>
<li><a href="#lesson-3-1">Avoiding Repetition</a></li>
<li><a href="#lesson-3-2">CSS</a></li>
<li><a href="#lesson-3-3">Coding Resources</a></li>
</ul>
</li>
</ol>
</div>
<h1>Important Concepts</h1>
<div class="lesson">
<h2 id="lesson-1">Lesson 1: The Basics of the Web and HTML</h2>
<div class="concept" id="lesson-1-1">
<div class="concept-title">
How the Web Works
</div>
<div class="concept-description">
<p>
The web is a bunch of computers that communicate with
each other. When a person goes to a web page like
www.google.com, their computer sends a
<em>HTTP Request</em> to
a <em>server</em>.
</p>
<p>
The server finds the appropriate HTML document and sends
it back to the user's computer where a <em>
web browser</em> interprets the page and displays it on
the user's screen.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l-3508959201/e48329854/m-48480496">This video</a>
does a good job of explaining more.
</p>
</div>
</div>
<div class="concept" id="lesson-1-2">
<div class="concept-title">
HTML
</div>
<div class="concept-description">
<p>
HTML stands for <em>Hypertext Markup
Language.</em> HTML documents form the majority of the
content on the web.
</p>
<p>
HTML documents contain <em>text
content</em> which describes "what you see" and
<em>markup</em> which describes
"how it looks". <a href="https://www.udacity.com/course/viewer#!/c-ud721/l3508959201/m-48724340">This

video</a> gives a good overview.

</p>
</div>
</div>
<div class="concept" id="lesson-1-3">
<div class="concept-title">
Tags and Elements
</div>
<div class="concept-description">
<p>
HTML documents are made of HTML
<b>elements</b>. When writing HTML, we
tell browsers the type of each element by using HTML
<b>tags</b>.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l-3508959201/m48723444">This video</a> explains the
distinction well.
</p>
</div>
</div>
<div class="concept" id="lesson-1-4">
<div class="concept-title">
Why Computers are Stupid
</div>
<div class="concept-description">
<p>
Computers are stupid because they interpret
instructions literally. This makes them very
unforgiving since a small mistake by a
programmer can cause huge problems in a program.
</p>
</div>
</div>
<div class="concept" id="lesson-1-5">
<div class="concept-title">
Inline vs Block Elements
</div>
<div class="concept-description">
<p>
HTML elements are either <b>inline</b>
or <b>block</b>. Block elements form
an "invisible box" around the content inside of them.
</p>
</div>
</div>
</div>
<div class="lesson">
<h2 id="lesson-2">Lesson 2: Creating a Structured Document with HTML</h2>
<div class="concept" id="lesson-2-1">
<div class="concept-title">
Developer Tools (in the Browser)
</div>
<div class="concept-description">
<p>
HTML elements are either <b>inline</b>

or <b>block</b>. Block elements form

an "invisible box" around the content inside of them.
</p>
</div>
</div>
<div class="concept" id="lesson-2-2">
<div class="concept-title">
The "tree-like structure" of HTML
</div>
<div class="concept-description">
<p>
The "tree-like structure" comes from the fact that HTML
elements can have other elements inside of them. You can
draw this relationship like a family tree. My mother
had multiple children. So did her mother, and so on...
</p>
<p>
In a browser, this structure shows up as a series
of nested boxes. There are boxes inside of boxes
inside of boxes, and so on...
</p>
</div>
</div>
<div class="concept" id="lesson-2-3">
<div class="concept-title">
The relationship between indented HTML and boxes
</div>
<div class="concept-description">
<p>
When you read an HTML document as
<em>text</em>, you see a wave of
changing indentations going up and down the left side
of the document. The more indented an element is, the
more deeply nested its corresponding "box" is.
</p>
</div>
</div>
<div class="concept" id="lesson-2-4">
<div class="concept-title">
Text Editors (for programming)
</div>
<div class="concept-description">
<p>
When writing code, programmers use special text editors
(like Sublime Text for example). These editors make the
programmer's life easier. For example, some text editors
will automatically generate a closing HTML tag when you
write an opening tag.
</p>
</div>
</div>
</div>
<div class="lesson">
<h2 id="lesson-3">Lesson 3: Adding CSS Style to HTML Structure</h2>
<div class="concept" id="lesson-3-1">

<div class="concept-title">
Avoiding Repetition
</div>
<div class="concept-description">
<p>
Avoiding repetition is important for a variety of reasons.
</p>
<p>
<b>Avoiding Errors:</b> When programmers <em>don't</em> avoid repetition,
they will often have to do the same thing over and over. This may mean copy and pasting
certain style attributes into many HTML elements or rewriting the same code (sometimes
with minor differences) many times. This can lead to errors when the programmer decides to
make a change to something. If they don't dilligently make that same change everywhere
the repeated code appears, problems will arise.
</p>
<p>
<b>Consistency:</b> In this web page, I wanted every lesson to look the same.
Instead of manually giving each one the same style, I was able to assign each lesson <span
class="code">div</span> the same <span class="code">class</span> and then specify
the style for that class in only one place! By avoiding repetion, it's now very easy for me to
make changes to this style.
</p>
</div>
</div>
<div class="concept" id="lesson-3-2">
<div class="concept-title">
CSS
</div>
<div class="concept-description">
<p>
CSS stands for Cascading Style Sheets and they give programmers a way to control
the style of related HTML elements. This is done by giving similar HTML elements the same
<span class="code">class</span> name and then specifying the style that should apply to
that class.
</p>
</div>
</div>
<div class="concept" id="lesson-3-3">
<div class="concept-title">
Coding Resources
</div>
<div class="concept-description">
<p>
The following coding resources will help me learn to "think like a programmer":
</p>
<p>
<b><a href="https://www.udacity.com/">Udacity</a></b> - From the Udacity
homepage I can access lots of classes to help me on my journey, including the Intro to
Programming Nanodegree program! I can find lots of support under the "Resources" tab of
my Nanodegree program
</p>
<p>
<b><a href="https://discussions.udacity.com/">Udacity Discussion Forums</a></b>
- The Udacity Discussion Forums are a great place to go if I need help with a lesson or
project.

</p>
<p>
<b><a href="http://stackoverflow.com/">Stack Overflow</a></b> - Stack Overflow
is a site professional programmers use all the time when debugging code. There are many
years of discussion and troubleshooting help on this site!
</p>
<p>
<b><a href="http://pythontutor.com/">Python Tutor</a></b> - Python Tutor is a site
that could be really helpful when I start lerning the Python programming language in Stage
2. It helps me to visualize how code runs.
</p>
</div>
</div>
</div>
</body>

Why You'll Make It

Even if you aren't interested in building web pages, this project will be an important
foundational learning experience for any programming you want to do in the future. From
this stage, you will:
Get an introduction to important ideas throughout all of programming like:
What it means to "write code"
Why programmers hate unnecessary repetition
How the code that programmers write can have structure and how
computers read and understand that structure
The importance (and pain) of syntax requirements
Build comfort with programming tools before learning a more powerful
(and potentially challenging) programming language
Experience the thrill of writing code to tell a computer what to do and
then watching the computer actually do it

How You'll Make It

1.
2.

Go through lessons 1.1 and 1.2 which immediately follow this one.
As you go through the following lessons, you may want to take notes (on
paper, on a computer, anywhere).
3.
After lesson 1.1 and 1.2 you'll find a Work Session, during which you'll
work on your project for this stage. In the Supporting Materials section below is
a file to help you get started.
4.
By the end, you'll have your very own personal webpage.

How These Lessons Will Work

Welcome to the first stage of the Nanodegree program.

In my role at Udacity, I've gotten to take just about every lesson of every course we've ever
made (I'm lucky). Almost every course has had a segment or two that was really amazing.
The lessons in this Nanodegree are compilations of the best segments of some of Udacity's
other introductory programming classes.
This stage is actually a selection of videos from Introduction to HTML and CSS.
Before you begin, I recommend you download the starter code for this Nanodegree
program here. These files will help you follow along and take notes during each lessson.

Adding Useful Bookmarks!

Isn't it frustrating when you can't find a specific website right when you need it
in order to solve a problem?
Browser Bookmarks are a developer's best friend. As you progress through IPND,
you'll come across useful resources. It's a great practice to bookmark these
resources for future reference. We have included a great starter kit for
bookmarks that will be useful throughout your journey in IPND.
Follow these easy steps to get your bookmarks imported to your browser:
Step 1: Download the file IPND_bookmarks.zip from the Supporting Materials or
click here.

Step 2: Navigate to the Bookmark Manager in your browser

Step 3: Click the Organize dropdown menu, and select Import Bookmarks From HTML
File...

Step 4: Navigate to your downloaded file IPND_bookmarks.zip, unzip the file,

select the IPND_bookmarks.html and click Open

Step 5: Voila! Enjoy your brand new bookmark folders full of useful resources!

Note: These steps are shown using Chrome. If you prefer a different browser,
you can still import the bookmark file into the browser of your choice. Check out
these resources for your browser choice. Follow instructions to import from an
HTML file.
Firefox Support
Safari Support
Internet Explorer Support
Opera Support

Supporting Materials

Share and Discuss in the Slack Community

We've created a Slack channel just for Intro to Programming Nanodegree students!
Slack is an amazing tool for you to connect directly with and learn from your Udacity
coaches, fellow students, and graduates of the program. You can network, get support, and
share ideas in real-time!
Feel free to post questions about the material, create your own channels, and get to know
your fellow Intro to Programming students.
Request your invite here and start connecting!
We also recommend downloading the Slack desktop app and keeping it open as you
work on your Nanodegree program.

Learn More
Throughout your Nanodegree program, you'll have the chance to go deeper into concepts
through previously recorded events where students have asked questions and gotten
answers straight from your coaches.
These sessions cover things like common mistakes coaches notice students making,
additional practice of specific skills, or even just clarification of program details and
discussion of how students are feeling about their experience.
Developer Tools

In this recorded session, Mark and Luke answer Stage 0/1 questions and walk
everyone through using Chrome's Development Tools to explore HTML and CSS
code for any website.

Video
Transcript

Quiz: Page Structure

There is also a <table> element after the <p> element, but we skipped it for
brevity. It is still part of the same tree branch.
The page you should explore can be found here - http://assignments.udacityextras.appspot.com/courses/html-css/samples/explore.html
Follow us on Twitter!
@cwpittman
@JessicaUelmen

Quiz: Visual Styling

You can find all the examples for this course here. The second example which
you are supposed to check for this quiz is Same HTML 2!

Focus Checkpoint
Be prepared, the next video is 3 mins long but goes over a lot.
You don't need to remember or follow every point made in this video (but you should feel
free to re-watch it if you want). The important things to take away from this are:

HTML and CSS are both "languages"

HTML controls the "structure" of a web page

CSS controls the "style" of a page (how it looks).
When programmers talk about the "DOM" (Document Object Model) they
are talking about the tree-like structure of a page.
To learn more about what a "tree-like structure" means, read the first two paragraphs of
the wikipedia article on Tree Structures.

HTML-CSS-DOM
HTML - HyperText Markup Language - the standard markup language used to
create web pages.
CSS - Cascading Style Sheets - style sheet language used for describing the look
and formatting of a document written in a markup language.
DOM - Document Object Model - a cross-platform and language-independent
convention for representing and interacting with objects in HTML (and other
markup languages). The nodes of every document are organized in a tree
structure, called the DOM tree.

Quiz: Boxes Everywhere

Files referenced:
1.
2.

shapes.html
shapes.css

Boxes, Grids And Rules

Quiz: Boxifying Design
Note that the color swatch boxes and color text values on the left of the page
mockup are for reference only. They are not meant to be included as part of the
final page design.

You can find the design mockup Jessica is demonstrating here: mock3portfolio-1.pdf. You can also view additional page design mockups on the
course: Sample Pages and Assets.

How to Listen to Experts

You're about to watch an interview with Jacques, a professional programmer who works at
Udacity. When you're a novice (in anything, but especially with programming), it can be
difficult to communicate with experts.
That's because experts are so familiar with their field that they've forgotten what it was like
to get there. This often means that experts will:

assume you have knowledge that you don't

use jargon you don't understand
speak too quickly for you to understand.
When people do this, remember that they probably aren't trying to confuse you or show off.
They have usually just forgotten how hard it was for them when they were learning the
same thing. In these situations, don't be afraid to ask questions even if they seem basic.
The person you're talking to will probably be excited to talk about anything in their field if
someone is willing to listen.
Luckily, Jacques does a good job of avoiding "expert blind spot." As he speaks, listen to
the technological empathy he has! When he sees a picture, he immediate sees it the
way a browser sees HTML: as boxes within boxes within boxes...
This kind of expertise takes lots and lots of practice to develop. But if you enjoy this sort of
thing, you may want to check out Udacity's Front End Web Developer
Nanodegree when you're done with this one.

Boxes To HTML

Jessica is using the mock1-fav-app.pdf design mockup from the

course Sample Pages and Assets. (The design mockup title there is: Simple
Favorite Page).
PDFs (like this design mockup page) are not editable.
If you want to follow along you can create your own HTML and CSS files as
Jessica is doing here!

Reflection
Reflecting on what you've learned helps you bridge the knowledge gap between
how novices and experts think about this material.
Summarize what you've learned

You should have a saved HTML file from the previous work session which
contains your notes from lesson one.
1.

Open the HTML file you wrote and submitted during Stage 0 in a text
editor. Read through it to remind yourself what you learned in lesson one. If
you'd prefer to start from scratch, you can download the file linked in the
Supporting Materials section below.
2.
Review the previous lesson by going through your notes (or skimming
through the lesson again).
3.
Try to group related facts into big ideas and then summarize those ideas
with a few sentences. Add these ideas and summaries to your HTML.
Supporting Materials

stage1.zip

Learning by Example
The next two segments show you two examples of a web page. Though both look identical
for now, the structured example will be much easier to modify in the future.
You can switch back and forth between the displayed page and the underlying HTML by
pressing the buttons on the top left.
Browse these two examples and pay attention to how the <div>s in the first example are
used to group related content.

EXAMPLE OF HTML DOCUMENT

<!-- This is an HTML comment. It's just here for PEOPLE to read. The computer
ignores it. -->
<body>
<h1>Important Concepts</h1>
<!-- To add logical structure, I chose to put each lesson into it's own div. By putting
a box around each lesson, the structure of the code reflects the structure of the
lessons -->
<div>
<h2>Lesson 1: The Basics of the Web and HTML</h2>
<!-- I also put each new concept inside of a div. This is concept 1 -->
<div>
<p>
<b>How the Web Works</b>
</p>
<p>
The web is a bunch of computers that communicate with each other. When a
person goes to a web page like www.google.com, their computer sends a
<em>HTTP Request</em> to a <em>server</em>. The server finds the
appropriate HTML document and sends
it back to the user's computer where a <em>web browser</em> interprets
the page and displays it on the user's screen.
<a href="https://www.udacity.com/course/viewer/#!/c-ud000/l-4185478836/e48329854/m-48480496">This video</a> does a good job of explaining more.
</p>
</div>
<!-- And this is where concept 1 ends. Note how the indentation level now
matches up with where lesson 1 began.-->
<!-- Now concept 2 begins... -->
<div>
<p>
<b>HTML</b>
</p>
<p>
HTML stands for <em>Hypertext Markup Language.</em> HTML documents

form the majority of the content on the web. HTML documents contain <em>text
content</em> which describes "what you see" and <em>markup</em> which
describes "how it looks".
<a
href="https://www.udacity.com/course/viewer/#!/c-ud000/l-4185478836/m48724340">This video</a>
gives a good overview.
</p>
</div>
<div>
<p>
<b>Tags and Elements</b>
</p>
<p>
HTML documents are made of HTML <b>elements</b>. When writing HTML,
we tell browsers the type of each element by using HTML <b>tags</b>.
<a href="https://www.udacity.com/course/viewer/#!/c-ud000/l-4185478836/m48723444">This video</a> explains the distinction well.
</p>
</div>
<div>
<p>
<b>Why Computers are Stupid</b>
</p>
<p>
Computers are stupid because they interpret instructions literally. This makes
them very unforgiving since a small mistake by a programmer can cause huge
problems in a program.
</p>
</div>
<div>
<p>
<b>Inline vs Block Elements</b>
</p>
<p>
HTML elements are either <b>inline</b> or <b>block</b>. Block elements
form an "invisible box" around the content inside of them.
</p>
</div>
</div>
<!-- Notice that the indentation level is back to where it was when the <div> for
Lesson 1 began. And now the div for lesson two begins... -->
<div>
<h2>Lesson 2: Creating a Structured Document with HTML</h2>

<div>
<p>
<b>Developer Tools (in the Browser)</b>
</p>
<p>
HTML elements are either <b>inline</b> or <b>block</b>. Block elements
form an "invisible box" around the content inside of them.
</p>
</div>
<div>
<p>
<b>The "tree-like structure" of HTML</b>
</p>
<p>
The "tree-like structure" comes from the fact that HTML elements can have
other elements inside of them. You can draw this relationship like a family tree. My
mother had multiple children. So did her mother, and so on...
<br> In a browser, this structure shows up as a series of nested boxes. There
are boxes inside of boxes inside of boxes, and so on...
</p>
</div>
<div>
<p>
<b>The relationship between indented HTML and boxes</b>
</p>
<p>
When you read an HTML document as <em>text</em>, you see a wave of
changing indentations going up and down the left side of the document. The more
indented an element is, the more deeply nested it's corresponding "box" is.
</p>
</div>
<div>
<p>
<b>Text Editors (for programming)</b>
</p>
<p>
When writing code, programmers use special text editors (like Sublime Text for
example). These editors make the programmer's life easier. For example, some text
editors will automatically generate a closing HTML tag when you write an opening
tag.
</p>
</div>
</div>
</body>

NOW THE
RESULT

Important Concepts

Lesson 1: The Basics of the Web and HTML

How the Web Works

The web is a bunch of computers that communicate with each other. When a person
goes to a web page like www.google.com, their computer sends a HTTP Request to
a server. The server finds the appropriate HTML document and sends it back to the
user's computer where a web browser interprets the page and displays it on the user's
screen. This video does a good job of explaining more.
HTML
HTML stands for Hypertext Markup Language. HTML documents form the majority
of the content on the web. HTML documents contain text content which describes
"what you see" and markup which describes "how it looks". This videogives a good
overview.
Tags and Elements
HTML documents are made of HTML elements. When writing HTML, we tell
browsers the type of each element by using HTML tags. This video explains the
distinction well.
Why Computers are Stupid
Computers are stupid because they interpret instructions literally. This makes them
very unforgiving since a small mistake by a programmer can cause huge problems in a
program.
Inline vs Block Elements

HTML elements are either inline or block. Block elements form an "invisible box"
around the content inside of them.
Lesson 2: Creating a Structured Document with HTML
Developer Tools (in the Browser)

HTML elements are either inline or block. Block elements form an "invisible box"
around the content inside of them.
The "tree-like structure" of HTML
The "tree-like structure" comes from the fact that HTML elements can have other
elements inside of them. You can draw this relationship like a family tree. My mother
had multiple children. So did her mother, and so on...
In a browser, this structure shows up as a series of nested boxes. There are boxes
inside of boxes inside of boxes, and so on...
The relationship between indented HTML and boxes
When you read an HTML document as text, you see a wave of changing indentations
going up and down the left side of the document. The more indented an element is, the
more deeply nested it's corresponding "box" is.
Text Editors (for programming)
When writing code, programmers use special text editors (like Sublime Text for
example). These editors make the programmer's life easier. For example, some text
editors will automatically generate a closing HTML tag when you write an opening
tag.

EXAMPLE 2
<!-- This is an HTML comment. It's just here for PEOPLE to read. The computer
ignores it. -->
<body>
<h1>Important Concepts</h1>
<!-- In the unstructured version of this HTML document it's much harder for me to

read my own code. The indentation of the text hardly changes and it isn't clear that
the concepts from lesson 1 actually "belong" to lesson 1.-->
<h2>Lesson 1: The Basics of the Web and HTML</h2>
<p>
<b>How the Web Works</b>
</p>
<p>
The web is a bunch of computers that communicate with each other. When a
person goes to a web page like www.google.com, their computer sends a
<em>HTTP Request</em> to a <em>server</em>. The server finds the
appropriate HTML document and sends it
back to the user's computer where a <em>web browser</em> interprets the
page and displays it on the user's screen.
<a href="https://www.udacity.com/course/viewer/#!/c-ud000/l-4185478836/e48329854/m-48480496">This video</a> does a good job of explaining more.
</p>
<p>
<b>HTML</b>
</p>
<p>
HTML stands for <em>Hypertext Markup Language.</em> HTML documents
form the majority of the content on the web. HTML documents contain <em>text
content</em> which describes "what you see" and <em>markup</em> which
describes "how it looks". <a href="https://www.udacity.com/course/viewer/#!/cud000/l-4185478836/m-48724340">This video</a> gives a good overview.
</p>
<p>
<b>Tags and Elements</b>
</p>
<p>
HTML documents are made of HTML <b>elements</b>. When writing HTML, we
tell browsers the type of each element by using HTML <b>tags</b>.
<a href="https://www.udacity.com/course/viewer/#!/c-ud000/l-4185478836/m48723444">This video</a> explains the distinction well.
</p>
<p>
<b>Why Computers are Stupid</b>
</p>
<p>
Computers are stupid because they interpret instructions literally. This makes
them very unforgiving since a small mistake by a programmer can cause huge
problems in a program.
</p>
<p>

<b>Inline vs Block Elements</b>

</p>
<p>
HTML elements are either <b>inline</b> or <b>block</b>. Block elements form
an "invisible box" around the content inside of them.
</p>
<h2>Lesson 2: Creating a Structured Document with HTML</h2>
<p>
<b>Developer Tools (in the Browser)</b>
</p>
<p>
HTML elements are either <b>inline</b> or <b>block</b>. Block elements form
an "invisible box" around the content inside of them.
</p>
<p>
<b>The "tree-like structure" of HTML</b>
</p>
<p>
The "tree-like structure" comes from the fact that HTML elements can have other
elements inside of them. You can draw this relationship like a family tree. My mother
had multiple children. So did her mother, and so on...
<br> In a browser, this structure shows up as a series of nested boxes. There are
boxes inside of boxes inside of boxes, and so on...
</p>
<p>
<b>The relationship between indented HTML and boxes</b>
</p>
<p>
When you read an HTML document as <em>text</em>, you see a wave of
changing indentations going up and down the left side of the document. The more
indented an element is, the more deeply nested it's corresponding "box" is.
</p>
<p>
<b>Text Editors (for programming)</b>
</p>
<p>
When writing code, programmers use special text editors (like Sublime Text for
example). These editors make the programmer's life easier. For example, some text
editors will automatically generate a closing HTML tag when you write an opening
tag.
</p>
</body>

O/P
Important Concepts

Lesson 1: The Basics of the Web and HTML

How the Web Works

The web is a bunch of computers that communicate with each other. When a person
goes to a web page like www.google.com, their computer sends a HTTP Request to
a server. The server finds the appropriate HTML document and sends it back to the
user's computer where a web browser interprets the page and displays it on the user's
screen. This video does a good job of explaining more.
HTML
HTML stands for Hypertext Markup Language. HTML documents form the majority
of the content on the web. HTML documents contain text content which describes
"what you see" and markup which describes "how it looks". This videogives a good
overview.
Tags and Elements
HTML documents are made of HTML elements. When writing HTML, we tell
browsers the type of each element by using HTML tags. This video explains the
distinction well.
Why Computers are Stupid
Computers are stupid because they interpret instructions literally. This makes them
very unforgiving since a small mistake by a programmer can cause huge problems in a
program.
Inline vs Block Elements
HTML elements are either inline or block. Block elements form an "invisible box"
around the content inside of them.

Lesson 2: Creating a Structured Document with HTML

Developer Tools (in the Browser)

HTML elements are either inline or block. Block elements form an "invisible box"
around the content inside of them.
The "tree-like structure" of HTML
The "tree-like structure" comes from the fact that HTML elements can have other
elements inside of them. You can draw this relationship like a family tree. My mother
had multiple children. So did her mother, and so on...
In a browser, this structure shows up as a series of nested boxes. There are boxes
inside of boxes inside of boxes, and so on...
The relationship between indented HTML and boxes
When you read an HTML document as text, you see a wave of changing indentations
going up and down the left side of the document. The more indented an element is, the
more deeply nested it's corresponding "box" is.
Text Editors (for programming)
When writing code, programmers use special text editors (like Sublime Text for
example). These editors make the programmer's life easier. For example, some text
editors will automatically generate a closing HTML tag when you write an opening
tag.

Practice
Practicing what you've learned helps you bridge the skills gap between what novices and
experts are able to do.
Apply What You've Learned

You should already have an HTML file which contains your notes from lessons 1 and 2. In
this practice session you will add structure to your HTML by using container elements
(<span>'s and <div>'s) to group related content together.

Note: Adding this structure may not change the appearance of your page! But doing this
work now will allow you to rapidly make changes to the appearance in the next lesson.
Feel free to consult the previous examples, but try to write your own code to add structure
to your HTML before continuing.

Share & Discuss!

Share your work and check out what your fellow students are doing.
1.
2.

Go to the discussion forum by clicking here.

Share the link to your web page in the post titled "Share Stage 1: Work
Session 1 (IPND)". You can find it under the "IPND Stages 0-1: Make a Web Page"
category.
3.
Check out other students' web pages. You may see something that you
want to try or even have advice to offer someone else. You'll soon find everyone
is in this together!
4.
Respond to your classmates and let them know what you liked about
their work, or ask them a question you may have about it.
5.
When you're done, move on to the next lesson and keep adding to your
work!

Follow Along with Jessica

At this point, there are a few things you need to do to follow along with Jessica. This may
take a few minutes, and there's a chance you may run into trouble. Be patient and
persistent. If you get stuck, ask for help.
Download the css-demo.zip file by clicking the link in the Supporting Materials below. To
extract the files for:
Macintosh: Find the file that was downloaded and, if necessary, unzip it by double
clicking on it. This should create a folder called css-demo
Windows: Find the file that was downloaded, right-click on the file and select "Extract All"
to unzip. This should create a folder called css-demo
1.

If you haven't already, download a text editor.

2.

Open your text editor and select File > Open Find the css-demofolder on
your computer and select it by single-clicking. The folder name should be
highlighted.
3.
Press the Open button. You should see a gray bar on the left.
4.
Double click on app.html and style.css in the gray bar on the left (this might
look a little different depending on your editor).
5.
Use Google Chrome (a web browser) to open app.html. If you don't have
Google Chrome, please download it here
If you have any trouble, ask for help. Getting things installed and working can often be one
of the most frustrating parts of programming and even professional programmers struggle
with these things.
If you still have trouble following these instructions, here is a quick video that illustrates how
you can open the files in a text editor and your browser here

Quiz: Adding Style

Note: Students are not yet expected to replace the "Image" text in the
screenshot div with an actual image element.
Note The "text" placeholder in the description div can be replaced with the
following:
In ac ipsum quis turpis adipiscing commodo. <em>Mauris fermentum
quam</em> in risus eleifend fringilla. Aliquam placerat, ipsum sit amet cursus
rhoncus, augue mi tincidunt erat, et consequat velit massa a velit. Cras eleifend
lectus nec diam ornare, eu

Understanding CSS
Search and Replace

You can also think about CSS as a search and replace tool: you identify a class or
a tag of the element you want to find (or match, in CSS terminology), and then
what you want to do with it, or what property values to replace with different
ones.
Order Matters

It also matters where you define the rules and in what order they are applied.
Styles can be defined in different places and are applied in the following order,
with definitions further down the list overwriting previous definitions:

the default style of a browser (different browsers have slightly different

styles)
stylesheet in a separate file (this is what you will be mostly using)
stylesheet inside HTML (this can be done for small projects but is not
ideal)
inline style in an element (this can also be done but should be avoided)
Specifics Matter

"Cascading" means that rules are applied not only to the elements they directly
match, but also to all of those elements' child elements. However, if a child
element has multiple, overlapping rules defined for it, the more specific rule
takes effect.

Quiz: Styling Up
How CSS Selectors Work
MDN CSS Reference
Browsers use default stylesheets to determine how to display HTML elements.
You can view the default style rules for h1 and other elements for the following
browsers:

WebKit (Chrome and Safari)

Firefox
Internet Explorer
Because these rules differ sometimes between browsers, there are efforts to
promote consistency in styles across browsers. One popular solution to this
issue is using what is referred to as a CSS reset such as normalize.css.
You can find the documentation page on fonts here.

CSS Summary and Reference

There was a lot of information in the previous video and you don't need to remember it all.
This is a text summary. Quickly skim through it (just look at the headings so you know
what's here) and come back when you need to.
What is CSS?

CSS is code written to control the "style" of HTML elements.

How does CSS "control" HTML?

If you want to write CSS that makes all h1 elements have a black background and white
text, you would write:
h1 {
background-color : black;
color: white;
}

In this example, the h1 is a selector. It says to the browser "I want you to apply the rules
I'm about to tell you to every h1 element."
After the h1 there is a left curly brace { and at the bottom there is a matching right curly
brace }. Everything between these curly braces will be interpreted as a "rule" that should be
applied to every h1 element.
The line of code that says background-color : black; is a declaration. background-color is
a property and black is the value of that property.
CSS Vocabulary

CSS: Cascading Style Sheets.

Style: This word can refer to many things and so it can be confusing. It can refer to:

The HTML element. For example: <style>div {color:blue}</style>

The HTML attribute. For example: <div style="color : blue">this text would be
blue</div>

The general look of a web page. For example: "I like that site's style."
A verb. For example: "I'm making progress on my page. The structure is
all done but now I have to style it."

Rule: a line of CSS code describing the value that a certain attribute should take.
Property: The property you want to change.
Value: The value that you want to assign to the attribute.
Selector: The name that you use to in order to target the elements that are assigned to a
class or id attribute in the HTML.
Class: A class refers to a group of elements that can be styled together. Class names
should not contain periods or any other punctuation marks such as class="1.1"
ID: ID's are unique identifiers that uniquely identifies an element in HTML.
Selecting by class

In the example above, we set the background-color of every h1 to black. If we only want to
add style to certain h1s, we can use class selectors. Try copying the following code
into scratchpad.io to see how this works.
<div class="stop"></div>
<div class="slow"></div>
<div class="go"></div>
<style>
div {
height : 50px;
width : 50px;
border-radius: 25px;
}
.stop {
background-color: red;
}
.slow {
background-color: yellow;
}
.go {
background-color: green;
}
</style>

We should see a traffic light. Note how in the <style> element we refer to an HTML
element's class name by writing .class-name
Also note how we can apply rules to all divs or just certain divs by using the appropriate
selector.
How do I include CSS Styling in my web page?

There are three ways you can do this.

Method 1: write CSS in the <head> of your HTML
This method is good for very small projects (like what you'd do in scratchpad.io). To do
this:
1.
2.
3.

At the top of your HTML document, add a <head> element.

Inside the <head> element, add a <style> element.
Write your CSS in the <style> element and then put the HTML for the rest
of your page below.
For example:
<head>
<style>
div {
background-color : red;
}
</style>
</head>
<body>
<div>
This will have a red background.
</div>
</body>

Method 2: Link your HTML to a separate CSS file

This adds another step, but it lets you stay more organized when working on larger projects.
To do this:
1.
2.
3.
4.

Write all of your structural HTML in one file (let's call it main.html).
In a separate file (let's call it main.css), put all of your CSS code.
Add a <head> element to the top of your HTML.
Add a <link> tag inside the <head> element. Since <link> is a "void tag"
you don't need to add a closing </link>.
5.
Add the following attributes to your <link>:

rel="stylesheet"

href="main.css"
For example, you would have a main.html file that looked like this:
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>

This will have a red background.

</div>
</body>

and in the same folder you would have a file called main.css like this:
div {
background-color : red;
}

Method 3: Write your style inline with your HTML

This is generally a very bad idea because it leads to lots of repeated code. But you may
see code that uses this method so it's good to be familiar with it. If you want to know more,
check out the question and answers in this conversationon Stack Overflow (Stack
Overflow is the most widely used programming Q&A community out there).
With this method, you modify the style attributes of every individual HTML element. For
example:
<body>
<div style="background-color: red; color:
This div will have a red background and
</div>
<div style="background-color: red; color:
So will this one.
</div>
<div style="background-color: red; color:
Now, what if I change my mind?
</div>
<div style="background-color: red; color:
I'd rather have a black background...
</div>
<div style="background-color: red; color:
Never do this!
</div>
</body>

white">
white text.
white">
white">
white">
white">

NOTE: there are a lot of little mistakes you can and will at some point make that will cause
any of these methods not to work. For example, when I was writing the code for method 2 I
had main.html and main.css in different folders on my computer, and it didn't work at all.

HTML

<!-- This is an HTML comment. It's just here for PEOPLE to read. The computer
ignores it. -->
<body>
<h1>Important Concepts</h1>
<!-- I chose to put each lesson into it's own div. By putting a box around each
lesson, the structure of the code reflects the structure of the lessons -->
<div>
<h2>Lesson 1: The Basics of the Web and HTML</h2>
<!-- I also put each new concept inside of a div. This is concept 1 -->
<div>
<p>
<b>How the Web Works</b>
</p>
<p>
The web is a bunch of computers that communicate with
each other. When a person goes to a web page like
www.google.com, their computer sends a <em>HTTP Request</em>
to a <em>server</em>. The server finds the appropriate
HTML document and sends it back to the user's computer where
a <em>web browser</em> interprets the page and displays it
on the user's screen.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l-3508959201/e48329854/m-48480496">This video</a>
does a good job of explaining more.
</p>
</div>
<!-- And this is where concept 1 ends. Note how the indentation level now
matches up with where lesson 1 began.-->
<!-- Now concept 2 begins... -->
<div>
<p>
<b>HTML</b>
</p>
<p>
HTML stands for <em>Hypertext Markup Language.</em> HTML
documents form the majority of the content on the web.
HTML documents contain <em>text content</em> which describes
"what you see" and <em>markup</em> which describes "how it
looks". <a href="https://www.udacity.com/course/viewer#!/c-ud721/l3508959201/m-48724340">This video</a>

gives a good overview.

</p>
</div>
<div>
<p>
<b>Tags and Elements</b>
</p>
<p>
HTML documents are made of HTML <b>elements</b>. When
writing HTML, we tell browsers the type of each element
by using HTML <b>tags</b>.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l-3508959201/m48723444">This video</a>
explains the distinction well.
</p>
</div>
<div>
<p>
<b>Why Computers are Stupid</b>
</p>
<p>
Computers are stupid because they interpret instructions
literally. This makes them very unforgiving since a small
mistake by a programmer can cause huge problems in a program.
</p>
</div>
<div>
<p>
<b>Inline vs Block Elements</b>
</p>
<p>
HTML elements are either <b>inline</b> or <b>block</b>.
Block elements form an "invisible box" around the
content inside of them.
</p>
</div>
</div>
<!-- Notice that the indentation level is back to where it was when the <div> for
Lesson 1 began. And now the div for lesson two begins... -->
<div>
<h2>Lesson 2: Creating a Structured Document with HTML</h2>
<div>
<p>
<b>Developer Tools (in the Browser)</b>

</p>
<p>
HTML elements are either <b>inline</b> or <b>block</b>.
Block elements form an "invisible box" around the
content inside of them.
</p>
</div>
<div>
<p>
<b>The "tree-like structure" of HTML</b>
</p>
<p>
The "tree-like structure" comes from the fact that HTML
elements can have other elements inside of them. You can
draw this relationship like a family tree. My mother had
multiple children. So did her mother, and so on...
<br>
In a browser, this structure shows up as a series of
nested boxes. There are boxes inside of boxes inside of
boxes, and so on...
</p>
</div>
<div>
<p>
<b>The relationship between indented HTML and boxes</b>
</p>
<p>
When you read an HTML document as <em>text</em>, you see a wave
of changing indentations going up and down the left side
of the document. The more indented an element is, the more
deeply nested it's corresponding "box" is.
</p>
</div>
<div>
<p>
<b>Text Editors (for programming)</b>
</p>
<p>
When writing code, programmers use special text editors (like
Sublime Text for example). These editors make the programmer's
life easier. For example, some text editors will automatically
generate a closing HTML tag when you write an opening tag.
</p>
</div>

</div>
</body>

O/P
Lesson 2: Creating a Structured Document with HTML
Developer Tools (in the Browser)

HTML elements are either inline or block. Block elements form an "invisible box"
around the content inside of them.
The "tree-like structure" of HTML
The "tree-like structure" comes from the fact that HTML elements can have other
elements inside of them. You can draw this relationship like a family tree. My mother
had multiple children. So did her mother, and so on...
In a browser, this structure shows up as a series of nested boxes. There are boxes
inside of boxes inside of boxes, and so on...
The relationship between indented HTML and boxes
When you read an HTML document as text, you see a wave of changing indentations
going up and down the left side of the document. The more indented an element is, the
more deeply nested it's corresponding "box" is.
Text Editors (for programming)
When writing code, programmers use special text editors (like Sublime Text for
example). These editors make the programmer's life easier. For example, some text
editors will automatically generate a closing HTML tag when you write an opening
tag

NOW HTML WITH CSS & RESULT

<!-- Each lesson div has a class="lesson". The concepts, concept
titles, and concept descriptions also have been put into divs
with class names. -->
<body>
<h1>Important Concepts</h1>

<div class="lesson">
<h2>Lesson 1: The Basics of the Web and HTML</h2>
<div class="concept">
<div class="concept-title">
How the Web Works
</div>
<div class="concept-description">
<!-- Notice how I removed the <em> tags from the
paragraph below. I didn't need to do this, I just
wanted to show how you can use a span and some
styling to achieve the same effect. -->
<p>
The web is a bunch of computers that communicate with
each other. When a person goes to a web page like
www.google.com, their computer sends a
<span class="italic">HTTP Request</span> to
a <span class="italic">server</span>.
</p>
<!-- Previously I was using <br> tags to force
the line breaks. Now I'm using <p> tags for what
they're meant to indicate: paragraphs. -->
<p>
The server finds the appropriate HTML document and sends
it back to the user's computer where a <span class="italic">
web browser</span> interprets the page and displays it on
the user's screen.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l3508959201/e-48329854/m-48480496">This video</a>
does a good job of explaining more.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
HTML
</div>
<div class="concept-description">
<p>

HTML stands for <span class="italic">Hypertext Markup

Language.</span> HTML documents form the majority of the
content on the web.
</p>
<p>
HTML documents contain <span class="italic">text
content</span> which describes "what you see" and
<span class="italic">markup</span> which describes
"how it looks". <a href="https://www.udacity.com/course/viewer#!/cud721/l-3508959201/m-48724340">This
video</a> gives a good overview.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Tags and Elements
</div>
<div class="concept-description">
<p>
HTML documents are made of HTML
<span class="bold">elements</span>. When writing HTML, we
tell browsers the type of each element by using HTML
<span class="bold">tags</span>.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l3508959201/m-48723444">This video</a> explains the
distinction well.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Why Computers are Stupid
</div>
<div class="concept-description">
<p>
Computers are stupid because they interpret
instructions literally. This makes them very
unforgiving since a small mistake by a
programmer can cause huge problems in a program.

</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Inline vs Block Elements
</div>
<div class="concept-description">
<p>
HTML elements are either <span class="bold">inline</span>
or <span class="bold">block</span>. Block elements form
an "invisible box" around the content inside of them.
</p>
</div>
</div>
</div>
<div class="lesson">
<h2>Lesson 2: Creating a Structured Document with HTML</h2>
<div class="concept">
<div class="concept-title">
Developer Tools (in the Browser)
</div>
<div class="concept-description">
<p>
HTML elements are either <span class="bold">inline</span>
or <span class="bold">block</span>. Block elements form
an "invisible box" around the content inside of them.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
The "tree-like structure" of HTML
</div>
<div class="concept-description">
<p>
The "tree-like structure" comes from the fact that HTML
elements can have other elements inside of them. You can
draw this relationship like a family tree. My mother
had multiple children. So did her mother, and so on...

</p>
<p>
In a browser, this structure shows up as a series
of nested boxes. There are boxes inside of boxes
inside of boxes, and so on...
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
The relationship between indented HTML and boxes
</div>
<div class="concept-description">
<p>
When you read an HTML document as
<span class="italic">text</span>, you see a wave of
changing indentations going up and down the left side
of the document. The more indented an element is, the
more deeply nested its corresponding "box" is.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Text Editors (for programming)
</div>
<div class="concept-description">
<p>
When writing code, programmers use special text editors
(like Sublime Text for example). These editors make the
programmer's life easier. For example, some text editors
will automatically generate a closing HTML tag when you
write an opening tag.
</p>
</div>
</div>
</div>
</body>
<!-- Check out all those closing tags in a row! -->

CSS

/* This code gives the only <h1> on the page a white TEXT color */
h1 {
color: white;
}
/* This code makes the <body> have a black BACKGROUND color. This rule
would apply to all the elements inside of the <body> unless... */
body {
background-color: black;
}
/* ...this code gives everything inside of the elements with class="lesson" a
gray background color. Unless, of course... */
.lesson {
background-color: gray;
}
/* ...an element inside has a class="concept" */
.concept {
background-color: white;
}
/* This code sets the font size to 20 pixels, makes it bold, and centers it.*/
.concept-title {
font-size: 20px;
font-weight: bold;
text-align: center;
}
/* Since I had removed all the <em> tags from the HTML and replaced them
with <span class="italic">, I needed to write this to have the "italic" class
actually do something... */
.italic {

font-style: italic;
}
/* ...I did something similar with the <b> tags*/
.bold {
font-weight: bold;
}

NOW THE RESULT

Important Concepts
Lesson 1: The Basics of the Web and HTML
How the Web Works
The web is a bunch of computers that communicate with each other. When a person
goes to a web page like www.google.com, their computer sends a HTTP Request to
a server.
The server finds the appropriate HTML document and sends it back to the user's
computer where a web browser interprets the page and displays it on the user's
screen. This video does a good job of explaining more.

HTML
HTML stands for Hypertext Markup Language. HTML documents form the majority
of the content on the web.
HTML documents contain text content which describes "what you see"
and markupwhich describes "how it looks". This video gives a good overview.

Tags and Elements

HTML documents are made of HTML elements. When writing HTML, we tell
browsers the type of each element by using HTML tags. This video explains the
distinction well.

Why Computers are Stupid

Computers are stupid because they interpret instructions literally. This makes them
very unforgiving since a small mistake by a programmer can cause huge problems in a
program.

Inline vs Block Elements

HTML elements are either inline or block. Block elements form an "invisible box"
around the content inside of them.

Lesson 2: Creating a Structured Document with HTML

Developer Tools (in the Browser)
HTML elements are either inline or block. Block elements form an "invisible box"
around the content inside of them.

The "tree-like structure" of HTML

The "tree-like structure" comes from the fact that HTML elements can have other
elements inside of them. You can draw this relationship like a family tree. My mother
had multiple children. So did her mother, and so on...
In a browser, this structure shows up as a series of nested boxes. There are boxes
inside of boxes inside of boxes, and so on...

The relationship between indented HTML and boxes

When you read an HTML document as text, you see a wave of changing indentations
going up and down the left side of the document. The more indented an element is, the
more deeply nested its corresponding "box" is.

Text Editors (for programming)

When writing code, programmers use special text editors (like Sublime Text for
example). These editors make the programmer's life easier. For example, some text

editors will automatically generate a closing HTML tag when you write an opening
tag

HTML CODE
<!-- Note that the NOTHING changed in the HTML (besides the comments)
between Demo Two and Demo Three. That's the power of CSS -->
<body>
<h1>Important Concepts</h1>
<div class="lesson">
<h2>Lesson 1: The Basics of the Web and HTML</h2>
<div class="concept">
<div class="concept-title">
How the Web Works
</div>
<div class="concept-description">
<p>
The web is a bunch of computers that communicate with
each other. When a person goes to a web page like
www.google.com, their computer sends a
<span class="italic">HTTP Request</span> to
a <span class="italic">server</span>.
</p>
<p>
The server finds the appropriate HTML document and sends
it back to the user's computer where a <span class="italic">
web browser</span> interprets the page and displays it on
the user's screen.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l3508959201/e-48329854/m-48480496">This video</a>
does a good job of explaining more.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
HTML
</div>
<div class="concept-description">

<p>
HTML stands for <span class="italic">Hypertext Markup
Language.</span> HTML documents form the majority of the
content on the web.
</p>
<p>
HTML documents contain <span class="italic">text
content</span> which describes "what you see" and
<span class="italic">markup</span> which describes
"how it looks". <a href="https://www.udacity.com/course/viewer#!/cud721/l-3508959201/m-48724340">This
video</a> gives a good overview.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Tags and Elements
</div>
<div class="concept-description">
<p>
HTML documents are made of HTML
<span class="bold">elements</span>. When writing HTML, we
tell browsers the type of each element by using HTML
<span class="bold">tags</span>.
<a href="https://www.udacity.com/course/viewer#!/c-ud721/l3508959201/m-48723444">This video</a> explains the
distinction well.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Why Computers are Stupid
</div>
<div class="concept-description">
<p>
Computers are stupid because they interpret
instructions literally. This makes them very
unforgiving since a small mistake by a

programmer can cause huge problems in a program.

</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Inline vs Block Elements
</div>
<div class="concept-description">
<p>
HTML elements are either <span class="bold">inline</span>
or <span class="bold">block</span>. Block elements form
an "invisible box" around the content inside of them.
</p>
</div>
</div>
</div>
<div class="lesson">
<h2>Lesson 2: Creating a Structured Document with HTML</h2>
<div class="concept">
<div class="concept-title">
Developer Tools (in the Browser)
</div>
<div class="concept-description">
<p>
HTML elements are either <span class="bold">inline</span>
or <span class="bold">block</span>. Block elements form
an "invisible box" around the content inside of them.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
The "tree-like structure" of HTML
</div>
<div class="concept-description">
<p>
The "tree-like structure" comes from the fact that HTML
elements can have other elements inside of them. You can
draw this relationship like a family tree. My mother

had multiple children. So did her mother, and so on...

</p>
<p>
In a browser, this structure shows up as a series
of nested boxes. There are boxes inside of boxes
inside of boxes, and so on...
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
The relationship between indented HTML and boxes
</div>
<div class="concept-description">
<p>
When you read an HTML document as
<span class="italic">text</span>, you see a wave of
changing indentations going up and down the left side
of the document. The more indented an element is, the
more deeply nested its corresponding "box" is.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
Text Editors (for programming)
</div>
<div class="concept-description">
<p>
When writing code, programmers use special text editors
(like Sublime Text for example). These editors make the
programmer's life easier. For example, some text editors
will automatically generate a closing HTML tag when you
write an opening tag.
</p>
</div>
</div>
</div>
</body>

CSS
/* This text color is specified in what's called "hex". You will learn more about
this later. */
h1 {
text-align: center;
color: #294860;
}
/* change to a nicer font */
body {
font-family: Helvetica;
}
/* the border-radius attribute makes the corners rounded and the margin
clears out space for the stuff inside the lesson divs. Try seeing what happens
when you comment out the rule that says
padding: 10px;
by changing it to
/* padding: 10px; */
.lesson {
background-color: #294860;
border-radius: 20px;
color: white;
padding: 10px;
}
/* margins push other elements away */
h2 {
margin: 10px;
}
.concept {
background-color: #DFEAF1;
padding: 4px;
margin: 10px;

border-radius: 4px;
color: black;
}
.concept-title {
font-size: 20px;
margin: 8px;
text-align: center;
color: #294860;
}
.concept-description {
font-weight: lighter;
margin: 6px;
}
.italic {
font-style: italic;
}
.bold {
font-weight: bold;
}

O/P

Important Concepts
Lesson 1: The Basics of the Web and HTML
How the Web Works
The web is a bunch of computers that communicate with each other. When a
person goes to a web page like www.google.com, their computer sends
a HTTP Request to a server.

The server finds the appropriate HTML document and sends it back to the
user's computer where a web browser interprets the page and displays it on
the user's screen. This video does a good job of explaining more.

HTML
HTML stands for Hypertext Markup Language. HTML documents form the
majority of the content on the web.
HTML documents contain text content which describes "what you see"
and markup which describes "how it looks". This video gives a good overview.

Tags and Elements

HTML documents are made of HTML elements. When writing HTML, we tell
browsers the type of each element by using HTMLtags. This video explains
the distinction well.

Why Computers are Stupid

Computers are stupid because they interpret instructions literally. This makes
them very unforgiving since a small mistake by a programmer can cause huge
problems in a program.

Inline vs Block Elements

HTML elements are either inline or block. Block elements form an "invisible
box" around the content inside of them.

Lesson 2: Creating a Structured Document with

HTML
Developer Tools (in the Browser)

HTML elements are either inline or block. Block elements form an "invisible
box" around the content inside of them.

The "tree-like structure" of HTML

The "tree-like structure" comes from the fact that HTML elements can have
other elements inside of them. You can draw this relationship like a family tree.
My mother had multiple children. So did her mother, and so on...
In a browser, this structure shows up as a series of nested boxes. There are
boxes inside of boxes inside of boxes, and so on...

The relationship between indented HTML and boxes

When you read an HTML document as text, you see a wave of changing
indentations going up and down the left side of the document. The more
indented an element is, the more deeply nested its corresponding "box" is.

Text Editors (for programming)

When writing code, programmers use special text editors (like Sublime Text for
example). These editors make the programmer's life easier. For example,
some text editors will automatically generate a closing HTML tag when you
write an opening tag.

Take a Break!
You've already covered the most conceptually important parts of this lesson. The rest will
give you impressive new ways to use CSS and HTML, but it will be a little intense
(especially if you're feeling mentally tired).
So schedule a time to come back (that's important), and take a well-earned break.
Give your brain some time to digest what you've learned about HTML and CSS and how
HTML classes combined with CSS styling can help you avoid repetition (and make really
cool web pages).

Learn More
Throughout your Nanodegree program, you'll have the chance to go deeper into concepts
through previously recorded events where students have asked questions and gotten
answers straight from your coaches.
These sessions cover things like common mistakes coaches notice students making,
additional practice of specific skills, or even just clarification of program details and
discussion of how students are feeling about their experience.
Coding Style

In this recorded session, Luke and Mark share best practices in coding style.
Video
Transcript
Keep an eye out for more Learn More opportunities in your Nanodegree course material
and access all recorded sessions from this list anytime.

Quiz: Using Semantic Tags

More on Semantic Elements

Content Sectioning

https://developer.mozilla.org/enUS/docs/Web/HTML/Element#Content_sectioning
Sections and Outlines of an HTML5 Document - The HTML5 Outline Algorithm

https://developer.mozilla.org/enUS/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_docume
nt#The_HTML5_Outline_Algorithm
Default Style Rules

Browsers use default stylesheets to determine how to display HTML elements.

You can view the default style rules for h1 and other elements for the following
browsers:

WebKit (Chrome and Safari)

Firefox
Internet Explorer
Because these rules differ sometimes between browsers, there are efforts to
promote consistency in styles across browsers. One popular solution to this
issue is using what is referred to as a CSS reset such as normalize.css.

Quiz: The Box Revisited

Web Pages Demonstrated in this Video

1.
2.
3.

Box Model page (box-model.html). In video: 00:00-03:21.

Style 1 page (style-1.html). In video: 04:33-06:01.
My Favorite App (mock1-fav-app.pdf). In video 06:02 - 06:15.
CSS to Use for Quiz

In your style.css you should set the screenshot class to max-width of 460px, and
the description to 705px. The other things to set in your style.css file are the boxsizing definitions and the outline that allows you to easily see all the boxes on
your page. Put the following in your style.css file:
*{
outline: 1px solid red !important;
}

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

Positioning Boxes
The mockup Jessica references can be found here: mock1-fav-app.pdf
A great guide to flexbox can be found here!
At 01:02 in the video, Jessica uses Dev Tools to add the CSS rule display:
flex to element.style, which applies the CSS to the selected div element
temporarily.
Students following along with the videos should create an .app class in
their style.css as follows:
.app {
display: flex;
}

This rule as-is works with Chrome 29+, IE 11+, and Mozilla 28+. In order to
support Safari, the -webkit- prefix must be added:
.app {
display: -webkit-flex;
display: flex;
}

Box Sizing and Positioning Summary

You can find more resources in the example webpage I've made.
Box Sizing

There are four main points that Jessica addressed about box sizing.
1.
2.
3.

HTML elements are boxes and each box has 4 components.

Because there are so many components to each box, it can often be hard
to get the size of a box just right.
There are two techniques you can use to help deal with sizing issues.

1.
2.

Set sizes in terms of percentages rather than pixels.

Set the box-sizing attribute to border-box for every

element.
4.

Different browsers work slightly differently. Sometimes this causes

different browsers to display the same code differently.
Box Positioning

1.

Divs are block elements (as opposed to inline), so by default they take
up the entire width of a page.
2.
Adding the rule display: flex; to the appropriate CSS will override this
behavior and let divs appear next to each other.

All of these things except for borders still need improving to look exactly like the
design mock.
Press "Next" to learn about the powerful routine you can use when continuing to
improve the page.
VIEW INTROBACK TO QUIZ

Quiz: Adding Image

You can download the sample image here and the mockup PDF here. (If the
image opens in a new web page or tab you can right+click or option+click the
image to save it.) When saving be sure to save the file in the images directory
you created in your toplist project directory. You can also use your own image if
you wish.
Adding an alt attribute is as simple as changing your code to:
<img src="img/app.png" alt="This is a screenshot">

In the previous video, Jessica added the CSS rule display: flex to element.style,
which adds the CSS directly to the divelement on the left-hand side of the
development tools. In this and future videos, this CSS rule is in the main CSS
file, style.css:
.app {
display: flex;
}

This rule as-is works with Chrome 29+, IE 11+, and Mozilla 28+. In order to
support Safari, the -webkit- prefix must be added:
.app {
display: -webkit-flex;
display: flex;
}

Quiz: Comparing With The Design

Note: The color boxes and codes on the left of the mockup are for color
reference only. They should not appear in your web page.
You can download the mockup here, if you haven't done so earlier.