SlideShare a Scribd company logo
1 of 53
Download to read offline
Code & Design Your First Website
February 2017
http://bit.ly/thinkful-first-website
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 through 1-on-1 mentorship programs
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?
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
• Wireframe exercise
• 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
Frontend Developer
Server
Backend Developer
Programming fundamentals
Request
Response
Client - UI Logic Server - Business Logic
Database Servers
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
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 gratification
• Job opportunities
Tonight’s project
Design & build an “about me” webpage — your
personal homepage on the internet
Wireframing your page
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”
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
• Create an account: codepen.io/signup/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
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)
“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”
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 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)
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 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
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
Layouts (time permitting)
• Display — inline vs. block
• The box model
• Positioning
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
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
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.
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
• We only make 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 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
October 2015
Questions?
email me at jas@thinkful.com
or schedule a call through thinkful.com

More Related Content

What's hot

HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 
Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)TJ Stalcup
 
How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTMLMarlon Jamera
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyPaul Hunt
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Mediacurrent
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3Jeff Byrnes
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5Ravi Raj
 
HTML5: It goes to ELEVEN
HTML5: It goes to ELEVENHTML5: It goes to ELEVEN
HTML5: It goes to ELEVENMathias Bynens
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsSUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsPaul Hunt
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT ProsPaul Hunt
 
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresThe beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresBookNet Canada
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 

What's hot (20)

HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)Thinkful - HTML/CSS Crash Course (May 4 2017)
Thinkful - HTML/CSS Crash Course (May 4 2017)
 
How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTML
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday Jersey
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
Css
CssCss
Css
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
HTML5: It goes to ELEVEN
HTML5: It goes to ELEVENHTML5: It goes to ELEVEN
HTML5: It goes to ELEVEN
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsSUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros
 
Joomla Technical SEO
Joomla Technical SEOJoomla Technical SEO
Joomla Technical SEO
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresThe beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
 
Class1slides
Class1slidesClass1slides
Class1slides
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 

Similar to Code &amp; design your first website (3:16)

DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptx
DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptxDESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptx
DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptxbmit1
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)Webtech Learning
 
BITM3730 9-20.pptx
BITM3730 9-20.pptxBITM3730 9-20.pptx
BITM3730 9-20.pptxMattMarino13
 
What's a web page made of?
What's a web page made of?What's a web page made of?
What's a web page made of?Charlie Allen
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptxMattMarino13
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven developmentGil Fink
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptxMattMarino13
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.pptssuser568d77
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web DevelopmentDaryll Chu
 
Understanding the Web Page Layout
Understanding the Web Page LayoutUnderstanding the Web Page Layout
Understanding the Web Page LayoutJhaun Paul Enriquez
 
Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)Thinkful
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptxMattMarino13
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get startedDimitris Tsironis
 

Similar to Code &amp; design your first website (3:16) (20)

DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptx
DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptxDESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptx
DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptx
 
Lab_Ex1.pptx
Lab_Ex1.pptxLab_Ex1.pptx
Lab_Ex1.pptx
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
BITM3730 9-20.pptx
BITM3730 9-20.pptxBITM3730 9-20.pptx
BITM3730 9-20.pptx
 
What's a web page made of?
What's a web page made of?What's a web page made of?
What's a web page made of?
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
web dev
web devweb dev
web dev
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Understanding the Web Page Layout
Understanding the Web Page LayoutUnderstanding the Web Page Layout
Understanding the Web Page Layout
 
Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)Build a game with javascript (may 21 atlanta)
Build a game with javascript (may 21 atlanta)
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get started
 
Lecture 2 - HTML Basics
Lecture 2 - HTML BasicsLecture 2 - HTML Basics
Lecture 2 - HTML Basics
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 

More from Thinkful

893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370Thinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsThinkful
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsThinkful
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18Thinkful
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Thinkful
 
Baggwjs124
Baggwjs124Baggwjs124
Baggwjs124Thinkful
 
Become a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionBecome a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionThinkful
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18Thinkful
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionLA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionThinkful
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming LanguageThinkful
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117Thinkful
 
1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop1/16/18 Intro to JS Workshop
1/16/18 Intro to JS WorkshopThinkful
 
LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsThinkful
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: FundamentalsThinkful
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.Thinkful
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110Thinkful
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110Thinkful
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018Thinkful
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tfThinkful
 

More from Thinkful (20)

893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
893ff61f-1fb8-4e15-a379-775dfdbcee77-7-14-25-46-115-141-308-324-370
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
LA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: FundamentalsLA 1/31/18 Intro to JavaScript: Fundamentals
LA 1/31/18 Intro to JavaScript: Fundamentals
 
Itjsf129
Itjsf129Itjsf129
Itjsf129
 
Twit botsd1.30.18
Twit botsd1.30.18Twit botsd1.30.18
Twit botsd1.30.18
 
Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)Build your-own-instagram-filters-with-javascript-202-335 (1)
Build your-own-instagram-filters-with-javascript-202-335 (1)
 
Baggwjs124
Baggwjs124Baggwjs124
Baggwjs124
 
Become a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info SessionBecome a Data Scientist: A Thinkful Info Session
Become a Data Scientist: A Thinkful Info Session
 
Vpet sd-1.25.18
Vpet sd-1.25.18Vpet sd-1.25.18
Vpet sd-1.25.18
 
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info SessionLA 1/18/18 Become A Web Developer: A Thinkful Info Session
LA 1/18/18 Become A Web Developer: A Thinkful Info Session
 
How to Choose a Programming Language
How to Choose a Programming LanguageHow to Choose a Programming Language
How to Choose a Programming Language
 
Batbwjs117
Batbwjs117Batbwjs117
Batbwjs117
 
1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop1/16/18 Intro to JS Workshop
1/16/18 Intro to JS Workshop
 
LA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: FundamentalsLA 1/16/18 Intro to Javascript: Fundamentals
LA 1/16/18 Intro to Javascript: Fundamentals
 
(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals(LA 1/16/18) Intro to JavaScript: Fundamentals
(LA 1/16/18) Intro to JavaScript: Fundamentals
 
Websitesd1.15.17.
Websitesd1.15.17.Websitesd1.15.17.
Websitesd1.15.17.
 
Bavpwjs110
Bavpwjs110Bavpwjs110
Bavpwjs110
 
Byowwhc110
Byowwhc110Byowwhc110
Byowwhc110
 
Getting started-jan-9-2018
Getting started-jan-9-2018Getting started-jan-9-2018
Getting started-jan-9-2018
 
Introjs1.9.18tf
Introjs1.9.18tfIntrojs1.9.18tf
Introjs1.9.18tf
 

Recently uploaded

II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING IIII BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING IIagpharmacy11
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Mohamed Rizk Khodair
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Celine George
 
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptxHVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptxKunal10679
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryEugene Lysak
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppCeline George
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...Nguyen Thanh Tu Collection
 
Software testing for project report .pdf
Software testing for project report .pdfSoftware testing for project report .pdf
Software testing for project report .pdfKamal Acharya
 
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatmentsaipooja36
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024CapitolTechU
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya - UEM Kolkata Quiz Club
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismDabee Kamal
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnershipsexpandedwebsite
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽中 央社
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the lifeNitinDeodare
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Celine George
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxheathfieldcps1
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...Nguyen Thanh Tu Collection
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Celine George
 

Recently uploaded (20)

II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING IIII BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptxHVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge App
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
 
Software testing for project report .pdf
Software testing for project report .pdfSoftware testing for project report .pdf
Software testing for project report .pdf
 
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in Hinduism
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 
IPL Online Quiz by Pragya; Question Set.
IPL Online Quiz by Pragya; Question Set.IPL Online Quiz by Pragya; Question Set.
IPL Online Quiz by Pragya; Question Set.
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the life
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
 

Code &amp; 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
  • 8. Clients / Servers Client Frontend Developer Server Backend Developer
  • 9. Programming fundamentals Request Response Client - UI Logic Server - Business Logic Database Servers
  • 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
  • 13. Tonight’s project Design & build an “about me” webpage — your personal homepage on the internet
  • 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”
  • 17. Let’s start with HTML HTML is the content and structure of a webpage It’s the skeleton of your website
  • 18. By itself, HTML is ugly
  • 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>
  • 22. Key HTML concepts • Tags • Elements • Attributes
  • 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
  • 32. CSS example p { color: red; font-size: 36px; }
  • 33. CSS solves two problems • Visual presentation of each element • Layout of elements
  • 34. Key CSS concepts • Selectors • Property • Value • Declaration / Declaration Block
  • 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
  • 43. Layouts (time permitting) • Display — inline vs. block • The box model • Positioning
  • 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
  • 50. Our Mentors Mentors have, on average, 10+ years of experience
  • 51. Our Results Job Titles after GraduationMonths until Employed
  • 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
  • 53. October 2015 Questions? email me at jas@thinkful.com or schedule a call through thinkful.com