Micro-Scholarship, What it is, How can it help me.pdf
Code & design your first website (3:16)
1. Code & Design Your First Website
February 2017
http://bit.ly/thinkful-first-website
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 through 1-on-1 mentorship programs
4. What’s your goal?
• Do you want to work better with developers?
• Do you want to start working in tech?
• Do you have an idea that you want to build?
5. 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
6. Goals
• How the web works
• Wireframe exercise
• Basics of HTML and CSS
• Lots of practice building
• Next steps in your learning
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
10. 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
Business Logic
Database Servers
Response
11. 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.
12. Why start by learning “Frontend”?
• Easy to get started and see if coding is for you
• Get clear & immediate gratification
• Job opportunities
15. Wireframe exercise for “About Me”
• List out the topics you want to include
• Divide each topic into a section
• Layout the page (start at top and work down)
• Keep it simple — use Google for “inspiration”
19. 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…
20. Getting Started with Codepen
• Normally developers use a text editor
• Codepen lets us write HTML/CSS and see the
results instantly
• Create an account: codepen.io/signup/free
• Skip profile info => Go to create a new “Pen”
21. First lines of HTML
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>
23. 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
24. 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
25. 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
26. 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
27. More about elements
Some consist of just a self-closing tag
<img src=“http://i.imgur.com/Th5404r.jpg">
28. 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>
29. 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)
30. “About Me” website — HTML
http://codepen.io/jasjitsingh85/pen/XMdbgY
• “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”
31. What is CSS?
Cascading Style Sheets (CSS) interact with your HTML
to determine the visual presentation of your webpages
35. CSS selectors
• Determine HTML elements to target for styles
• Can target tags, classes, id’s and many more!
• Selectors can be combined
36. 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”)
37. CSS properties
Determines the aspect of the element’s appearance to change
• color (set the font color)
• font-family (sets main typeface and backup typefaces)
• background-image (sets background image)
• height (sets the height of an element)
38. 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/
39. 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
40. Declarations and declaration blocks
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
41. CSS challenge
• Pick a typeface, 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
42. From Codepen to reality
• Download Sublime Text (or another text editor)
• Create a new folder (“First Website”)
• Create a new HTML file in First Website folder (index.html)
• Copy & paste your Codepen HTML into this file
• Create a new css file in First Website folder (index.css)
• Copy & paste your Codepen CSS into this file
• Add link to your CSS in your HTML <head> section
• Save both files
• Double-click & open your index.html file
44. In-line vs block
• Every element is either inline-block or block
• Block: element starts a new line and stretches to full width
• Inline: element doesn’t start new line, only as wide as need be
45. More on in-line vs block
• For a full list of inline elements, see: https://developer.mozilla.org/
en-US/docs/Web/HTML/Inline_elements
• For a full list of block-level elements, see: https://
developer.mozilla.org/en-US/docs/Web/HTML/Block-
level_elements
46. Box model & position
• Static: normal flow. Block elements stack on top of each other.
Inline elements are as large as the content they contain.
• Fixed: outside of normal flow. Stays in same place no matter
what.
• Relative: normal flow. Unlike static, can use left, right, top, bottom
properties to move the elements around relative to where they’d
otherwise sit.
• Absolute: outside of normal flow. Stays in a specific spot on a
page.
47. 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
48. 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
49. Our Program
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor
52. Special Prep Course Offer
• Three-week program, includes six mentor sessions
• Covers HTML/CSS, Javascript, jQuery, Responsive Design
• Option to continue into web development bootcamp
• Prep course costs $500 (can apply to cost of full bootcamp)
• Talk to me (or email me) about special offer
