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 first 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 find IP address Browser sends an HTTP request asking for specific files Browser receives those files 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 files 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) file to “style” our website. More on that later…
- 13. Your first 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> #signifies 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 identifies 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 file • 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 file for each webpage (for example, home.html and profile.html), and a single CSS file 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 flexibility 325+ mentors with an average of 10 years of experience in the field
- 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