webdevelopment and designing

8/19/2019 Webdevelopment and Designing

1/43

Webdevelopment and designing:

(*).Its better to use css in styling the website and it will be more better to use

classes in css.

Waypoint: Specify How Fonts Should Degrade:

There are several default fonts that are available in all browsers. These include

Monospace, Serif and SansSerif. !eave !obster as the fontfamily for your h"

elements. Ma#e them $degrade$ to Monospace when !obster isn%t available.

&or e'ample, if you wanted an element to use the elvetica font, but also degrade

to the SansSerif font when elvetica wasn%t available, you could use this SS stylep + fontfamily elvetica, SansSerif -.

ow comment out your call to /oogle &onts, so that the !obster font isn%t available.

otice how it degrades to the Monospace font.

HTML !SS0aypoint Si1e your Images

CSS has a property called width that controls an element's width. Just like with fonts, we'll use p'

(pixels) to specify the image's width.

For example, if we wanted to create a CSS class called largerimage that gae !"#$ elements a

width of %&& pixels, we'd use 2style3 .largerimage + width 455p' - 26style3.

Create a class called smallerimage and use it to resie the image so that it's only && pixels wide.


2/43

0aypoint 7dd 8orders 7round your 9lements

CSS *orders hae properties likestyle, color and width.

For example, if we wanted to create a red, % pixel *order around an !"#$ element, we could use

this class2style3 .thinredborder + bordercolor red borderwidth 4p' borderstyle solid -

26style3.

Create a class called thic#greenborder that puts a &+pixel+wide green *order with a style of

solidaround an !"#$ element, and apply that class to your cat photo.

emem*er that you can apply multiple classes to an element *y separating each class with a space

within its class attri*ute. For example 2img class:$class; class"$3

0aypoint 7dd


3/43

aypoint #ake Circular 1mages with a 2order adius

1n addition to pixels, you can also specify a borderradius using a percentage.

0ie your cat photo a borderradius of 45=.

aypoint $ink to 3xternal 4ages with /nchor 3lements

a elements, also known as anchorelements, are used to link to content outside of the current page.

!ere's a diagram of an a element. 1n this case, the a element is used in the middle of a paragraph

element, which means the link will appear in the middle of a sentence.


4/43

!ere's an example 2p3ere%s a 2a href:$http66freecodecamp.com$3 lin# to &ree ode

amp26a3 for you to follow.26p3.

Create an a element that links tohttp66freecatphotoapp.com and has 5cat photos5 as its anchor

te't.

aypoint 6est an /nchor 3lement within a 4aragraph

/gain, here's a diagram of an aelement for your reference


5/43

!ere's an example 2p3ere%s a 2a href:$http66freecodecamp.com$3 lin# to &ree ode

amp26a3 for you to follow.26p3.

esting 7ust means putting one element inside of another element.

6ow nest your existing a element within a new p element so that the surrounding paragraph says

58iew more cat photos5, *ut where only 5cat photos5 is a link, and the rest of the text is plain text.

aypoint #ake 9ead $inks using the !ash Sym*ol


6/43

Sometimes you want to add a elements to your we*site *efore you know where they will link.

"his is also handy when you're changing the *ehaior of a link using >?uery, which we'll learn a*out

later.

eplace your a element's href attri*ute with a @, also known as a hash sym*ol, to turn it into a deadlink.

aypoint "urn an 1mage into a $ink

-ou can make elements into links *y nesting them within an a element.

6est your image within an a element. !ere's an example 2a href:$@$32img src:$http66bit.ly6fcc

runningcats$6326a3.

emem*er to use @ as your a element'shref property in order to turn it into a dead link.

:nce you'e done this, hoer oer your image with your cursor. -our cursor's normal pointer should

*ecome the link clicking pointer. "he photo is now a link.

aypoint /dd /lt "ext to an 1mage for /ccessi*ility

alt attri*utes, also known as alt te't, are what *rowsers will display if they fail to load the image. alt

attri*utes are also important for *lind or isually impaired users to understand what an image

portrays. /nd search engines also look at alt attri*utes.

1n short, eery image should hae an altattri*ute;

-ou can add an alt attri*ute right in the img element like this 2img src:$www.yourimage

source.com6yourimage.>pg$ alt:$your alt te't$3.

/dd an alt attri*ute with the text 7 cute orange cat lying on its bac# to our cat photo.


7/43

aypoint Create a 2ulleted


8/43

26ol3

would create a num*ered list of 5hydrogen5 and 5helium5.

Create an ordered list of the top = things cats hate the most.

0aypoint reate a Te't &ield6ow let's create a we* form.

"ext inputs are a conenient way to get input from your user.

-ou can create one like this 2input type:$te't$3. 6ote that input elements are self+closing.

Create an input element of type te't*elow your lists.

aypoint /dd 4laceholder "ext to a "ext Field

-our placeholder text is what appears in your text input *efore your user has inputed anything.

-ou can create placeholder text like so2input type:$te't$ placeholder:$this is placeholder

te't$3.

Set the placeholder alue of your textinput to 5cat photo


9/43

aypoint Create a Form 3lement

-ou can *uild we* forms that actually su*mit data to a serer using nothing more than pure !"#$.

-ou can do this *y specifying an action on your formelement.

For example 2form action:$6urlwhereyouwanttosubmitformdata$326form3.

6est your text field in a form element. /dd the action:$6submitcatphoto$attri*ute to this form

element.

aypoint /dd a Su*mit 2utton to a Form

$et's add a submit *utton to your form. Clicking this *utton will send the data from your form to the


10/43

-ou can use radio buttons for >uestions where you want the user to only gie you one answer.

adio *uttons are a type of input.

3ach of your radio *uttons should *e nested within its own label element.

/ll related radio *uttons should hae the same name attri*ute.

!ere's an example of a radio *utton2label32input type:$radio$ name:$indooroutdoor$3

Indoor26label3.

/dd to your form a pair of radio *uttons. 3ach radio *utton should *e nested within its own label

element. "hey should share a common nameattri*ute. :ne should hae the option of indoor and the

other should hae the option of outdoor.

aypoint Create a Set of Check*oxes

Forms commonly use chec#bo'es for >uestions that may hae more than one answer.

Check*oxes are a type of input.

3ach of your check*oxes should *e nested within its own label element.

/ll related check*ox inputs should hae the same name attri*ute.

!ere's an example of a check*ox2label32input type:$chec#bo'$ name:$personality$3

!oving26label3.

/dd to your form a set of three check*oxes. 3ach check*ox should *e nested within its own

labelelement. /ll three should share thename attri*ute of personality.

aypoint Check adio 2uttons and Check*oxes *y

9efault

-ou can set a check*ox or radio *utton to *e checked *y default using thechec#ed attri*ute.


11/43

"o do this, 7ust add the word 5checked5 to the inside of an input element. For example, 2input

type:$radio$ name:$testname$ chec#ed3.

Set the first of your radio buttons and the first of your chec#bo'es to *oth *e checked *y default.

aypoint 6est #any 3lements within a Single 9i

3lement

"he div element, also known as a diision element, is a general purpose container for other

elements.

"he div element is pro*a*ly the most commonly used !"#$ element of all. 1t's useful for passing the

CSS of its own class declarations down to all the elements that it contains.

Just like any other non+self+closing element, you can open a div element with 2div3 and close it on

another line with 26div3.

"ry putting your opening div tag a*oe your 5"hings cats loe5 pelement and your closing div tag

after your closing ol tag so that *oth of your lists are within one div.

6est your 5"hings cats loe5 and 5"hings cats hate5 lists all within a single div element.

aypoint 0ie a 2ackground Color to a 9i 3lement

-ou can set an element's *ackground color with the bac#groundcolorproperty.

For example, if you wanted an element's *ackground color to *e green, you'd use.green

bac#ground + bac#groundcolor green - within your styleelement.

Create a class called graybac#groundwith the bac#groundcolor of gray. /ssign this class to your

div element.


12/43

aypoint Set the 19 of an 3lement

1n addition to classes, each !"#$ element can also hae an id attri*ute.

"here are seeral *enefits to using idattri*utes, and you'll learn more a*out them once you start

using 7?uery.

id attri*utes should *e uni>ue. 2rowsers won't enforce this, *ut it is a widely agreed upon *est

practice. So please don't gie more than one element the same id attri*ute.

!ere's an example of how you gie your h" element the id of catphotoapp 2h" id:$catphoto

app$3

0ie your form element the id catphotoform.

0aypoint Cse an ID 7ttribute to Style an 9lement

:ne cool thing a*out id attri*utes is that, like classes, you can style them using CSS.

!ere's an example of how you can take your element with the idattri*ute of catphotoelement and

gie it the *ackground color of green. 1n your style element @catphotoelement + bac#ground

color green -

6ote that inside your style element, you always reference classes *y putting a . in front of theirnames. -ou always reference ids *y putting a@ in front of their names.

"ry giing your form, which now has the id attri*ute of catphotoform, a green *ackground.

aypoint /d7usting the 4adding of an 3lement

-ou may hae already noticed this, *ut all !"#$ elements are essentially little rectangles.

"hree important properties control the space that surrounds each !"#$ element padding, margin,

and border.

/n element's padding controls the amount of space *etween the element and its border.

!ere, we can see that the green *ox and the red *ox are nested within the yellow *ox. 6ote that the

red *ox has morepadding than the green *ox.


13/43

hen you increase the green *ox'spadding, it will increase the distance *etween the text padding

and the *order around it.

Change the padding of your green *ox to match that of your red *ox.

aypoint /d7ust the #argin of an 3lement

/n element's margin controls the amount of space *etween an element'sborder and surrounding

elements.

!ere, we can see that the green *ox and the red *ox are nested within the yellow *ox. 6ote that the

red *ox has moremargin than the green *ox, making it appear smaller.

hen you increase the green *ox'smargin, it will increase the distance *etween its *order and

surrounding elements.

Change the margin of the green *ox to match that of the red *ox.

aypoint /dd a 6egatie #argin to an 3lement

/n element's margin controls the amount of space *etween an element'sborder and surrounding

elements.

1f you set an element's margin to a negatie alue, the element will grow larger.

"ry to set the margin to a negatie alue like the one for the red *ox.

Change the margin of the green *ox to;4p', so it fills the entire horiontal width of the yellow *ox

around it.

aypoint /dd 9ifferent 4adding to 3ach Side of an

3lement

Sometimes you will want to customie an element so that it has differentpadding on each of its

sides.


14/43

CSS allows you to control the padding of an element on all four sides withpaddingtop, padding

right, paddingbottom, and paddingleft properties.

0ie the green *ox a padding of E5p' on its top and left side, *ut only "5p' on its *ottom and right

side.

aypoint /dd 9ifferent #argins to 3ach Side of an

3lement

0ie the green *ox a margin of E5p' on its top and left side, *ut only "5p' on its *ottom and right

side.

Sometimes you will want to customie an element so that it has a differentmargin on each of its

sides.

CSS allows you to control the margin of an element on all four sides withmargintop, marginright,

marginbottom, and marginleft properties.

aypoint


15/43

$et's try this again, *ut with marginthis time.

1nstead of specifying an element'smargintop, marginright, marginbottom, and marginleft

properties, you can specify them all in one line, like this margin ;5p' "5p' ;5p' "5p'.

"hese four alues work like a clock top, right, *ottom, left, and will produce the exact same result asusing the side+specific margin instructions.


16/43

aypoint :erride Styles in Su*se>uent CSS

:ur 5pink+text5 class oerrode our body element's CSS declaration;

e 7ust proed that our classes will oerride the body element's CSS. So the next logical >uestion

is, what can we do to oerride our pin#te'tclass@

Create an additional CSS class calledbluete't that gies an element the color *lue. #ake sure it's

*elow your pin#te't class declaration.

/pply the bluete't class to your h;element in addition to your pin#te't class, and let's see which

one wins.

/pplying multiple class attri*utes to a !"#$ element is done with a space *etween them likethisclass:$class; class"$

aypoint :erride Class 9eclarations *y Styling 19

/ttri*utes

e 7ust proed that *rowsers read CSS from top to *ottom. "hat means that, in the eent of a

conflict, the *rowser will use whicheer CSS declaration came last.

2ut we're not done yet. "here are other ways that you can oerride CSS. 9o you remem*er id

attri*utes@

$et's oerride your pin#te't andbluete't classes, and make your h;element orange, *y giing the

h;element an id and then styling that id.

0ie your h; element the id attri*ute of orangete't. emem*er, id styles look like this 2h;

id:$orangete't$3

$eae the bluete't and pin#te'tclasses on your h; element.

Create a CSS declaration for your orangete't id in your styleelement. !ere's an example of what

this looks like @brownte't + color brown -


17/43

aypoint :erride Class 9eclarations with 1nline Styles

So we'e proen that id declarations oerride class declarations, regardless of where they are

declared in your style element CSS.

"here are other ways that you can oerride CSS. 9o you remem*er inline styles@

uent class declarations, id declarations, and in+line styles.

$et's add the keyword Fimportant to your pink+text element's color declaration to make &&A sure

that your h; element will *e pink.

/n example of how to do this iscolor red Fimportant

aypoint


18/43

9id you know there are other ways to represent colors in CSS@ :ne of these ways is called

hexadecimal code, or he' code for short.

Decimal means the num*ers ero through nine + the num*ers that people use in eeryday

life.e'adecimal includes these & num*ers, plus the letters /, 2, C, 9, 3 and F. "his means that

!exidecimal has a total of B possi*le alues, instead of the & possi*le alues that our normal

*ase+& num*er system gies us.

ith CSS, we use B hexadecimal num*ers to represent colors. For example, @555555 is the lowest

possi*le alue, and it represents the color *lack.

eplace the word blac# in our bodyelement's *ackground+color with itshe' code representation,

@555555.

aypoint


19/43

aypoint


20/43

aypoint


21/43

1f you do the math, B times B is D%B total alues. So rgb, which starts counting from ero, has the

exact same num*er of possi*le alues as hex code.

$et's replace the hex code in our bodyelement's *ackground color with the 02 alue for *lack

rgb(5, 5, 5)

aypoint


22/43

aypoint


23/43

-ou can add 2ootstrap to any app 7ust *y including it with 2lin# rel:$stylesheet$

href:$66ma'cdn.bootstrapcdn.com6bootstrap6..;6css6bootstrap.min.css$63 at the top of your

!"#$. 2ut we'e added it for you to this page *ehind the scenes.

"o get started, we should nest all of our !"#$ in a div element with the class containerJuid.

aypoint #ake 1mages #o*ile esponsie

First, add a new image *elow the existing one. Set it's src attri*ute tohttp66bit.ly6fccrunningcats.

1t would *e great if this image could *e exactly the width of our phone's screen.

Fortunately, with 2ootstrap, all we need to do is add the imgresponsive class to your image. 9o

this, and the image should perfectly fit the width of your page.

aypoint Center "ext with 2ootstrap

6ow that we're using 2ootstrap, we can center our heading element to make it look *etter. /ll we

need to do is add the class te'tcenter to our h" element.

emem*er that you can add seeral classes to the same element *y separating each of them with a

space, like this 2h" class:$redte't te'tcenter$3your te't26h"3.

aypoint Create a 2ootstrap 2utton

2ootstrap has its own styles for buttonelements, which look much *etter than the plain !"#$ ones.

Create a new button element *elow your large kitten photo. 0ie it the classbtn and the text of

5$ike5.

aypoint Create a 2lock 3lement 2ootstrap 2utton

6ormally, your button elements are only as wide as the text that they contain. 2y making them *lock

elements, your *utton will stretch to fill your page's entire horiontal space.


24/43

"his image illustrates the difference *etween inline elements and bloc#level elements

6ote that these *uttons still need thebtn class.

/dd 2ootstrap's btnbloc# class to your 2ootstrap *utton.

aypoint "aste the 2ootstrap 2utton Color ain*ow

"he btnprimary class is the main color you'll use in your app. 1t is useful for highlighting actions you

want your user to take.

/dd 2ootstrap's btnprimary class to your *utton.

6ote that this *utton will still need thebtn and btnbloc# classes.

0aypoint all out Kptional 7ctions with 8utton Info

2ootstrap comes with seeral pre+defined colors for *uttons. "he btninfo class is used to call

attention to optional actions that the user can take.

Create a new *lock+leel 2ootstrap *utton *elow your 5$ike5 *utton with the text 51nfo5, and add

2ootstrap's btninfo and btnbloc# classes to it.

6ote that these *uttons still need thebtn and btnbloc# classes.

0aypoint 0arn your Csers of a Dangerous 7ction


25/43

2ootstrap comes with seeral pre+defined colors for *uttons. "he btndanger class is the *utton

color you'll use to notify users that the *utton performs a destructie action, such as deleting a cat

photo.

Create a *utton with the text 59elete5 and gie it the class btndanger.

6ote that these *uttons still need thebtn and btnbloc# classes.

aypoint


26/43

1n the Cat 4hoto /pp that we're *uilding, we'll use col's*, where 'smeans extra small (like an

extra+small mo*ile phone screen), and * is the num*er of columns specifying how many columns

wide the element should *e.

4ut the !i#e, Info and Delete*uttons side+*y+side *y nesting all three of them within one 2div

class:$row$3 element, then each of them within a 2div class:$col'sE$3 element.

"he row class is applied to a div, and the *uttons themseles can *e nested within it.

aypoint 9itch Custom CSS for 2ootstrap

e can clean up our code and make our Cat 4hoto /pp look more conentional *y using 2ootstrap's

*uilt+in styles instead of the custom styles we created earlier.

9on't worry + there will *e plenty of time to customie our CSS later.

9elete the .redte't, p, and.smallerimage CSS declarations from your style element so that the

only declarations left in your styleelement are h" and thic#greenborder.

"hen delete the p element that contains a dead link. "hen remoe the redte't class from your

h"element and replace it with the te'tprimary 2ootstrap class.

Finally, remoe the 5smaller+image5 class from your first img element and replace it with the img

responsiveclass.

0aypoint Cse Spans for Inline 9lements

-ou can use spans to create inline elements. emem*er when we used the btnbloc# class to makethe *utton fill the entire row@

"his image illustrates the difference *etween inline elements and bloc#level elements


27/43

2y using the span element, you can put seeral elements together, and een style different parts of

the same element differently.

6est the word 5loe5 in your 5"hings cats loe5 element *elow within aspan element. "hen gie that

span the class te'tdanger to make the text red.

!ere's how you would do this with the 5"op = things cats hate5 element2p3Top things cats 2span

class : $te'tdanger$3hate26span326p3

aypoint Create a Custom !eading

e will make a simple heading for our Cat 4hoto /pp *y putting them in the same row.

emem*er, 2ootstrap uses a responsie grid system, which makes it easy to put elements into rows

and specify each element's relatie width. #ost of 2ootstrap's classes can *e applied to a div

element.

!ere's a diagram of how 2ootstrap's D+column grid layout works


28/43

6ote that in this illustration, the colmd* class is *eing used. !ere, mdmeans medium, and * is a

num*er specifying how many columns wide the element should *e. 1n this case, the column width of

an element on a medium+sied screen, such as a laptop, is *eing specified.

1n the Cat 4hoto /pp that we're *uilding, we'll use col's*, where 'smeans extra small (like an

extra+small mo*ile phone screen), and * is the num*er of columns specifying how many columns

wide the element should *e.

6est your first image and your h"element within a single 2div class:$row$3 element. 6est your

h"text within a 2div class:$col'sG$3 and your image in a 2div class:$col'sE$3 so that they are

on the same line.

6otice how the image is now 7ust the right sie to fit along the text@

aypoint /dd Font /wesome 1cons to our 2uttons


29/43

Font /wesome is a conenient li*rary of icons. "hese icons are ector graphics, stored in the .svg

file format. "hese icons are treated 7ust like fonts. -ou can specify their sie using pixels, and they

will assume the font sie of their parent !"#$ elements.


30/43

-ou can add the fapaperplane Font /wesome icon *y adding 2i class:$fa fapaperplane$326i3

within your su*mit button element.

0ie your form's text input field a class of formcontrol. 0ie your form's su*mit *utton the classes

btn btnprimary. /lso gie this *utton the Font /wesome icon of fapaperplane.

aypoint $ine up Form 3lements esponsiely with

2ootstrap

6ow let's get your form input and your su*mission button on the same line. e'll do this the same

way we hae preiously *y using a divelement with the class row, and other div elements within it

using the col's* class.

6est *oth your form's text input and su*mit button within a div with the class row. 6est your form's

text inputwithin a di with the class of col'sL. 6est your form's su*mit button in adiv with the classcol's4.

"his is the last challenge we'll do for our Cat 4hoto /pp for now. e hope you'e en7oyed learning

Font /wesome, 2ootstrap, and responsie design;

aypoint Create a 2ootstrap !eadline

6ow let's *uild something from scratch to practice our !"#$, CSS and 2ootstrap skills.

e'll *uild a 7?uery playground, which we'll soon put to use in our 7?uery challenges.

"o start with, create an h element, with the text >?uery layground.

Color your h element with the te'tprimary 2ootstrap class, and center it with the te'tcenter

2ootstrap class.

aypoint !ouse our page within a 2ootstrap Container Fluid 9i

6ow let's make sure all the content on your page is mo*ile+responsie.

$et's nest your h element within a divelement with the class containerJuid.


31/43

aypoint Create a 2ootstrap ow

6ow we'll create a 2ootstrap row for our inline elements.

Create a div element with the class

aypoint Split your 2ootstrap ow

6ow that we hae a 2ootstrap ow, let's split it into two columns to house our elements.

Create two div elements within your row, *oth with the class col'sH.

aypoint Create 2ootstrap ells

2ootstrap has a class called well that can create a isual sense of depth for your columns.

6est one div element with the classwell within each of your col'sH divelements.

aypoint /dd 3lements within your 2ootstrap ells6ow we're seeral div elements deep on each column of our row. "his is as deep as we'll need to

go. 6ow we can add our button elements.

6est three button elements within each of your well div elements.

0aypoint 7pply the Default 8ootstrap 8utton Style

2ootstrap has another *utton class called btndefault.

/pply *oth the btn and btndefaultclasses to each of your button elements.

aypoint Create a Class to "arget with 7?uery Selectors


32/43

6ot eery class needs to hae corresponding CSS. Sometimes we create classes 7ust for the

purpose of selecting these elements more easily using 7?uery.

0ie each of your button elements the class target.

aypoint /dd 19 /ttri*utes to 2ootstrap 3lements

ecall that in addition to class attri*utes, you can gie each of your elements an id attri*ute.

3ach id should *e uni>ue to a specific element.

$et's gie a uni>ue id to each of our divelements of class well.

emem*er that you can gie an element an id like this 2div class:$well$ id:$centerwell$3

0ie the well on the left the id of leftwell. 0ie the well on the right the id of rightwell.

0aypoint /ive 9ach 9lement a CniBue ID

e will also want to *e a*le to use 7?uery to target each *utton *y its uni>ue id.

0ie each of your *uttons a uni>ue id like, starting with target; and ending with targetH.

aypoint $a*el 2ootstrap 2uttons

Just like we la*eled our wells, we want to la*el our *uttons.

0ie each of your button elements text that corresponds to their id.

aypoint


33/43

emem*er that you can start a comment with 2F and end a comment with 3

/dd a comment at the top of your !"#$ that says Nou shouldn%t need to modify code below this

line.

#$ueryaypoint $earn how Script "ags and 9ocument eady

ork6ow we're ready to learn 7?uery, the most popular JaaScript tool of all time. 9on't worry a*out

JaaScript itself + we will coer it soon.

2efore we can start using 7?uery, we need to add some things to our !"#$.

First, add a script element at the top of your page. 2e sure to close it on the following line.

-our *rowser will run any JaaScript inside a script element, including 7?uery.

1nside your script element, add this codeO(document).ready(function() + to your script. "hen close

it on the following line (still inside your scriptelement) with -)

e'll learn more a*out functionslater. "he important thing to know is that code you put inside

thisfunction will run as soon as your *rowser has loaded your page.

"his is important *ecause without your document ready function, your code may run *efore your

!"#$ is rendered, which would cause *ugs.

aypoint "arget !"#$ 3lements with Selectors


34/43

6ow let's write our first 7?uery statement. /ll 7?uery functions start with a O, usually referred to as

adollar sign operator, or simply asbling.

7?uery often selects an !"#$ element with a selector, then does something to that element.

For example, let's make all of your button elements *ounce. Just add this code inside your documentready functionO($button$).addlass($animated bounce$).

6ote that we'e already included *oth the 7?uery li*rary and the /nimate.css li*rary in your code

editor. So you are using 7?uery to apply the /nimate.css bounce class to your button elements.

aypoint "arget 3lements *y Class


35/43

0aypoint Delete your >?uery &unctions

"hese animations were cool at first, *ut now they're getting kind of distracting.

9elete all three of these 7?uery functions from your document ready function, *ut leae your

document ready function itself intact.

aypoint "arget the same element with multiple 7?uery

Selectors

6ow you know three ways of targeting elements *y typeO($button$), *y class O($.btn$), and *y id O

($@target;$).


36/43

7?uery has a function called .css() that allows you to change the CSS of an element.

!ere's how we would change its color to *lue O($@target;$).css($color$, $blue$)

"his is slightly different from a normal CSS declaration, *ecause the CSS property and its alue are

in >uotes, and separated with a comma instead of a colon.

9elete your 7?uery selectors, leaing an empty document ready function.

Select target; and change its color to red.

aypoint 9isa*le an 3lement


37/43

7?uery has a function called appendTo()that allows you to select !"#$ elements and append them

to another element.

For example, if we wanted to moetargetE from our right well to our left well, we would useO

($@targetE$).appendTo($@leftwell$)

#oe your target" element from your leftwell to your rightwell.

aypoint Clone an 3lement


38/43

#any !"#$ elements hae childrenwhich inherit their properties from their parent !"#$ elements.

For example, eery !"#$ element is a child of your body element, and your 57?uery 4layground5 h

element is a child of your 2div class:$containerJuid$3 element.

7?uery has a function calledchildren() that allows you to access the children of whicheer elementyou'e selected.

!ere's an example of how you would use the children() function to gie the children of your left

wellelement the color of *lue O($@leftwell$).children().css($color$, $blue$)

0ie all the children of your @rightwell element a color of green.

aypoint "arget a Specific Child of an 3lement


39/43

6ote that 7?uery is ero+indexed, meaning that, counter+intuitiely,odd selects the second element,

fourth element, and so on.

"ry selecting all the een+num*ered elements + that is, what your *rowser will consider een+

num*ered elements + and giing them the classes of animated and sha#e.

aypoint


40/43

"ry creating one of each.

/nd one more thing you need to notice. Starting at this waypoint in JaaScript related challenges

(except /ngularJS, all Eiplines, 0it, 6ode.7s and 3xpress.7s, #ongo92 and Full Stack JaaScript

4ro7ects) you can see contents of assert() functions (in some challenges e'cept(),assert.eBual() and

so on) which are used to test your code. 1t's part of these challenges that you are a*le to see the

tests that are running against your code.

aypoint


41/43

Data structures hae properties. For example, strings hae a property called.length that will tell you

how many characters are in the string.

For example, if we created a aria*levar Prstame : $harles$, we could find out how long the

string 5Charles5 is *y using the Prstame.lengthproperty.


42/43

1n order to get the last letter of a string, you can su*tract one from the string's length.

For example, if var Prstame : $harles$, you can get the alue of the last letter of the string *y

usingPrstameQPrstame.length ;R.


43/43

webdevelopment and designing

Documents