SlideShare a Scribd company logo

Thinkful - Frontend Crash Course - Intro to HTML/CSS

•
•
T
TJ Stalcup

This document provides an overview of an introductory HTML/CSS crash course. It introduces the instructor and Thinkful, discusses the goals of learning core HTML and CSS concepts through building a basic website. It covers key topics like how the web works, HTML tags and elements, CSS selectors, properties and values, and linking a CSS stylesheet to HTML. The document emphasizes practicing the concepts through building assignments and challenges students to keep learning outside of the course.

1 of 40
Download to read offline
Frontend Crash Course Intro to HTML/CSS March 2017 http://bit.ly/tf-html-css-dc WiFi - In3-Guest
About me • Tyler Brewer
 • Web Developer @ Excella Consulting
 • Thinkful Alumni
 • Former Graphic Designer
About us Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
About you - ‘round the room • What’s your name? • What’s your programming background? • What’s your goal?
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
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
Clients / Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
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
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
Let’s start with HTML HTML is the content and structure of a webpage It’s the skeleton of your website
By itself, HTML is ugly
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…
Your first website Copy this code (don’t worry if you don’t understand it) <html> <body> <h1>Hello world!</h1> </body> </html>
Key HTML concepts • Tags • Elements • Attributes
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
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
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
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
More about elements Some consist of just a self-closing tag <img src=“http://i.imgur.com/Th5404r.jpg">
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>
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)
HTML Challenges Complete the following assignments on http://bit.ly/tf-html-classroom • About me • Images • Links
What is CSS? Cascading Style Sheets (CSS) interact with your HTML to determine the visual presentation of your webpages
CSS example p { color: red; font-size: 36px; }
CSS solves two problems • Visual presentation of each element • Layout of elements
Key CSS concepts • Selectors • Property • Value • Declaration / Declaration Block
CSS selectors • Determine HTML elements to target for styles • Can target tags, classes, id’s and many more! • Selectors can be combined
Example selectors p (selects all paragraph tags) .name (selects HTML elements with class “name”) p.name (selects paragraph tags with class “name”)
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)
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/
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
Declarations and declaration blocks This is a declaration block containing two declarations p { color: red; font-size: 36px; }
CSS challenges Complete the following assignments on http://bit.ly/tf-html-classroom • Selectors • Classes
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">
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
Ways to keep learningLevelofsupport Learning methods
1-on-1 mentorship enables flexibility 325+ mentors with an average of 10 years of experience in the field
Support ‘round the clock
Our results Job Titles after GraduationMonths until Employed
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

More Related Content

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
  • 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