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 toways "thinkoflike a programmer?" n this Nanodegree we all willthe focus one !vewill speci!c thinking that all programmers have to use time. come back to these ideas repeatedly throughout the Nanodegree.
1. Procedural Thinking #rocedural thinking involves creating perfectly clear and unambiguous instructions for a computer to follow. t may be easy to tell a person how to sort a deck of cards, but getting a computer to do that re$uires more thought. %ut once you&ve learned to think this way you&ll !nd that computers can do it much faster.
2. Abstract Thinking Abstract thinking means !nding similarity, or as programmers would say, generality amongst seemingly di'erent things. n this Nanodegree you will visit hundreds of Udacity web pages. t would be impractical for programmer to speci!cally of these pages individually. (hea Udacity programmers used program the powereach of what&s called abstraction to avoid unnecessary repetition of work.
3. Systems Thinking )ystems thinking happens when you break a big problem down into smaller pieces. #rogrammers do this when they create a plan *often on paper+ for how a program will work. t involves bigpicture thinking and decisionmaking about a problem and how di'erent pieces of a program can work together to solve it. f this is unclear now, don&t worry- ou&ll understand what this means much more clearly by the end of the Nanodegree.
4. Technological Empathy "(echnological empathy" comes in many forms. /or e0ample, 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. t&s almost impossible to program anything substantial without a basic understanding of how these tools work.
. !ebugging 1ebugging is a systematic process of relentlessly identifying the cause of a computer program that doesn&t work. hen a program doesn&t work, it&s because there is a mistake *also known as a "bug"+ somewhere in the computer code. )ince these mistakes are an unavoidable part of programming, every good programmer has a system for !0ing them and that system usually looks something like this2 3. 5. 7. 8.
4ollect evidence *what makes this program fail?+ 6enerate theories *what may have caused this problem?+ (est those theories *if my theory is correct, how could !nd out?+ /i0 the problem !on"t #orget$ 9eturn to your %dacity &ome by clicking :Udacity; in the navigation bar at the top of your screen. 4onnect with coaches and your fellow students using the !iscussion button on the left side of your screen. e&re here to help you. Let's learn together!
&o' This (ill (ork &ve been taking and making online courses for the last three years. (his Nanodegree is a curated path of what &ve found to be the very best content out there.
•
•
4omposed of a series of pro=ects broken into > stages. At each stage you will see a series of lesson videos, followed by a !nal pro=ect that will ask you to demonstrate the skills you =ust learned. (hese pro=ects will cover a wide range of topics, from web development to computer science fundamentals to understanding the roles of engineers in a tech company. ach stage is a collage of content sampled from a variety of classes taught by professional programmers, tech company creators, and university professors. will help you focus on the most important concepts by providing conte0t and occasionally !lling in gaps. !on"t #orget$ 9eturn to your %dacity &ome by clicking :Udacity; in the navigation bar at the top of your screen. 4onnect with coaches and your fellow students using the !iscussion button on the left side of your screen. e&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 uestions and never give up! In a later lesson, we'll dive into this a bit more. "or now, there are some basic computer skills that will be vital to success. #$%$%&$# if you aren't an e(pert in this )ust yet, you will simply need to have the mindset to be willing to learn them as you go. )nstructions #or each o# these skills are pro*ided here. &ookmark this link so you can come back whenever you need to. &asic computer skills you'll need
/ind the location of a !le on your computer Attach a !le to an email 9ename a !le 4ompress *@ip+ and uncompress a !le 1ownload and install programs from the internet
• • • • •
Connecting with your community *our +anodegree program will challenge you. That's what happens when you're really learning! To surmount these challenges, make use o# the resources a*ailable to you. *our +anodegree community will play a huge role in supporting you when you get stuck and in helping you deepen your learning. *ou can head to your #orums to ask and answer uestions and contribute to discussions. The dacity oach team, as well as the other students in your program, will be there to respond and help out. *ou can search to see if someone has already asked a uestion related to yours, or you can make a new post if no one has. hances are, someone else is wondering about the same thing you are, so dont be shy!
Tips for Asking Good Questions /hen reaching out for help in the forum, there are some key strategies to get the best possible support. 0rovide conte(t
nclude U9L links to the video or $ui@ you need help with. 0plain your process *include screenshots if necessary+
6ot an error message? nclude it-
/ormat your code using
Su pport from the Udacity Team The dacity team is here to help you reach your +anodegree goals! Select +esources at the top-right of the page to access discussion forums and 11 appointments with coaches. 2ur mission is to make your learning e(perience as effective and smooth as possible. 3et us know how we can help! •
•
•
,orums2 Along with your student community, the Udacity team maintains a strong presence in the forum to help make sure your $uestions get answered and to connect you with other useful resources. Slack -ommunity2 (his platform allows students to $uickly chat about issues in any of the course material as well as o'er help to stuck classmates. f you haven&t =oined yet, use this in*itation link to =oin your fellow classmates in the #N1 )lack 4ommunity. 11 Appointments2 /or more speci!c, codingrelated $uestions, schedule a oneonone appointment with a 4oach by clicking on 4oach Appointments in
the 9esources tab of your Udacity home. e will help you get those bugs resolved in no time4ow 5oes 0ro)ect Submission /ork6
7ui8 Integrity 9nd %indset The dacity 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. /e provide pro)ect deadlines in order to keep students on track to graduate within our recommended time frame. /e know life gets in the way once in awhile. If you miss a deadline, don't worry! :ust do your best to get back on schedule. 5on'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. *ou can always submit pro)ects early, so if you complete a pro)ect before your designated deadline, go ahead and submit it and keep moving forward. +ever stop learning! The dacity 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. /e provide pro)ect deadlines in order to keep students on track to graduate within our recommended time frame. /e gets in the once in awhile. If you miss a deadline, don't worry!a :ust do yourknow best life to get back on way schedule. 5on't forget, there is no penalty for missing deadline and you are more than welcome to establish your own timeline according to your personal schedule. *ou can always submit pro)ects early, so if you complete a pro)ect before your designated deadline, go ahead and submit it and keep moving forward. +ever stop learning!
7ui8 4ow 5o I "ind Time "or %y +anodegree6 /e've looked at the data, talked to dacity graduates, and found some keys to success. heckout the results of our research below, or visit the Study Tips blogpost ;with a video message from dacity 5ata Scientist, +ick,< for the full version.
"inal Tips
. 4tml An E ar l y W i n
r st l e s s ono fir stco ur s eo What you ar e a bout t o s eefi s ih t e ft he ft hi s
Nanodegr ee. You sh oul d co mpl et et hi s e l sso ni naf ew days i f yo u ca n. Thr oughout t hi s l ess on yo u wi l l be t aki ng not es on what yo u' r el ear ni ng. Af t er war ds,yo u wi l l HTML co nve r t yo ur not es o t si mp l e l ( i kewhat yo u' r er eadi ng now) and t hen
su bmi tt hem f or per so nal i ze df eedback r o f m a Udaci t y ev ri ewer . Per so nalf eedbacksio ne of t he bestpar t s a bout t ak i ng a Nanodegr ee, and we want yo ut o ex per i encei t as e ar l y n it he pr ogr am as p ossi bl e.
S ag e Tr y yo ur bestt o co mpl et et hi s e l ss o nt ( a nd0w hi chco mes a f t er ) , wi t hi n
a weekofsi gn i ngup!
/here to "ocus *our 9ttention *our instructor for this lesson is Steve 4uffman.
Steve is the cofounder of +eddit, an incredible programmer, and an ama8ing teacher. 4e taught me a lot of what I know about building real web pages with code. This lesson has two parts. 0art 1
In 0art 1 you will develop enough technological empathy to understand what happens when you open ;or create< a web page. Specifically, you'll gain
%asic understanding of how the internet works.
•
•
Understanding of how users/ computers/ ser*ers/ http/and the internetall !t together. 0art =
In 0art = you will use &T0L tags to create a simple &T0L document that a browser can display as a web page. +ote that the ne(t video is Steve introducing the entire course. *ou won't actually take the whole course in this +anodegree program, but it's still worth learning what his course covers in case you decide you want to take the whole thing later.
Unit 3 (he basics of the web
3+ 5+ 7+ 8+ >+
(he web C(
Duestuions 3+ hat is the main type of document on the web ??? a. Ctml EEcorrectFF b.
Links to other pages
Ctml markup ENA<FcontentsEINA<F #NN6 (A6
4L)N6 (A6
7ui8 &old Tag
ote the te0tbo0 should have default te0t in it for you to edit. n the meantime, it should look like this2 C(
our =ob is to make "reasonably straightforward" bold by using the EbF tag.
m tag HF emphasis tag FF makes things italic 7ui8 Italics
)nstructions
omputers 9re Stupid 0rogrammers often describe computers as >stupid.> /hen 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. onsider, for e(ample, the sentence >$ach of us saw her duck.> 5oes that mean each of us saw her pet duck6 2r did we each see her duck under something6 5epending on the conte(t, you might be able to infer which interpretation is correct. omputers can't make these inferences and so they interpret language literally. omputer 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 ne(t 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.
7ui8 %issing $nd Tag
f you miss the closing EIemF(ag everything after opening EemF tag is italici@ed
&T0L ATT+)%TES E(A6 A((9H;value;FcontentsEI(A6F Anchor EaFHF links Ea hrefH;www.google.com;FhelloEIaF pening tag
U9L
closing tag
Attribute name
7ui8 %aking 3inks
Errata U9Ls need the protocol
(he U9L in the link should be "httpudacity.com" and not "udacity.com". f the default te0t is missing
G1 tag is a tag that has no contents. As it has no contents in it so it is not re$uiring a closing tag. Eimg FsrcH;http2IIudacity.comIcs5>70Ihipmunk.png : alt H :hipmunk;F
It's 2K to "orget *ou may be wondering why anchor tags use the href attribute while img tags use the src attribute. 9nd you may become frustrated when ;not if< you make the mistake of using one when you really need the other. &ecause when you make this mistake, your 4T%3 will not work. So how will you ever remember details like this6 /ell... you don't have to! In fact, you may have already forgotten how to add links to 4T%3. That's fine. nless you're writing 4T%3 all the time, details like these aren't worth remembering. 9 ?oogle search for >adding links in html> will always get you your answer. +ew programmers often struggle with this because in other learning environments it's often important that you remember a lot of facts. &ut programming doesn't work like that! There's )ust 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. /hen you do forget stuff, there's lots of resources to help you out. 9 ?oogle search is usually helpful. 9nother great place is http'''.'3schools.com, a website with lots of documentation on web development, including a huge reference guide of 4T%3 tags. 9s you get more e(perience programming, the more you'll learn about all the ama8ing resources the web has for new andprofessional programmers.
7ui8 /hitespace
ote the te0tbo0 should have default te0t in it for you to edit. n the meantime, it should look like this2 Cello everyone- e&re using two lines now-
our =ob is to insert a linebreak using the EbrF tag.
7ui8 0aragraph Tag
ote the te0tbo0 should have default te0t in it for you to edit. n the meantime, it should look like this2 Cello everyone- e&re using two lines now-
our =ob is to insert a linebreak using the EpF tag.
Inline @s &lock
"Jn" that )teve writes is how programmers represent a "newline" character in common coding languages such as 4, Kava, #ython, etc.
EbrF inline it have no space in height very close 0 Cello hello Cellohello
te0tisveryclose
(e0t EbrFte0t EpFblock it has some di'erence in height and width 0e
Cello hello Cellohello
thereisagapintwolines
EpFte0tFEIpFte0t
/here to "ocus In the previous video Steve e(plained the distinction between inline and block elements. *ou 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 ne(t lesson. In the ne(t 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 ne(t lesson you will see how these elements can be used to create web pages with comple( structures.
7ui8 Span 9nd 5iv
e now recommend using scratchpad.io instead of the C(
1i'erence between span and div Espan classH;hello;F 4)) (e0t EIspanF nline
Ediv classH;bar;F te0t EIdivF block
EspanFthis is one lineEIspanF yes this is one line HHH this prints the whole te0t in one line EdivFthis is one lineEIdivF this prints the te0t 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 DOCOUMET !DOCT"#E html$ html$head$ title$Title%title$ %head$ bod)$ Content %bod)$
head, metadata,&aa scri(t,css
%html$.
4T%3 5ocument Structure The concept of code structure will come up freuently thoughout this +anodegree program. That's because programmers write code not )ust for computers, but for people as well. /riting code that people can easily read is a E+5 important idea in computer programming. 9nd a huge part of writing good code is structuring it well. If you've ever written an $nglish 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 $nglish - a new indent is a new idea. 2ne big difference between indenting programming languages and indenting $nglish, however, is that an indentation level persists throughout an idea. In 4T%3 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 e(ample
3esson 1 Summary *ou've learned a lot so far! 3et's recap some of the big ideas
The Word Wide We! The web is composed largely of &T0L documents. 4T%3 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 )nternet, and ser*ers. The client and servers interact through something called the &yperte6t Trans#er Protocol 7&TTP8.
"asic #TML $ements &T0L Elements are what we use to tell a web browser how to display content in a web page. %ost 4T%3 elements consist of an opening and a closing tag with some contentbetween them. EbFte0tEIbF %akes the 'te(t' content bold EemFte0tEIemF %akes the 'te(t' content italic
#TML Attri!utes Some elements accept additional values called attributes in their opening tags. 9ttributes provide additional information to the browser. "or e(ample, the anchor tag takes an attribute called href that defines a #3 to link to. Ea hrefH"url"FlinkEIaF reates a hyperlink to the href attribute value urland names it link Eimg srcH"url" altH"te0t"F 5isplays 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 >te(t> is shown.
More #TML $ements EpFte0tEIpF 5efines a paragraph. The content of the EpF element is in a >bo(> EbrF reates a line break EdivFcontentEIdivF reates a >bo(> container element EspanFcontentEIspanF reates an >inline> container element
3et's disect this code a bit 1< The first line is something that should appear on every webpage you make. E-14(# htmlF defines the type of the document so the browser will render it correctly. =< The EhtmlF tag opens our document. $verything that shows on the webpage is placed within this tag. A< The EheadF 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<. +otice that the EheadF tag is indented to a new level because the EhtmlF tag was opened but not closed ;a new idea was started but not completed<. %oreso, the EtitleF tag is indented another level further ;the EheadF tag was opened but not closed<. B< The EtitleF tag is closed on the same line it was opened which we usually do if the content of a tag is short. 2n the other hand, the EheadF tag is closed on a different line. The closing tag is indented to the same level as the matching opening one. +ow take a look at the contents of the EbodyF tag. Is there anything about the structure that is surprising to you6
#ro=ect )ubmission
6etting /eedback (hroughout your Nanodegree program, you will submit your work for review. hen you submit a pro=ect, you will receive a grade that indicates either that
you&ve passed that stage or that you need to work on your pro=ect and submit again. mportant2 •
•
• •
ou will not receive a grade for your Stage 9 submission *but you 'ill receive feedback+ e want you to submit your notes from the !rst lesson within one week of beginning the Nanodegree, but there 'ill not be any conse:uences #or missing this deadline . /uture stages *Stage 1 Stage + should try to be completed on time. (his is a #ormati*e checkpoint designed to give you immediate feedback and ensure you have the con!dence and the support you need to keep moving forward. )tage #ro=ect2
•
• •
•
rite your notes in an html !le using the tags learned in this )tage such as EpF,EdivF, Eh3F, EbF, EemF, EspanF Meep it simple. 4)) for styling is not necessary for the #ro=ect.
&o' the (eb (orks 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 ob of e!plaining.
&T0L HTML stands for Hypertext Markup Language. HTML documents form the maority 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 e!plains the distinction well.
(hy -omputers are Stupid #omputers 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.
)nline *s lock Elements C(
C(
8P75RP>8Im8P8P8R"F(his videoEIaF does a good =ob of e0plaining. EIpF EbFC(
EpF,EdivF, Eh3F, EbF, EemF, EspanF
9eview for submission of my web page ;h3
9ny content on the page should be kept within CbodyD tag.
-
E-14(# htmlF *E+U*ED
The first line of the code should always be C!52T*0$ htmlD as it conveys to the rendering browser that the code is written in 4T%3. 4ence, it should precede any comments written in the code as well, otherwise some browsers might go berserk.
;html<;head< /U00E/TO
4ere is the basic structure for 4T%3 code for reference C!52T*0$ htmlD ChtmlD CheadD CtitleD0age TitleCEtitleD CEheadD CbodyD Ch1D%y "irst 4eadingCEh1D CpD%y first paragraph.CEpD CEbodyD CEhtmlD Below is the interpretations for tags The C!52T*0$ htmlD declaration defines this document to be 4T%3F The ChtmlD element is the root element of an 4T%3 page The CheadD element contains meta information about the document The CtitleD element specifies a title for the document The CbodyD element contains the visible page content The Ch1D element defines a large heading The CpD element defines a paragraph 1
;title
?ood )ob with CheadD definition. #ead more about other CheadD tag's child elements here. 4
;head<
5
;body< 6
;img srcH"42JUsersJ)AU9A%CJ1esktopJudacity classesJAssignmentJa.png" altH"#icture"< /U00E/TO
?ood )ob adding >alt> te(t to this CimgD element! That will be especially helpful for users with visual impairments ;who use screen readers< and even for Search $ngine 2ptimi8ation. 4owever, screen readers )ust read out loud the html te(t it finds. /hen it reaches an image, it reads the alt te(t. 4aving that in mind, a more descriptive alternative te(t would be desirable ideally it should describe the content of the image perfectly. $(ample Cimg srcG>dog.)pg> altG>0icture of a ?olden #etriever dog sitting>D 7
(he day is ;em
Te(t sections should always be enclosed within CpD tags for structure. They should not be left dangling in the code. 8
;p<ts so good that am learning new thing through online;p< 9:
;a hrefH"https2IIwww.udacity.com"
;div<ts not about learning but the environment that you are getting to learn new things on the go;div< /U00E/TO
Optional comment?ood )ob on using CspanD and CdivD tags. "or the difference between CdivD and CspanD tags 5iv is a block ;new lines appear before and after the element with it consuming the full width available< elementH 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 -5iv's places in separate linesH span's in one line -5iv'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 te(t, images, etc. "or e(ample CdivDThis a large main division, with CspanDa small bitCEspanD of spanned te(t!CEdivD +ote that it is illegal to place a block level element within an inline element, so CdivDSome CspanDte(t that CdivDI wantCEdivD to markCEspanD upCEdivD ...is illegal. 9-
;body< 9
;html< 23E/OME
?ood attempt ! 3ooking forward to more of your wonderful submissions from the coming stages. ?ood luck and happy learning. < 91
4T%3 5ocument Structure The concept of code structure will come up freuently thoughout this +anodegree program. That's because programmers write code not )ust for computers, but for people as well. /riting code that people can easily read is a E+5 important idea in computer programming. 9nd a huge part of writing good code is structuring it well. If you've ever written an $nglish 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 $nglish - a new indent is a new idea. 2ne big difference between indenting programming languages and indenting $nglish, however, is that an indentation level persists throughout an idea. In 4T%3 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 e(ample
3et's disect this code a bit 1< The first line is something that should appear on every webpage you make. E-14(# htmlF defines the type of the document so the browser will render it correctly. =< The EhtmlF tag opens our document. $verything that shows on the webpage is placed within this tag. A< The EheadF 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<. +otice that the EheadF tag is indented to a new level because the EhtmlF tag was opened but not closed ;a new idea was started but not completed<. %oreso, the EtitleF tag is indented another level further ;the EheadF tag was opened but not closed<. B< The EtitleF tag is closed on the same line it was opened which we usually do if the content of a tag is short. 2n the other hand, the EheadF tag is closed on a different line. The closing tag is indented to the same level as the matching opening one. +ow take a look at the contents of the EbodyF tag. Is there anything about the structure that is surprising to you6
3et's disect this code a bit 1< The first line is something that should appear on every webpage you make. E-14(# htmlF defines the type of the document so the browser will render it correctly. =< The EhtmlF tag opens our document. $verything that shows on the webpage is placed within this tag. A< The EheadF 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<. +otice that the EheadF tag is indented to a new level because the EhtmlF tag was opened but not closed ;a new idea was started but not completed<. %oreso, the EtitleF tag is indented another level further ;the EheadF tag was opened but not closed<. B< The EtitleF tag is closed on the same line it was opened which we usually do if the content of a tag is short. 2n the other hand, the EheadF tag is closed on a different line. The closing tag is indented to the same level as the matching opening one. +ow take a look at the contents of the EbodyF tag. Is there anything about the structure that is surprising to you6
3esson 1 Summary
*ou've learned a lot so far! 3et's recap some of the big ideas
The Word Wide We! The web is composed largely of &T0L documents. 4T%3 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 )nternet, and ser*ers. The client and servers interact through something called the &yperte6t Trans#er Protocol 7&TTP8.
"asic #TML $ements &T0L Elements are what we use to tell a web browser how to display content in a web page. %ost 4T%3 elements consist of an opening and a closing tag with some contentbetween them. EbFte0tEIbF %akes the 'te(t' content bold EemFte0tEIemF %akes the 'te(t' content italic
#TML Attri!utes Some elements accept additional values called attributes in their opening tags. 9ttributes information toto the browser. "or e(ample, the anchor tag takes an attributeprovide called additional href that defines a #3 link to. Ea hrefH"url"FlinkEIaF reates a hyperlink to the href attribute value urland names it link Eimg srcH"url" altH"te0t"F 5isplays 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 >te(t> is shown.
More #TML $ements EpFte0tEIpF 5efines a paragraph. The content of the EpF element is in a >bo(> EbrF reates a line break EdivFcontentEIdivF reates a >bo(> container element EspanFcontentEIspanF reates an >inline> container element
The "our Stages 2f $(pertise
4ow /e /ill se The Stages
Ta bl e ofCont ent s
1.Less on 1: The asi B csoft he W eb an d H TML w t heWebWor k s o Ho o HTML
o Tags and El em ent s
o Why om C pu t er s ar e S t up i d o I nl i ne vsBl ockEl ement s
2.Lesso n 2 : Cr ea t i nga S t r uct ur ed D ocu men t wi t h H TML o Deve l oper To ol s
' s t " r eel i ke " St r uc t ur e o HTML ndent at i ons a nd B oxe s o I o T ex t Edi t or s
3.Le sson 3:Add i ngCSS St yl et o HTML St r uct ur e i di ng Repet i t i on o Avo o CSS
ngResour ces o Codi I mpo r t an t Con ce ps t
Le sso n 1: The Ba si cs of t he W eb and TM H L
Howt h e Web Wor k s
The web i s a u b nchof co mpu t h e a r s t co mmuni ca t e w i t h e ach ot her . Wh en aper son goe s o w t ebapage l i ke www. go ogl e. co m, t hei r co mpu r t esen ds Ha t o TTPRequ es t as . erver Theser v er fin ds h t ea r op pp r i at e HTML do cum en t an d se nd s t i backt oe t huser ' s com u p t er wher ew aeb ow n i t er pr et s br s er t hepa ge and di sp l aysi t on t he r ' suse s c r een. Thi s i v deodoes a good j ob of ex pl ai ni ng mor e.
HTML HTML st an ds or f HTM H ype r t ext Mar kupan L gu ag e. L docu ment s o f r m t he maj or i t y o ft he co nt e he ntw oeb n. t HTML do cu ment s co nt ai n hi chdescr i bes w "hat t ex t co nt entw y ousee " an mar d k upw hi chdesc r i bes " how i tl oo T ks hi s " . vi deogi v es go aodover vi ew .
Tags an d El em en t s HTM L do c um en t s ar e m ad e of Hel TM em Len t s. When wr i t i ng HTML, we t el lbr owse r s h t et yp e of eachel ement by u sn i g HTM Ltags .Thi s i v deoe x pl ai ns t he di s t i nc t i on wel l .
Why om C pu t er s ar e St up i d
Comput er s a r e st upi d beca uset hey n i t er pr et i nst r uct i ons l i t er al l y.Thi s make st hem ve r y unf or gi v i ng si nc e as mal l mi st ak e b y ar og pr am mercan cau se ug he p r ob l em s n i a pr og r am .
I nl i ne vs l o B ckEl ement s HTML el ement s ar e ei t h i er n l i neorbl ock.Bl ock el em en t s f or m an " i nvi si bl e box"ar ound t he co nt ent i nsi de of t hem. Le sso n 2:Cr eat i ng a S t r uct ur edDoc um en t wi t h HTM L
Deve l oper Tool s( i nt he Br owse r ) HTML el ement s ar e ei t h i er n l i neorbl ock. Bl ockel ement s f or m an " i nvi si bl e box"ar ound t he co nt ent i nsi de of t hem.
The " t r eel i kes t r uc t ur e" of HTML The " t r eel i kest r uct ur e" co mes r f om t he f actt hat HTML el ement s ca n have ot her el ement s n i si de of t hem. You ca n dr aw t hi s e r l at i onsh i p l i kea f ami l y r t ee. My m ot her had mul t i pl e ch i l dr en. So di d her mot her , and soon. . . I n a br ow ser ,t hi ss t r u u c r e t sh ows u p as a e s r i es o f nest ed boxe s.Ther e ar e boxe s n i si de of boxe s n i si de of boxe s,and soon. . .
The r el at i onsh i p bet ween i ndent ed HTML and boxes Whenou y ead r naH TM L doc um ent as ,y ousee w aave of text ch angi ng i ndent at i ons g oi ng up and down t he l ef t si de of t he docu ment . The mor ei ndent ed an el ement i s,t he mor e deepl y nest ed i t s co r r esp ondi ng " box"s. i
TextEdi t or s f ( or pr ogr ammi ng) When wr i t i ng co de, pr ogr ammer s u sesp eci al t extedi t or s l ( i ke Subl i me Te xtf or exa mpl e) . Theseedi t or s m aket he pr ogr ammer ' s i f l e easi er . For exa mpl e, so me t ex t edi t or s w i l l aut omat i ca l l y g ener at e a cl osi ng HTML t ag when you wr i t e an openi ng t ag. Le sso n 3:Add i ng CSS St yl e o t HTM L St r uct ur e
Avo i di ng Repet i t i on Avo i di ng r epet i t i on i si mpor t ant f or a va r i et y of r eas ons . Avo i di ng Er r or s: When pr ogr am mer s don' t av oi d r epet i t i on, t hey w i l l of t en havet o do t he sa me t hi ng ove r and ove r . Thi s may m ean co py a nd past i ng ce r t ai n st yl e at t r i but es n i t o many HTML el ement s o rr ew r i t i ngt he sam e cod e( som et i mes w i t h
mi nor di ffer ence s)many i me t s.Thi s ca nl ead t o er r or s w hen t he pr ogr ammer deci des o t make a ch ange t o so met hi ng. I f t hey d on' t di l l i gent l y m aket hat sa me ch ange eve r yw her et he r epeat ed co de appear s,pr obl ems w i l l ar i se . Consi st en cy: n It hi s w eb page, I want ed eve r y e l ss on t ol ook t he sa me. I nst ead of manual l y g i vi ng eachone t he sa me st yl e, I was a bl et o ass i gn each l ess o h t n e div s ameclass a nd t hen s pec i f yt he s t y l e f or t hat c l as si n onl y one pl ace ! By avo i di ng r epet i on, i t ' s n ow ve r y e asyf or me t o makech anges o tt hi s st yl e.
CSS CSS st ands o f r Casca di ng St yl e Sheet s a nd t hey i ve g pr ogr ammer s away otco nt r olt he st yl e of r el at ed HTML el ement s.Thi s s i d one by g i vi ng si mi l ar HTML el ement s h t e s ameclassname and t hen sp eci f yi ng t he st yl et hat sh oul d appl yt o t hat c l as s .
Cod i ngResou r ces The f ol l owi ng c odi ng r eso ur c es wi l l hel p me l ear nt o " t hi nk l i ke a pr og r am mer " :
Udaci t y -Fr om t he Udaci t y h omepage I ca n acce ssot l s o f cl ass es o t hel p me on my o j ur ney,i ncl udi ng t he I nt r ot o Pr ogr ammi ng Nanodegr ee pr ogr am! I ca n fin dl ot s o f su ppor t und ert he" Resou r ces" t ab ofmy N anod eg r ee pr ogr am Udaci t y Di scu ssi on Fo r ums -The Udaci t y D i scu ssi on For ums a r e a gr eat pl acet o go i f I need hel p wi t hal esso n or pr oj ec t . St ack ver Oflow-St ackOve r flo w i s asi t e pr of ess i onal pr ogr am mer s u seal lt he t i me whe n debu gg i ng cod e. Ther e ar e many ye ar s o f di scu ssi on and t r oubl esh oot i ng hel p on t hi s s i t e! Pyt hon Tu t or-Py t hon Tut or i sa s i t e t hat c oul d be r eal l y hel pf ulwhen I st ar tl er ni ng t he Pyt hon pr ogr ammi ng l anguage i n St age 2. I t hel ps m et o vi su al i zehow co de r uns.
-SS IT (his is a 4)) comment TI body padding2 5p0 3p0V fontfamily2 CelveticaV ma0width2 5p0V margin2 autoV IT (he refers to the top and bottom margins and the "auto" automatically TI fontsi@e2 3.8emV W IT sets the left and right margins to e$ual values. (his centers the body on the
page.TI h3 te0talign2 centerV color2 O5R8PV W p margin2 3p0 V W ul liststyletype2 noneV IT this removes the bullets that show up by default in unordered lists TI W li fontsi@e2 5p0V lineheight2 88p0V IT each line of te0t should occupy 88 pi0els of height *good for mobile usage and fat !ngers+ TI W
.lesson backgroundcolor2 O5R8PV borderradius2 5p0V color2 whiteV padding2 3p0V margin2 3p0 autoV W h5 margin2 3p0V W .concept backgroundcolor2 O1/A/3V padding23p0V 8p0V margin2 borderradius2 8p0V color2 blackV W
.concepttitle fontsi@e2 5Pp0V margin2 Pp0V te0talign2 centerV color2 O5R8PV W .conceptdescription fontweight2 lighterV W margin2 p0V .code fontfamily2 4ourierV color 2 blackV fontweight2 boldV paddingleft2 8p0V paddingright2 8p0V W
C("Fnline vs %lock lementsEIaFEIliF EIulF EIliF Eli classH"(4lesson"FEa hrefH"Olesson5"FLesson 52 4reating a )tructured 1ocument with C(
EliFEa hrefH"Olesson58"F(e0t ditorsEIaFEIliF EIulF EIliF Eli classH"(4lesson"FEa hrefH"Olesson7"FLesson 72 Adding 4)) )tyle to C(PR>R53Ie 8P75RP>8Im8P8P8R"F(his videoEIaF does a good =ob of e0plaining more. EIpF EIdivF EIdivF Ediv classH"concept" idH"lesson35"F Ediv classH"concepttitle"F C(PR>R53Im8PQ5878"F(his
videoEIaF gives a good overview. EIpF EIdivF EIdivF Ediv classH"concept" idH"lesson37"F Ediv classH"concepttitle"F (ags and lements EIdivF Ediv classH"conceptdescription"F EpF C(PR>R53Im 8PQ57888"F(his videoEIaF e0plains the distinction well. EIpF EIdivF EIdivF Ediv classH"concept" idH"lesson38"F Ediv classH"concepttitle"F hy 4omputers are )tupid EIdivF Ediv classH"conceptdescription"F EpF 4omputers are stupid because they interpret instructions literally. (his makes them very unforgiving since a small mistake by a programmer can cause huge problems in a program. EIpF EIdivF EIdivF Ediv classH"concept" idH"lesson3>"F Ediv classH"concepttitle"F nline vs %lock lements EIdivF Ediv classH"conceptdescription"F EpF C(
or EbFblockEIbF. %lock elements form an "invisible bo0" around the content inside of them. EIpF EIdivF EIdivF Ediv classH"concept" idH"lesson55"F Ediv classH"concepttitle"F (he "treelike structure" of C(
Ediv classH"concepttitle"F Avoiding 9epetition EIdivF Ediv classH"conceptdescription"F EpF Avoiding repetition is important for a variety of reasons. EIpF EpF EbFAvoiding rrors2EIbF hen p rogrammers EemFdon&tEIemF avoid repetition, they will often have to do the same thing over and over. (his may mean copy and pasting certain style attributes into many C(
EIpF EpF EbFEa hrefH"http2IIstackoverXow.comI"F)tack verXowEIaFEIbF )tack verXow is a site professional programmers use all the time when debugging code. (here are many years of discussion and troubleshooting help on this siteEIpF EpF EbFEa hrefH"http2IIpythontutor.comI"F#ython (utorEIaFEIbF #ython (utor is a site that could be really helpful when start lerning the #ython programming language in )tage 5. t helps me to visuali@e how code runs. EIpF EIdivF EIdivF EIdivF EIbodyF
Why You% Make &t $ven if you aren't interested in building web pages, this pro)ect will be an important foundational learning e(perience for any programming you want to do in the future. "rom this stage, you will • • • •
• •
•
6et an introduction to important ideas throughout all of programming like2 hat it means to "write code" hy programmers hate unnecessary repetition Cow the code that programmers write can have structure and how computers read and understand that structure (he importance *and pain+ of synta0 re$uirements %uild comfort with programming tools before learning a more powerful *and potentially challenging+ programming language 0perience the thrill of writing code to tell a computer what to do and then watching the computer actually do it
4ow *ou'll %ake It
3. 5.
6o through lessons 3.3 and 3.5 which immediately follow this one. As you go through the following lessons, you may want to take notes *on paper, on a computer, anywhere+. 7. After lesson 3.3 and 3.5 you&ll !nd a (ork Session, during which you&ll work on your pro=ect for this stage. n the )upporting
4ow These 3essons /ill /ork /elcome to the first stage of the +anodegree program.
In my role at dacity, I've gotten to take )ust about every lesson of every course we've ever made ;I'm lucky<. 9lmost every course has had a segment or two that was really ama8ing. The lessons in this +anodegree are compilations of the best segments of some of dacity's other introductory programming classes. This stage is actually a selection of videos from )ntroduction to &T0L and -SS. &efore you begin, I recommend you download the starter code for this +anodegree program here. These files will help you follow along and take notes during each lessson.
Adding Useful %ookmarkssn&t it frustrating when you can&t !nd a speci!c website right when you need it in order to solve a problem? %rowser %ookmarks are a developer&s best friend. As you progress through #N1, you&ll come across useful resources. t&s a great practice to bookmark these resources for future reference. e have included a great starter kit for bookmarks that will be useful throughout your =ourney in #N1. /ollow these easy steps to get your bookmarks imported to your browser2 Step 1 1ownload the !le #N1Ybookmarks.@ip from the )upporting
Step 2 Navigate to the %ookmark
Step 3 4lick the rgani@e dropdown menu, and select mport %ookmarks /rom C(
Step 4 Navigate to your downloaded !le #N1Ybookmarks.@ip, un@ip the !le, select the #N1Ybookmarks.html and click pen
Step Goila- n=oy your brand new bookmark folders full of useful resources-
ote (hese steps are shown using 4hrome. f you prefer a di'erent browser, you can still import the bookmark !le into the browser of your choice. 4heck out these resources for your browser choice. /ollow instructions to import from an C(pera Support
Supporting Materials
Share and 5iscuss in the Slack ommunity /e've created a Slack channel )ust for Intro to 0rogramming +anodegree students! Slack is an ama8ing tool for you to connect directly with and learn from your dacity coaches, fellow students, and graduates of the program. *ou can network, get support, and share ideas in real-time! "eel free to post uestions about the material, create your own channels, and get to know your fellow Intro to 0rogramming students. #euest your invite here and start connecting! /e also recommend downloading the Slack desktop app and keeping it open as you work on your +anodegree program.
Learn More Throughout your +anodegree program, you'll have the chance to go deeper into concepts through previously recorded events where students have asked uestions 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 )ust clarification of program details and discussion of how students are feeling about their e(perience. 5eveloper Tools
In this recorded session, Mark and Luke answer Stage 0 "uestions and walk e#eryone through using $hro%e's &e#elop%ent ools to explore HML and $SS code for any website(
ideo Transcript
7ui8 0age Structure
(here is also a EtableF element after the EpF element, but we skipped it for brevity. t is still part of the same tree branch. (he page you should e0plore can be found here httpassignments.udacity? e6tras.appspot.comcourseshtml?csssamplese6plore.html /ollow us on (witter@c'pittman @essica%elmen
7ui8 @isual Styling
ou can !nd all the e0amples for this course here. (he second e0ample which you are supposed to check for this $ui@ is Same &T0L 2-
"ocus heckpoint &e prepared, the ne(t video is A mins long but goes over a lot. *ou 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 •
C(
• • •
C(tree-like structure> means, read the first two paragraphs of the 'ikipedia article on Tree Structures.
4T%3-SS-52%
&T0L Cyper(e0t 0 1ocument b=ect
7ui8 &o(es $verywhere
,iles re#erenced
3. 5.
shapes.html shapes.css
&o(es, ?rids 9nd #ules 7ui8 &o(ifying 5esign
Note that the color swatch bo0es and color te0t values on the left of the page mockup are for reference only. (hey are not meant to be included as part of the !nal page design.
ou can !nd the design mockup Kessica is demonstrating here2 mock3? port#olio?1.pd#. ou can also view additional page design mockups on the course2 Sample Pages and Assets.
4ow to 3isten to $(perts *ou're about to watch an interview with :acues, a professional programmer who works at dacity. /hen you're a novice ;in anything, but especially with programming<, it can be difficult to communicate with e(perts. That's because e(perts are so familiar with their field that they've forgotten what it was like to get there. This often means that e(perts will • • •
assume you have knowledge that you don&t use =argon you don&t understand speak too $uickly for you to understand. /hen people do this, remember that they probably aren't trying to confuse you or show off. They have usually )ust forgotten how hard it was for them when they were learning the same thing. In these situations, don't be afraid to ask uestions even if they seem basic. The person you're talking to will probably be e(cited to talk about anything in their field if someone is willing to listen. 3uckily, :acues does a good )ob of avoiding >e(pert blind spot.> 9s he speaks, listen to the technological empathy he has! /hen he sees a picture, he immediate sees it the way a browser sees 4T%3 as bo(es within bo(es within bo(es... This kind of e(pertise takes lots and lots of practice to develop. &ut if you en)oy this sort of thing, you may want to check out dacity's ,ront End (eb !e*eloper anodegree when you're done with this one.
&o(es To 4T%3
Kessica is using the mock1?#a*?app.pd# design mockup from the course Sample Pages and Assets. *(he design mockup title there is2 )imple /avorite #age+. #1/s *like this design mockup page+ are not editable. f you want to follow along you can create your own C(
9eXection 9eXecting on what you&ve learned helps you bridge the knowledge gap between how novices and e0perts think about this material. )ummari@e what you&ve learned
ou should have a saved C(
pen the C(
stage1.Bip
3earning by $(ample The ne(t two segments show you two e(amples of a web page. Though both look identical for now, the structured e(ample will be much easier to modify in the future. *ou can switch back and forth between the displayed page and the underlying 4T%3 by pressing the buttons on the top left. &rowse these two e(amples and pay attention to how the EdivFs in the first e(ample are used to group related content.
ECA0PLE >, &T0L !>-%0ET E- (his is an C(8QPP7Ie 8P75RP>8Im8P8P8R"F(his videoEIaF does a good =ob of e0plaining more. EIpF EIdivF E- And this is where concept 3 ends. Note how the indentation level now matches up with where lesson 3 began.F E- Now concept 5 begins... F EdivF EpF EbFC(
form the ma=ority of the content on the web. C(8QPP7Im 8PQ5878"F(his videoEIaF gives a good overview. EIpF EIdivF EdivF EpF EbF(ags and lementsEIbF EIpF EpF C(8QPP7Im 8PQ57888"F(his videoEIaF e0plains the distinction well. EIpF EIdivF EdivF EpF EbFhy 4omputers are )tupidEIbF EIpF EpF 4omputers are stupid because they interpret instructions literally. (his makes them very unforgiving since a small mistake by a programmer can cause huge problems in a program. EIpF EIdivF EdivF EpF EbFnline vs %lock lementsEIbF EIpF EpF C(
EdivF EpF EbF1eveloper (ools *in the %rowser+EIbF EIpF EpF C(
>( T&E mportant 4oncepts
Lesson 1 The asics o# the (eb and &T0L 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 ob of e!plaining more. HTML
HTML stands for Hypertext Markup Language. HTML documents form the maority 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 e!plains the distinction well. Why Computers are Stupid
#omputers 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 Blok Elements
HTML elements are either inline or blok. $lock elements form an "invisible bo!" around the content inside of them.
Lesson 2 -reating a Structured !ocument 'ith &T0L !eveloper Tools "in the Browser#
HTML elements are either inline or blok. $lock elements form an "invisible bo!" around the content inside of them. The $tree%like struture$ o& HTML
The "tree%like structure" comes from the fact that HTML elements can have other elements inside of them. &ou can draw this relationship like a family tree. My mother had multiple children. o did her mother, and so on... (n a browser, this structure shows up as a series of nested bo!es. There are bo!es inside of bo!es inside of bo!es, and so on... The relationship between indented HTML and bo'es
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 "bo!" is. Te't Editors "&or programming#
When writing code, programmers use special te!t editors )like ublime Te!t for e!ample*. These editors make the programmer's life easier. +or e!ample, some te!t editors will automatically generate a closing HTML tag when you write an opening tag.
ECA0PLE 2 E- (his is an C(
read my own code. (he indentation of the te0t hardly changes and it isn&t clear that the concepts from lesson 3 actually "belong" to lesson 3.F Eh5FLesson 32 (he %asics of the eb and C(8QPP7Ie 8P75RP>8Im8P8P8R"F(his videoEIaF does a good =ob of e0plaining more. EIpF EpF EbFC(8QPP7Im8PQ5878"F(his videoEIaF gives a good overview. EIpF EpF EbF(ags and lementsEIbF EIpF EpF C(8QPP7Im 8PQ57888"F(his videoEIaF e0plains the distinction well. EIpF EpF EbFhy 4omputers are )tupidEIbF EIpF EpF 4omputers are stupid because they interpret instructions literally. (his makes them very unforgiving since a small mistake by a programmer can cause huge problems in a program. EIpF EpF
EbFnline vs %lock lementsEIbF EIpF EpF C(
>P mportant 4oncepts
Lesson 1 The asics o# the (eb and &T0L 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 ob of e!plaining more. HTML
HTML stands for Hypertext Markup Language. HTML documents form the maority 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 e!plains the distinction well. Why Computers are Stupid
#omputers 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 Blok Elements
HTML elements are either inline or blok. $lock elements form an "invisible bo!" around the content inside of them.
Lesson 2 -reating a Structured !ocument 'ith &T0L !eveloper Tools "in the Browser#
HTML elements are either inline or blok. $lock elements form an "invisible bo!" around the content inside of them. The $tree%like struture$ o& HTML
The "tree%like structure" comes from the fact that HTML elements can have other elements inside of them. &ou can draw this relationship like a family tree. My mother had multiple children. o did her mother, and so on... (n a browser, this structure shows up as a series of nested bo!es. There are bo!es inside of bo!es inside of bo!es, and so on... The relationship between indented HTML and bo'es
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 "bo!" is. Te't Editors "&or programming#
When writing code, programmers use special te!t editors )like ublime Te!t for e!ample*. These editors make the programmer's life easier. +or e!ample, some te!t editors will automatically generate a closing HTML tag when you write an opening tag.
0ractice 0racticing what you've learned helps you bridge the skills gap between what novices and e(perts are able to do. 9pply /hat *ou've 3earned
*ou should already have an 4T%3 file which contains your notes from lessons 1 and =. In this practice session you will add structure to your 4T%3 by using container elements ;EspanF's and EdivF's< to group related content together.
+ote 9dding this structure may not change the appearance of your page! &ut doing this work now will allow you to rapidly make changes to the appearance in the ne(t lesson. "eel free to consult the previous e(amples, but try to write your own code to add structure to your 4T%3 before continuing.
Share 5iscuss! Share your work and check out what your fellow students are doing(
3. 5.
Do to the discussion #orumby clicking here. Share the link to your web page in the post titled ")hare )tage 32 ork )ession 3 *#N1+". ou can !nd it under the "#N1 )tages 32 . hen you&re done, move on to the ne0t lesson and keep adding to your 'ork$
"ollow 9long with :essica 9t this point, there are a few things you need to do to follow along with :essica. This may take a few minutes, and there's a chance you may run into trouble. &e patient and persistent. If you get stuck, ask for help. 5ownload the cssdemo.@ip file by clicking the link in the Supporting %aterials below. To e(tract the files for
0acintosh "ind the file that was do wnloaded and, if necessary, un8ip it by double clicking on it. This should create a folder called cssdemo
(indo's "ind the file that was downloaded, right-click on the file and select >$(tract 9ll> to un8ip. This should create a folder called cssdemo
3.
f you haven&t already, do'nload a te6t editor.
5.
pen your te0t editor and select /ile F penZ /ind the cssdemofolder on your computer and select it by singleclicking. (he folder name should be highlighted. 7. #ressthe pen button. ou should see a gray bar on the left. 8. 1ouble click on app.html and style.css in the gray bar on the left *this might look a little di'erent depending on your editor+. >. Use 6oogle 4hrome *a web browser+ to open app.html. f you don&t have 6oogle 4hrome, please download it here If you have any trouble, ask for help. ?etting 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 uick video that illustrates how you can open the files in a te(t editor and your browser here
7ui8 9dding Style
ote )tudents are not yet e0pected to replace the "mage" te0t in the screenshot div with an actual image element. ote (he "te0t" placeholder in the description div can be replaced with the following2
n ac ipsum $uis turpis adipiscing commodo. EemF
ou can also think about 4)) as a search and replace tool2 you identify a class or a tag of the element you want to !nd *or match, in 4)) terminology+, and then what you want to do with it, or what property values to replace with di'erent ones. rder
t also matters where you de!ne the rules and in what order they are applied. )tyles can be de!ned in di'erent places and are applied in the following order, with de!nitions further down the list overwriting previous de!nitions2 •
• •
•
the default style of a browser *di'erent browsers have slightly di'erent styles+ stylesheet in a separate !le *this is what you will be mostly using+ stylesheet inside C(
"4ascading" means that rules are applied not only to the elements they directly match, but also to all of those elements& child elements. Cowever, if a child element has multiple, overlapping rules de!ned for it, the more speci!c rule takes e'ect. 7ui8 Styling p
&o' -SS Selectors (ork 0! -SS +e#erence
%rowsers use default stylesheets to determine how to display C(
(ebit 7-hrome and Sa#ari8 ,ire#o6 )nternet E6plorer
%ecause these rules di'er sometimes between browsers, there are e'orts to promote consistency in styles across browsers. ne popular solution to this issue is using what is referred to as a 4)) reset such as normaliBe.css. ou can !nd the documentation page on fonts here.
SS Summary and #eference
There was a lot of information in the previous video and you don't need to remember it all. This is a te(t summary. 7uickly skim through it ;)ust look at the headings so you know what's here< and come back when you need to. /hat is SS6
SS is code written to control the >style> of 4T%3 elements. 4ow does SS >control> 4T%36
If you want to write SS that makes all h3 elements have a black background and white te(t, you would write h3 backgroundcolor 2 blackV color2 whiteV W
In this e(ample, the h3 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.> 9fter the h3 there is a left curly brace and at the bottom there is a matching right curly brace W. $verything between these curly braces will be interpreted as a >rule> that should be applied to every h3 element. The line of code that says backgroundcolor 2 blackV is a declaration. backgroundcolor is a property and black is the *alue of that property. SS @ocabulary
-SS ascading Style Sheets. Style This word can refer to many things and so it can be confusing. It can refer to •
•
(he C(
•
•
(he general look of a web page. /or e0ample2 "I like that site's style." A verb. /or e0ample2 "I'% %aking progress on %y page( he structure is all done but now I ha#e to style it("
+ule a line of SS code describing the value that a certain attribute should take. Property The property you want to change. alue 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 4T%3.
-lass 9 class refers to a group of elements that can be styled together. lass names should not contain periods or any other punctuation marks such as classG>1.1>
)! I5's are uniue identifiers that uniuely identifies an element in 4T%3. Selecting by class
In the e(ample above, we set the background-color of e#ery h3 to black. If we only want to add style to certain h3s, we can use class selectors. Try copying the following code into scratchpad.io to see how this works. Ediv classH"stop"FEIdivF Ediv classH"slow"FEIdivF Ediv classH"go"FEIdivF EstyleF div height 2 >p0V width 2 >p0V borderradius2 5>p0V W .stop backgroundcolor2 redV W .slow backgroundcolor2 yellowV W .go backgroundcolor2 greenV W EIstyleF
/e should see a traffic light. +ote how in the EstyleF element we refer to an 4T%3 element's class name by writing .classname 9lso note how we can apply rules to all divs or )ust certain divs by using the appropriate selector. 4ow do I include SS Styling in my web page6
There are three ways you can do this.
0ethod 1 'rite -SS in the ;head< o# your &T0L This method is good for very small pro)ects ;like what you'd do in scratchpad.io<. To do this
3. 5. 7.
At the top of your C(
0ethod 2 Link your &T0L to a separate -SS =le This adds another step, but it lets you stay more organi8ed when working on larger pro)ects. To do this
3. 5. 7. 8.
rite all of your structural C(. Add the following attributes to your ElinkF2 • •
relH"stylesheet" hrefH"main.css"
"or e(ample, you would have a main.html file that looked like this EheadF Elink relH"stylesheet" hrefH"main.css"F EIheadF EbodyF EdivF
(his will have a red background. EIdivF EIbodyF
and in the sa%e folder you would have a file called main.css like this div backgroundcolor 2 redV W
0ethod 3 (rite your style inline 'ith your &T0L This is generally a very bad idea because it leads to lots of repeated code. &ut 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 uestion and answers in this con*ersationon Stack 2verflow ;Stack 2verflow is the most widely used programming 79 community out there<. /ith this method, you modify the style attributes of every individual 4T%3 element. "or e(ample EbodyF Edi* styleH"backgroundcolor2 redV color2 white"F (his di* will have a red backgroundand white te6t. EIdi*F Edi* styleH"backgroundcolor2 redV color2 white"F )o will this one. EIdi*F Edi* styleH"backgroundcolor2 redV color2 white"F Now, what i# change my mind? EIdi*F Edi* styleH"backgroundcolor2 redV color2 white"F &d rather have a black background... EIdi*F Edi* styleH"backgroundcolor2 redV color2 white"F Never do thisEIdi*F EIbodyF
>TE 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. "or e(ample, when I was writing the code for method = I had main.html and main.css in different folders on my computer, and it didn't work at all.
C(
E- (his is an C(PR>R53Ie 8P75RP>8Im8P8P8R"F(his videoEIaF does a good =ob of e0plaining more. EIpF EIdivF E- And this is where concept 3 ends. Note how the indentation level now matches up with where lesson 3 began.F E- Now concept 5 begins... F EdivF EpF EbFC(PR>R53Im8PQ5878"F(his videoEIaF
gives a good overview. EIpF EIdivF EdivF EpF EbF(ags and lementsEIbF EIpF EpF C(PR>R53Im 8PQ57888"F(his videoEIaF e0plains the distinction well. EIpF EIdivF EdivF EpF EbFhy 4omputers are )tupidEIbF EIpF EpF 4omputers are stupid because they interpret instructions literally. (his makes them very unforgiving since a small mistake by a programmer can cause huge problems in a program. EIpF EIdivF EdivF EpF EbFnline vs %lock lementsEIbF EIpF EpF C(
EIpF EpF C(
EIdivF EIbodyF
I# Lesson 2 -reating a Structured !ocument 'ith &T0L !eveloper Tools "in the Browser#
HTML elements are either inline or blok. $lock elements form an "invisible bo!" around the content inside of them. The $tree%like struture$ o& HTML
The "tree%like structure" comes from the fact that HTML elements can have other elements inside of them. &ou can draw this relationship like a family tree. My mother had multiple children. o did her mother, and so on... (n a browser, this structure shows up as a series of nested bo!es. There are bo!es inside of bo!es inside of bo!es, and so on... The relationship between indented HTML and bo'es
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 "bo!" is. Te't Editors "&or programming#
When writing code, programmers use special te!t editors )like ublime Te!t for e!ample*. These editors make the programmer's life easier. +or e!ample, some te!t editors will automatically generate a closing HTML tag when you write an opening tag
N C(
Ediv classH"lesson"F Eh5FLesson 32 (he %asics of the eb and C(PR>R53Ie8P75RP>8Im8P8P8R"F(his videoEIaF does a good =ob of e0plaining more. EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F C(
C(PR>R53Im8PQ5878"F(his videoEIaF gives a good overview. EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F (ags and lements EIdivF Ediv classH"conceptdescription"F EpF C(PR>R53Im8PQ57888"F(his videoEIaF e0plains the distinction well. EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F hy 4omputers are )tupid EIdivF Ediv classH"conceptdescription"F EpF 4omputers stupid (his because they interpret instructionsare literally. makes them very unforgiving since a small mistake by a programmer can cause huge problems in a program.
EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F nline vs %lock lements EIdivF Ediv classH"conceptdescription"F EpF C(
EIpF EpF n a browser, this structure shows up as a series of nested bo0es. (here are bo0es inside of bo0es inside of bo0es, and so on... EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F (he relationship between indented C(
4))
IT (his code gives the only Eh3F on the page a white ([( color TI h3 W color2 whiteV IT (his code makes the EbodyF have a black %A4M69UN1 color. (his rule would apply to all the elements inside of the EbodyF unless... TI body backgroundcolor2 blackV W IT ...this code gives everything inside of the elements with classH"lesson" a gray background color. Unless, of course... TI .lesson backgroundcolor2 grayV W IT ...an element inside has a classH"concept" TI .concept backgroundcolor2 whiteV W IT (his code sets the font si@e to 5 pi0els, makes it bold, and centers it.TI .concepttitle fontsi@e2 5p0V fontweight2 boldV te0talign2 centerV W IT )ince had removed all the EemF tags from the C(
fontstyle2 italicV W IT ... did something similar with the EbF tagsTI .bold fontweight2 boldV W
>( T&E +ES%LT Important Conepts Lesson () The Basis o& 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 ob of e!plaining more.
HTML HTML stands for Hypertext Markup Language. HTML documents form the maority 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 e!plains the distinction well.
Why Computers are Stupid #omputers 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 Blok Elements HTML elements are either inline or blok. $lock elements form an "invisible bo!" around the content inside of them.
Lesson *) Creating a Strutured !oument with HTML !eveloper Tools "in the Browser# HTML elements are either inline or blok. $lock elements form an "invisible bo!" around the content inside of them.
The $tree%like struture$ o& HTML The "tree%like structure" comes from the fact that HTML elements can have other elements inside of them. &ou can draw this relationship like a family tree. My mother had multiple children. o did her mother, and so on... (n a browser, this structure shows up as a series of nested bo!es. There are bo!es inside of bo!es inside of bo!es, and so on...
The relationship between indented HTML and bo'es 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 "bo!" is.
Te't Editors "&or programming# When writing code, programmers use special te!t editors )like ublime Te!t for e!ample*. These editors make the programmer's life easier. +or e!ample, some te!t
editors will automatically generate a closing HTML tag when you write an opening tag
C(PR>R53Ie8P75RP>8Im8P8P8R"F(his videoEIaF does a good =ob of e0plaining more. EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F C(
EpF C(PR>R53Im8PQ5878"F(his videoEIaF gives a good overview. EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F (ags and lements EIdivF Ediv classH"conceptdescription"F EpF C(PR>R53Im8PQ57888"F(his videoEIaF e0plains the distinction well. EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F hy 4omputers are )tupid EIdivF Ediv classH"conceptdescription"F EpF 4omputers are stupid because they interpret instructions literally. (his makes them very unforgiving since a small mistake by a
programmer can cause huge problems in a program. EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F nline vs %lock lements EIdivF Ediv classH"conceptdescription"F EpF C(
had multiple children. )o did her mother, and so on... EIpF EpF n a browser, this structure shows up as a series of nested bo0es. (here are bo0es inside of bo0es inside of bo0es, and so on... EIpF EIdivF EIdivF Ediv classH"concept"F Ediv classH"concepttitle"F (he relationship between indented C(
4)) IT (his te0t color is speci!ed in what&s called "he0". ou will learn more about this later. TI h3 te0talign2 centerV color2 O5R8PV W IT change to a nicer font TI body fontfamily2 CelveticaV W IT the borderradius attribute makes the corners rounded and the margin clears out space for the stu' inside the lesson divs. (ry seeing what happens when you comment out the rule that says padding2 3p0V by changing it to IT padding2 3p0V TI .lesson backgroundcolor2 O5R8PV borderradius2 5p0V color2 whiteV padding2 3p0V W IT margins push other elements away TI h5 margin2 3p0V W .concept backgroundcolor2 O1/A/3V padding2 8p0V margin2 3p0V
borderradius2 8p0V color2 blackV W .concepttitle fontsi@e2 5p0V margin2 Pp0V te0talign2 centerV color2 O5R8PV W .conceptdescription fontweight2 lighterV margin2 p0V W .italic fontstyle2 italicV W .bold fontweight2 boldV W
I#
I mpor t an t Conce pt s Lesson 1:Th e B asi csoft he W eb and HTM L Howt heWebWor k s Thewebi s a un bch f ocom pu t er s ha tt com mun i cat e w i t h e ach ot he r . Whe n a pe r so n g oes ot aweb p ag e i ke l w w w. go og l e. com ,t he i r com pu t ersen ds ue s to server aHTTPReq ta .
The se r ver find s he t ap pr op r i at e H TML d ocum en t andsen ds ti backo t h t e br ser use r ' s com pu t erwher eweb a ow n i t er pr et s h t e page and di sp l aysi t on t he use r ' s c se r en T. hi s vi deod oes agood o j b of exp l ai ni ng mor e.
HTML H yper t ext Mar kupan L gu ag e. HTML st an ds or f HTML docum ent s or fm t he maj or i t y o ft he co nt ent on t he web.
HTML do cum ent s c ont ai t n e xtco nt entw hi chdescr i bes w "hat you se e" mar k upw and hi chdesc r i bes h " ow i tl oo T ks hi s " . i v deogi ves g a ood o ver vi ew .
Tags and El em ent s el em t s. When wr HTM L do c um en t s ar e m ade ofHTM Len i t i ng HTML, we t el l tags br ow ser s he t t ype ofea ch l em e en t by si u ng HT . ML Thi s i v deoex pl ai ns t he di s t i nc t i on wel l .
Why om C pu t er s ar e S t up i d Comput er s a r e st upi d beca uset hey n i t er pr et i nst r uct i ons i t l er al l y.Thi s m ake s t he m ver y un f or gi vi ng si ncea sm al lmi st ake by a pr og r am mer can cau sehu ge pr ob l em s n i a pr og r am .
I nl i ne vs l o B ck l e E ment s i nr l i neorbl ock HTML el em en t s ar e ei t he . Bl ockel ement sf or m an " i nvi si bl e box" ou ar nd t he co nt ent i nsi de of t hem.
Les so n 2:Cr ea t i ng a S t r uct ur edDocu men t wi t h HTML Deve l oper To ol s i ( nt he Br owse r )
i nr l i neorbl ock HTML el em en t s ar e ei t he . Bl ockel ement sf or m an " i nvi si bl e box" ou ar nd t he co nt ent i nsi de of t hem.
The " t r eel i kest r uct ur e" of HTML The " t r eel i kest r uct ur e" co mes r f om t he f actt hat HTML el ement s ca n have ot her el ement si nsi de of t hem. You ca n dr aw t hi sr el at i onsh i pl i kea f ami l yt r ee. My m ot her had mul t i pl e ch i l dr en. So di d her mot her , and soon. . . I n a br owse r ,t hi s st r uct ur e sh ows u p as ase r i es o f nest ed boxe s.Ther e ar e boxe s n i si de of boxe s n i si de of boxe s o,a o n n d . . .s
Ther el at i on shi p b ew teeni nd en t edHTML a nd b oxes Whenou y ead r naH TM L doc um ent text as , you see a wave ofcha ng i ng i ndent at i ons g oi ng up and down t he l ef t si de of ment t he .d T o he cu mor e i ndent ed an el ement i s,t he mor e deepl y n est ed i t s co r r esp ondi ng " box "i s.
Te xtEdi t or s f ( or pr ogr ammi ng) When wr i t i ng co de, pr ogr ammer s u sesp eci al t extedi t or s l ( i keSubl i me Te xtf or exa mpl e) . Theseedi t or s m aket he pr ogr ammer ' s i f l e easi er . For exa mpl e, so me t ex t edi t or s w i l l aut omat i ca l l y g ener at e a cl osi ng HTML t ag when yo u wr i t e an openi ng t ag.
Take a &reak! *ou've already covered the most conceptually important parts of this lesson. The rest will give you impressive new ways to use SS and 4T%3, 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. ?ive your brain some time to digest what you've learned about 4T%3 and SS and how 4T%3 classes combined with SS styling can help you avoid repetition ;and make really cool web pages<.
Learn More Throughout your +anodegree program, you'll have the chance to go deeper into concepts through previously recorded events where students have asked uestions 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 )ust clarification of program details and discussion of how students are feeling about their e(perience. oding Style
In this recorded session, Luke and Mark share best practices in coding style( ideo Transcript Keep an eye out for more Learn 0ore opportunities in your +anodegree course material and access all recorded sessions from this list anytime.
7ui8 sing Semantic Tags
0ore on Semantic Elements 4ontent )ectioning
httpsde*eloper.moBilla.orgen? %Sdocs(eb&T0LElementF-ontentGsectioning )ections and utlines of an C( 1ocument (he C( utline Algorithm
httpsde*eloper.moBilla.orgen? %Sdocs(ebDuide&T0LSectionsGandG>utlinesGo#GanG&T0LGdocume ntFTheG&T0LG>utlineGAlgorithm 1efault )tyle 9ules
%rowsers use default stylesheets to determine how to display C(
(ebit 7-hrome and Sa#ari8
,ire#o6 )nternet E6plorer
• •
%ecause these rules di'er sometimes between browsers, there are e'orts to promote consistency in styles across browsers. ne popular solution to this issue is using what is referred to as a 4)) reset such as normaliBe.css.
7ui8 The &o( #evisited eb #ages 1emonstrated in this Gideo
3. 5. 7.
o6 0odel page *bo0model.html+. n video2 27253. Style 1 page *style3.html+. n video2 827723. 0y ,a*orite App *mock3favapp.pdf+. n video 25 23>. 4)) to Use for Dui@
n your style.css you should set the screenshot class to ma0width of 8p0, and the description to Q>p0. (he other things to set in your style.css !le are the bo0 si@ing de!nitions and the outline that allows you to easily see all the bo0es on your page. #ut the following in your style.css !le2 T outline2 3p0 solid red -importantV W
T webkitbo0si@ing2 borderbo0V mo@bo0si@ing2 borderbo0V msbo0si@ing2 borderbo0V bo0si@ing2 borderbo0V W
0ositioning &o(es
(he mockup Kessica references can be found here2 mock1?#a*?app.pd# A great guide to Xe0bo0 can be found hereAt 325 in the video, Kessica uses 1ev (ools to add the 4)) rule display2 Xe0 to element.style, which applies the 4)) to the selected div element temporarily. )tudents following along with the videos should create an .app class in their style.css as follows2 .app display2 Xe0V W
(his rule asis works with 4hrome 5R\, 33\, and
&o( Si8ing and 0ositioning Summary *ou can find more resources in the e6ample 'ebpage )"*e made. &o( Si8ing
There are four main points that :essica addressed about bo( si8ing.
3. 5. 7.
C(
3. 5.
)et si@es in terms of percentages rather than pi0els. )et the bo0si@ing attribute to borderbo0 for every
element. 8.
1i'erent browsers work slightly di'erently. )ometimes this causes di'erent browsers to display the same code di'erently. &o( 0ositioning
3.
1ivsare block elements *as opposed to inline+, so by default they take up the entire width of a page. 5. Adding the rule display2 Xe0V to the appropriate 4)) will override this behavior and let divs appear ne0t to each other.
All of these things e0cept for borders still need improving to look e0actly like the design mock. #ress "Ne0t" to learn about the powerful routine you can use when continuing to improve the page. )E( )T+>%A4M ( DU]
Dui@2 Adding mage ou can download the sample image here and the mockup #1/ here. *f the image opens in a new web page or tab you can right\click or option\click the image to save it.+ hen saving be sure to save the !le in the images directory you created in your toplist pro=ect directory. ou can also use your own image if you wish. Adding an alt attribute is as simple as changing your code to2 Eimg srcH"imgIapp.png" altH"(his is a screenshot"F
n the previous video, Kessica added the 4)) rule display2 Xe0 to element.style, which adds the 4)) directly to the divelement on the lefthand side of the development tools. n this and future videos, this 4)) rule is in the main 4)) !le, style.css2 .app display2 Xe0V W
(his rule asis works with 4hrome 5R\, 33\, and
7ui8 omparing /ith The 5esign
ote (he color bo0es and codes on the left of the mockup are for color reference only. (hey should not appear in your web page.
ou can download the mockup here, if you haven&t done so earlier.
