Code & design your first website (4:19)
Transcript of Code & design your first website (4:19)
![Page 1: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/1.jpg)
April 2017
Code & Design Your First Website
![Page 2: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/2.jpg)
About me
• Connor Ericson
• Current Thinkful student
![Page 3: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/3.jpg)
My lovely assistants
• Allen Smith
• Recent Thinkful graduate
• Peter Kim
• Program Manager
![Page 4: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/4.jpg)
About Thinkful
Thinkful prepares students for web development & data science jobs through 1-on-1 mentorship programs
![Page 5: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/5.jpg)
What’s your goal?
• Do you want to start working in tech?
• Do you have an idea that you want to build?
• Do you want to work better with developers?
![Page 6: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/6.jpg)
What’s your programming background?
• First lines of code will be written tonight?
• Been self teaching for 1-3 months?
• Been at this for 3+ months
![Page 7: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/7.jpg)
Goals
• How the web works
• Basics of HTML and CSS
• Lots of practice building
• Next steps in your learning
![Page 8: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/8.jpg)
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
![Page 9: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/9.jpg)
Clients / Servers
Client (sends requests) Manages what people seeFrontend Developer
Server (sends responses) Manage how the app works
Backend Developer
![Page 10: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/10.jpg)
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
Server
Database
Response
![Page 11: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/11.jpg)
How that relates to what we’re doing today
HTML & CSS are the files that are stored on a server, sent to the client, and then rendered by your browser. Today, we’ll be writing these files.
![Page 12: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/12.jpg)
Why start by learning “Frontend”?
• Easy to get started and see if coding is for you
• Get clear & immediate visual feedback
• Job opportunities
![Page 13: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/13.jpg)
Tonight’s project
Design & build an “about me” webpage — your personal homepage on the internet
![Page 14: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/14.jpg)
Sample wireframe
![Page 15: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/15.jpg)
Let’s start with HTML
HTML is the content and structure of a webpage It’s the skeleton of your website
![Page 16: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/16.jpg)
By itself, HTML is ugly
![Page 17: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/17.jpg)
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…
![Page 18: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/18.jpg)
Getting Started with Codepen
• Normally developers use a text editor
• Codepen lets us write HTML/CSS and see the results instantly
• https://codepen.io/accounts/signup/user/free
• Skip profile info => Go to create a new “Pen”
![Page 19: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/19.jpg)
First lines of HTML
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>
![Page 20: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/20.jpg)
Key HTML concepts
• Tags
• Elements
• Attributes
![Page 21: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/21.jpg)
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
![Page 22: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/22.jpg)
More about tags
• There are opening tags and closing tags — closing tags have a forward slash 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
![Page 23: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/23.jpg)
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
![Page 24: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/24.jpg)
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
![Page 25: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/25.jpg)
More about elements
Some consist of just a self-closing tag
<img src=“http://i.imgur.com/Th5404r.jpg">
![Page 26: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/26.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>
![Page 27: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/27.jpg)
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)
![Page 28: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/28.jpg)
“About Me” website — HTML
http://bit.ly/tf-example-one
• “Fork” this code and lets walk through it together
• Drill — Add another section of your choosing
• Drill — Add a title and a paragraph in that section
• Drill — Try and add an image underneath “About Me”
![Page 29: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/29.jpg)
What is CSS?
Cascading Style Sheets (CSS) interact with your HTML to determine the visual presentation of your webpages
![Page 30: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/30.jpg)
CSS solves two problems
• Visual presentation of each element
• Layout of elements
![Page 31: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/31.jpg)
CSS example
p {
color: red;
font-size: 36px;
}
![Page 32: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/32.jpg)
Key CSS concepts
• Selectors
• Properties
• Value
• Declaration Block
![Page 33: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/33.jpg)
CSS selectors
• Determine HTML elements to target for styles
• Can target tags, classes, and many more!
• Selectors can be combined
![Page 34: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/34.jpg)
Example selectors
p (selects all paragraph tags)
.name (selects HTML elements with class “name”)
p.name (selects paragraph tags with class “name”)
![Page 35: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/35.jpg)
CSS properties
Determines the aspect of the element’s appearance to change
• color (set the font color)
• font-size (sets size of the font)
• background-image (sets background image)
• height (sets the height of an element)
![Page 36: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/36.jpg)
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/
![Page 37: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/37.jpg)
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-size: 24px, 2em, 40% acceptable values for the font-size 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
![Page 38: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/38.jpg)
Declaration blocks
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
![Page 39: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/39.jpg)
CSS challenge
• Pick a color and size for the words
• Add a “More About Me” section and put a border around it
• Add background colors to each section to separate them
![Page 40: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/40.jpg)
General learning tips for coding
• Google is your friend
• Practice at the edge of your abilities
• Ignore the hot new thing — depth matters more than breadth
![Page 41: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/41.jpg)
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
• Thinkful only makes money when you get a job
![Page 42: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/42.jpg)
Our Program
You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
![Page 43: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/43.jpg)
Our Mentors
Mentors have, on average, 10+ years of experience
![Page 44: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/44.jpg)
Our Results
Job Titles after GraduationMonths until Employed
![Page 45: Code & design your first website (4:19)](https://reader034.fdocuments.in/reader034/viewer/2022042707/58f9abe41a28ab8e5b8b45d7/html5/thumbnails/45.jpg)
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