SlideShare a Scribd company logo

Html:css crash course (4:5)

•
•
T
Thinkful

This document provides an introduction to HTML and CSS for building websites. It discusses key concepts like tags, elements, attributes, selectors, properties and values. It explains how HTML provides structure and content while CSS handles visual presentation and layout. Students are guided through writing their first HTML page and linking a CSS stylesheet. The document promotes practicing skills learned and using resources like Google when learning. It also introduces Thinkful's full web development program which includes mentorship and career preparation.

1 of 44
Download to read offline
Frontend Crash Course Intro to HTML/CSS March 2017 http://bit.ly/tf-html-css
About me • Jasjit Singh • Self-taught developer • Worked in finance & tech • Co-Founder Hotspot • Thinkful General Manager
About us Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
About you — why are you here? • Do you want to work better with developers? • Do you want to start working in tech? • Do you have an idea you want to build?
About you — programming experience? • I’ll write my first lines of code tonight • I’ve been coding for under three months • I’ve been coding for three months or longer
Learning 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
Example: facebook.com HTML, CSS, & Javascript render interactive newsfeed Algorithm determines what’s in your feed Request Get data about your friends’s and their posts Open browser and navigate to facebook.com Application Logic Database Response Client Server
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) <h1 id=“headline”>This is a headline</h1> id is another 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”) #intro (selects HTML elements with id “intro”) 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
More about Thinkful • Anyone who’s committed can learn to code • 1-on-1 mentorship is the best way to learn • Flexibility matters — learn anywhere, anytime •We only make money when you get a job
Our Program You’ll learn concepts, practice with drills, and build capstone projects — all guided by a personal mentor
Our Mentors Mentors have, on average, 10+ years of experience
Web Development Syllabus • Frontend Development (HTML, CSS, Javascript) • Frontend “Frameworks” (React.js) • Backend Development (Node.js) • Electives (Python, Ruby, Swift, Angular, UX) • Computer Science Fundamentals • Technical interviews + Career prep
Our Results Job Titles after GraduationMonths until Employed
Special Introductory Offer • Two-week program, six mentor sessions for $50 • Starts with HTML/CSS/Javascript • Option to continue into full program • Talk to me (or email me) if you’re interested
October 2015 Questions? jas@thinkful.com schedule a call through thinkful.com

More Related Content

Html:css crash course (4:5)

  • 1. Frontend Crash Course Intro to HTML/CSS March 2017 http://bit.ly/tf-html-css
  • 2. About me • Jasjit Singh • Self-taught developer • Worked in finance & tech • Co-Founder Hotspot • Thinkful General Manager
  • 3. About us Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
  • 4. About you — why are you here? • Do you want to work better with developers? • Do you want to start working in tech? • Do you have an idea you want to build?
  • 5. About you — programming experience? • I’ll write my first lines of code tonight • I’ve been coding for under three months • I’ve been coding for three months or longer
  • 6. Learning 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
  • 7. 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
  • 8. Clients / Servers Client (sends requests) Frontend Developer Manages what user sees Server (sends response) Backend Developer Manage what app does
  • 9. Example: facebook.com HTML, CSS, & Javascript render interactive newsfeed Algorithm determines what’s in your feed Request Get data about your friends’s and their posts Open browser and navigate to facebook.com Application Logic Database Response Client Server
  • 10. 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
  • 11. 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
  • 12. Let’s start with HTML HTML is the content and structure of a webpage It’s the skeleton of your website
  • 13. By itself, HTML is ugly
  • 14. 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…
  • 15. Your first website Copy this code (don’t worry if you don’t understand it) <html> <body> <h1>Hello world!</h1> </body> </html>
  • 16. Key HTML concepts • Tags • Elements • Attributes
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. More about elements Some consist of just a self-closing tag <img src=“http://i.imgur.com/Th5404r.jpg">
  • 22. 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>
  • 23. 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) <h1 id=“headline”>This is a headline</h1> id is another attribute that identifies element (for CSS & Javascript)
  • 24. HTML Challenges Complete the following assignments on http://bit.ly/tf-html-classroom • About me • Images • Links
  • 25. What is CSS? Cascading Style Sheets (CSS) interact with your HTML to determine the visual presentation of your webpages
  • 26. CSS example p { color: red; font-size: 36px; }
  • 27. CSS solves two problems • Visual presentation of each element • Layout of elements
  • 28. Key CSS concepts • Selectors • Property • Value • Declaration / Declaration Block
  • 29. CSS selectors • Determine HTML elements to target for styles • Can target tags, classes, id’s and many more! • Selectors can be combined
  • 30. Example selectors p (selects all paragraph tags) .name (selects HTML elements with class “name”) #intro (selects HTML elements with id “intro”) p.name (selects paragraph tags with class “name”)
  • 31. 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)
  • 32. 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/
  • 33. 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
  • 34. Declarations and declaration blocks This is a declaration block containing two declarations p { color: red; font-size: 36px; }
  • 35. CSS challenges Complete the following assignments on http://bit.ly/tf-html-classroom • Selectors • Classes
  • 36. 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">
  • 37. 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
  • 38. More about Thinkful • Anyone who’s committed can learn to code • 1-on-1 mentorship is the best way to learn • Flexibility matters — learn anywhere, anytime •We only make money when you get a job
  • 39. Our Program You’ll learn concepts, practice with drills, and build capstone projects — all guided by a personal mentor
  • 40. Our Mentors Mentors have, on average, 10+ years of experience
  • 41. Web Development Syllabus • Frontend Development (HTML, CSS, Javascript) • Frontend “Frameworks” (React.js) • Backend Development (Node.js) • Electives (Python, Ruby, Swift, Angular, UX) • Computer Science Fundamentals • Technical interviews + Career prep
  • 42. Our Results Job Titles after GraduationMonths until Employed
  • 43. Special Introductory Offer • Two-week program, six mentor sessions for $50 • Starts with HTML/CSS/Javascript • Option to continue into full program • Talk to me (or email me) if you’re interested