Ad
More Related Content
What's hot (20)
Similar to Thinkful - Frontend Crash Course - Intro to HTML/CSS (20)
Ad
More from TJ Stalcup (20)
Ad
Recently uploaded (20)
Thinkful - Frontend Crash Course - Intro to HTML/CSS
- 1. Frontend Crash Course Intro to HTML/CSS March 2017 http://bit.ly/tf-html-css-dc WiFi - In3-Guest
- 2. About me โข Tyler Brewerโจ โข Web Developer @ Excella Consultingโจ โข Thinkful Alumniโจ โข Former Graphic Designer
- 3. About us Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
- 4. About you - โround the room โข Whatโs your name? โข Whatโs your programming background? โข Whatโs your goal?
- 5. Goals โข Core concepts of HTML/CSS to build websites โข Drills to practice those concepts โข Build your ๏ฌrst website โข Get more comfortable learning to code โข Take home challenges
- 6. How the web works Type a URL from a client (e.g. google.com) Browser communicates with DNS server to ๏ฌnd IP address Browser sends an HTTP request asking for speci๏ฌc ๏ฌles Browser receives those ๏ฌles and renders them as a website
- 7. Clients / Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
- 8. How it relates to what weโre doing When we write HTML & CSS today, we are creating those ๏ฌles that are stored on a server which are then sent and then rendered by your browser
- 9. Setup http://bit.ly/tf-html-classroom Normally to write our code weโd use a text editor or an integrated development environment (IDE) But since weโre learning weโre going to write our code in a website to skip the setup, see our results immediately, and make it easy for us to track progress
- 10. Letโs start with HTML HTML is the content and structure of a webpage Itโs the skeleton of your website
- 11. By itself, HTML is ugly
- 12. Weโll make it pretty later We will start with just HTML โ weโll then add a Cascading Style Sheet (CSS) ๏ฌle to โstyleโ our website. More on that laterโฆ
- 13. Your ๏ฌrst website Copy this code (donโt worry if you donโt understand it) <html> <body> <h1>Hello world!</h1> </body> </html>
- 14. Key HTML concepts โข Tags โข Elements โข Attributes
- 15. HTML tags Every tag starts with a โless thanโ sign and ends with a โgreater thanโ sign <html> #this is an HTML opening tag <body> #this is a body opening tag <h1>Hello world!</h1> #this is set of H1 tags </body> #this is a body closing tag </html> #this is an HTML closing tag
- 16. More about tags โข There are opening tags and closing tags โ closing tags have a backslash before the tag name (</html> versus <html>) โข Tags instruct a browser about the structure of our website โข There are hundreds of built-in tags though youโll use the same few a lot
- 17. Non-exhaustive list of HTML tags โข <html> #html tags wrap your entire page โข <head> #head tags holds info about the page โข <body> #body tags wrap around your content โข <h1> #signi๏ฌes the largest headline (through h6) โข <p> #wraps a paragraph of writing โข <div> #div tags are generic container tags โข <a> #anchor tags for text to be a link โข <ul><li> #unordered list of items โข <button> #this is a button
- 18. HTML elements HTML elements usually consist of an opening tag, closing tag, and some content <html> #html element starts here <body> #body element starts here <h1>Hello world!</h1> #this is an HTML element </body> #body element ends here </html> #html element ends here
- 19. More about elements Some consist of just a self-closing tag <img src=โhttp://i.imgur.com/Th5404r.jpg">
- 20. A note about <div>โs We use <div> tags to separate sections of our site. This will allow for sophisticated styling. Itโs a good habit to โwrapโ most sections into a <div> <div> <h1>Hello world!</h1> </div>
- 21. HTML attributes HTML attributes set properties on an element โ the are attached in the opening tag <a href=โhttps://somewhere.com">This is a link</a> href is an attribute that sets the destination of a link <h1 class=โheadlineโ>This is a headline</h1> class is one attribute that identi๏ฌes element (for CSS & Javascript)
- 22. HTML Challenges Complete the following assignments on http://bit.ly/tf-html-classroom โข About me โข Images โข Links
- 23. What is CSS? Cascading Style Sheets (CSS) interact with your HTML to determine the visual presentation of your webpages
- 24. CSS example p { color: red; font-size: 36px; }
- 25. CSS solves two problems โข Visual presentation of each element โข Layout of elements
- 26. Key CSS concepts โข Selectors โข Property โข Value โข Declaration / Declaration Block
- 27. CSS selectors โข Determine HTML elements to target for styles โข Can target tags, classes, idโs and many more! โข Selectors can be combined
- 28. Example selectors p (selects all paragraph tags) .name (selects HTML elements with class โnameโ) p.name (selects paragraph tags with class โnameโ)
- 29. CSS properties Determines aspect of an elementโs appearance to change โข color (set the font color) โข font-family (sets main and backup typefaces) โข background-image (sets background image) โข height (sets the height of an element)
- 30. More on CSS properties โข Each property has a default value โ when you write CSS, you override that default with a new value โข There are lots of CSS properties! For a full list see http://www.htmldog.com/references/css/properties/
- 31. CSS values Determines the aspect of the elementโs appearance we wish to change โข color: red, blue, green, #CCCCCC acceptable values for the color property โข font-family: helvetica, arial, sans-serif acceptable values for the font-family property โข background-image: url(โimageFile.jpg") looks for a URL value for image ๏ฌle โข height: 40px, 50% set in pixels or percentage of container height
- 32. Declarations and declaration blocks This is a declaration block containing two declarations p { color: red; font-size: 36px; }
- 33. CSS challenges Complete the following assignments on http://bit.ly/tf-html-classroom โข Selectors โข Classes
- 34. Linking CSS to HTML โข Normally youโd have one HTML ๏ฌle for each webpage (for example, home.html and pro๏ฌle.html), and a single CSS ๏ฌle for the whole websiteโs styles (styles.css) โข To link your stylesheet to your HTML, youโd insert the following line into the <head> section of your HTML webpage โข <link rel="stylesheet" type="text/css" href="theme.css">
- 35. Learning to learn โข Google is your friend! โข Practice at the edge of your abilities โข Ignore the hot new thing. Instead go deep with one technology
- 36. Ways to keep learningLevelofsupport Learning methods
- 37. 1-on-1 mentorship enables ๏ฌexibility 325+ mentors with an average of 10 years of experience in the ๏ฌeld
- 38. Support โround the clock
- 39. Our results Job Titles after GraduationMonths until Employed
- 40. Try us out! โข Initial 2-week trial includes six mentor sessions for $50 โข Learn HTML/CSS and JavaScript โข Option to continue onto web development bootcamp โข Talk to me (or email tj@thinkful.com) if youโre interested