Movatterモバイル変換

Frontend Crash Course:HTML & CSSWiﬁ network: CrossCamp.us Eventshttp://bit.ly/html-css-la

© 2017 Thinkful. All Rights Reserved. 4About youWhy are you here?I’m interested in becoming a developerI’m just curious about what coding isProgramming experience?First lines of code will be written tonightBeen self teaching for 1-3 monthsBeen at this for 3+ months

© 2017 Thinkful. All Rights Reserved. 5GoalsUnderstand core concepts of using HTML/CSS tobuild websitesComplete drills to put those concepts into practiceBuild your ﬁrst websiteLearn to learn programming, especially the feeling ofstruggling with a conceptTake home challenges to keep going

© 2017 Thinkful. All Rights Reserved. 9How that relates to what we’re doingWhen we write HTML & CSS today, we arecreating those ﬁles that are stored on aserver, sent through a series of tubes, andthen rendered by your browser

© 2017 Thinkful. All Rights Reserved. 10SetupNormally, developers use a text editor to write codeToday, we’re using a tool called CodepenCodepen lets you write HTML/CSS and instantlysee the results of your workCreate an account: https://codepen.io/accounts/signupOn second page, ﬁll out your info you want to saveyour workCreate a new “pen”

© 2017 Thinkful. All Rights Reserved. 16HTML TagsEvery tag starts with a “less than” sign and ends with a“greater than” sign<html> This is an HTML tag<body> This is a body tag<h1>Hello world!</h1> This line has two H1tags, one opening and one closing</body></html>

© 2017 Thinkful. All Rights Reserved. 17HTML TagsThere are opening tags and closing tags. Closing tagshave a backslash before the tag name.HTML tags have become more semantic with HTML5(or, the word signals the purpose of the tag). We’llreview some common tags shortly.

© 2017 Thinkful. All Rights Reserved. 18HTML ElementsHTML elements usually consist of an opening tag, closingtag, and some content.<html><body> This element starts here and ends two lines below<h1>Hello world!</h1> This is an HTML element</body></html>Some consist of just a self-closing tag<img src=“http://i.imgur.com/Th5404r.jpg">

© 2017 Thinkful. All Rights Reserved. 19HTML ElementsA non-exhaustive list of HTML elements:<html> HTML tags wrap your entire page<head> Head tags<body> Body tags<h1> H1 tags signify the largest headline. H2signiﬁes subhead… through h6<p> Paragraph tags wrap a paragraph of writing

© 2017 Thinkful. All Rights Reserved. 20HTML Elements<p> Paragraph tags wrap a paragraph of writing<section> Section tags help you organize differentsections of your layout<div> Div tags are generic/non-semantic container tagsfor anything that needs a container<a> Anchor tags are for setting some text to be a link<ul> <li> / <ol><li> Unordered list and ordered lists arefor lists of items, containing list item elements<button> This is a button

© 2017 Thinkful. All Rights Reserved. 21HTML AttributesHTML attributes set properties on an element. They belongin the opening tag. Here are three common attributes:<a href=“https://somewhere.com">This is a link</a> hrefis an attribute for setting the destination of a link<h1 class=“headline”>This is a headline</h1> class is anattribute that doesn’t show up in the rendered webpage,but will be important when we start talking about CSS<h1 id=“headline”>This is a headline</h1> id is anattribute that doesn’t show up in the rendered webpage,but will be important when we start talking about CSS

© 2017 Thinkful. All Rights Reserved. 22HTML DrillsLink here, link there:http://codepen.io/team/thinkful/pen/qNOGmPImages 101: http://codepen.io/team/thinkful/pen/gMaJvqCreating headers: http://codepen.io/team/thinkful/pen/JKGPdWAdd a header element inside of the body (but before themain content). Inside the header, add a title ("Lorem Ipsum")on one line, followed by a subtitle on the next ("Holdingplaces since the 1st century BCE"). The subtitle text shouldbe smaller than the title text.Link here, link there solution: http://codepen.io/team/thinkful/pen/aZNGdPImages 101 solution :http://codepen.io/team/thinkful/pen/OXNZXRCreating headers: http://codepen.io/team/thinkful/pen/KMzRzy

© 2017 Thinkful. All Rights Reserved. 27CSS SelectorsCSS selectors determine which HTML elements are targetedfor speciﬁc styles:p This selects all paragraph tags.header This selects HTML elements with the class“header”#navigation This selects HTML elements with the IDnavigationp.header This selects paragraph tags with the headerclassSelectors can be combined.

© 2017 Thinkful. All Rights Reserved. 28CSS PropertiesCSS properties determine what about the appearanceyou’re setting:color This determines the font colorfont-family This lets you set the typeface as well asbackup typefacesbackground-image This lets you set abackground image for an elementheight This lets you set the height of an element

© 2017 Thinkful. All Rights Reserved. 29CSS PropertiesEach property has a default value for a given element.When you write CSS, you over-ride that default valuewith a new value.For a full list, see: http://www.htmldog.com/references/css/properties/

© 2017 Thinkful. All Rights Reserved. 30CSS ValuesEach property has a set of acceptable values that you can set:color: red, blue, green, #CCCCCC These are all acceptablevalues for the color propertyfont-family: helvetica, arial, sans-serif These are allacceptable values for the font-family propertybackground-image: url("imageFile.jpg") This property looksfor a URL value that points to a speciﬁc image ﬁleheight: 40px 50% Height can be set as an explicit width or asa percentage of the containing boxClick on a property to see the acceptable values: http://www.htmldog.com/references/css/properties/

© 2017 Thinkful. All Rights Reserved. 32CSS Target PracticeClasses drill: Add classes to the two divs to create ablue box and a red box, as described in the codecomments and paragraphs in the codepen. You’ll needto use background-color, margin-bottom, and border.http://codepen.io/team/thinkful/pen/jrWKKOSelector drill: write one ruleset for sections that givesthem a margin-bottom of 90px, and a second ruleset forheader elements that sets font-family to Helveticahttp://codepen.io/team/thinkful/pen/ZOLmyN

© 2017 Thinkful. All Rights Reserved. 33Linking CSS to HTMLWe don’t have to deal with this thanks to CodepenNormally you’d have one HTML file for each webpage(for example, home.html and profile.html), and a singleCSS file for the whole website’s styles (styles.css)To link your stylesheet to your HTML, you’d insert thefollowing line into the <head> section of your HTMLwebpage:<link rel="stylesheet" type="text/css"href="theme.css">

© 2017 Thinkful. All Rights Reserved. 34CSS LayoutCSS layout determines how elements are arranged around each other. Forexample, Facebook wrote styles to make the nav bar stick to the top, have thepages and favorites section on the left and the news feed run in the center:

© 2017 Thinkful. All Rights Reserved. 36In-line vs blockEvery element has a display property set to in-line orblock.A block-level element always starts on a new lineand stretches to the full width availableAn inline element does not start on a new line andonly takes up as much width as necessaryEvery element has a default value, and that value canbe over-ridden by setting an explicit value.

© 2017 Thinkful. All Rights Reserved. 37In-line vs blockFor a full list of inline elements, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elementsFor a full list of block-level elements, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

© 2017 Thinkful. All Rights Reserved. 38The box model & position propertyElements are boxes. We use the position property to organizethese elements/boxes around each other. The position propertyhas four values:Static: normal flow. Block elements stack on top of each other.Inline elements are as large as the content they contain.Fixed: outside of normal flow. Stays in same place no matterwhat.Relative: normal flow. Unlike static, can use left, right, top,bottom properties to move the elements around relative towhere they’d otherwise sit.Absolute: outside of normal flow. Stays in a specific spot on apage.

© 2017 Thinkful. All Rights Reserved. 42Absolute positioningExample: http://codepen.io/team/thinkful/pen/vKXPrrYou’ll be tempted to use absolutepositioning to jerry-rig a design. Don’t dothis. Only use it when you’re working within asmall div that’s not going to change a lot.

© 2017 Thinkful. All Rights Reserved. 43About you pageUsing what we’ve learned today, let’s set up a simple aboutme page that includes:Headline with your nameSmall paragraph about youImage of yourself, or something that you likeThen, we’ll style it using some of the tools we learned.Some ideas are:Unique font-family, size, colorPositioning of elements, particularly the photo

© 2017 Thinkful. All Rights Reserved. 44About you pagehttp://codepen.io/danfriedman9/pen/pEOWZALet’s walk through the starter code togetherDrill: Add another paragraph about yourselfDrill: Add another section to the website similar to the“About me” section called “About my family” with aparagraph of lorem ipsum below it

© 2017 Thinkful. All Rights Reserved. 45Topics we’re not covering / Where to go from hereMore practice… especially with layoutForms and inputResponsive designDeveloper toolsJavaScript for interactivity

© 2017 Thinkful. All Rights Reserved. 51Try the program for twoweeks, includes six mentorsessions - $50Learn HTML/CSS/JavaScriptOption to continue onto webdevelopment bootcampCome talk to me if you’reinterested (or email me atnoel@thinkful.com)Try us out!

Thank you!Email me with questions or suggestions:noel@thinkful.comApril 2017

© 2017 Thinkful. All Rights Reserved. 55Positioning exercise: Reasoning about LayoutImages can be downloaded from here: https://github.com/Thinkful-Ed/css_layout_exercises/tree/solutions/imagesSteps:Break the page down into its componentsPick one to start with (top to bottom, left to right)List the elements inside of a componentIdentify if a given element should be inline or block, and pick themost appropriate HTML elementCode the ﬁrst element (once again, top to bottom, left to right)Trick: put a 1px red box around every element with “* {border: 1pxsolid red; }”. That will let you visualize the boxes of elements moreeffectively.

Movatterモバイル変換

Change Language

Frontend Crash Course: HTML and CSS

Embed presentation

Recommended

More Related Content

What's hot

Similar to Frontend Crash Course: HTML and CSS

More from Thinkful

Recently uploaded

Frontend Crash Course: HTML and CSS