Code & design your first website (4:19)
46
April 2017 Code & Design Your First Website
Transcript of Code & design your first website (4:19)
April 2017
Code & Design Your First Website
About me
• Connor Ericson
• Current Thinkful student
My lovely assistants
• Allen Smith
• Recent Thinkful graduate
• Peter Kim
• Program Manager
About Thinkful
Thinkful prepares students for web development & data science jobs through 1-on-1 mentorship programs
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?
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
Goals
• How the web works
• Basics of HTML and CSS
• Lots of practice building
• Next steps in your learning
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) Manages what people seeFrontend Developer
Server (sends responses) Manage how the app works
Backend Developer
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
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.
Why start by learning “Frontend”?
• Easy to get started and see if coding is for you
• Get clear & immediate visual feedback
• Job opportunities
Tonight’s project
Design & build an “about me” webpage — your personal homepage on the internet
Sample wireframe
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…
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”
First lines of HTML
<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 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
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)
“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”
What is CSS?
Cascading Style Sheets (CSS) interact with your HTML to determine the visual presentation of your webpages
CSS solves two problems
• Visual presentation of each element
• Layout of elements
CSS example
p {
color: red;
font-size: 36px;
}
Key CSS concepts
• Selectors
• Properties
• Value
• Declaration Block
CSS selectors
• Determine HTML elements to target for styles
• Can target tags, classes, 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 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)
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-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
Declaration blocks
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
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
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
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
Our Program
You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
Our Mentors
Mentors have, on average, 10+ years of experience
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
