Basics of Front End Web Dev PowerPoint

The Basics of Web
Development (Front End)
BY MV HACKS

Some Editors to Download
• Geany
• Notepad ++
• Sublime Text
• Eclipse (or other IDEs)
• Brackets

What You will Learn Today
• HTML
• CSS

Why WebDev?
• Create cool looking websites
• “Hack” online games (like Cookie Clicker!!)
• Create your own online games

How Websites Work
• Website = HTML document + resources (CSS,
images, JavaScript)
• Browsers (Chrome, Firefox, etc.) read HTML and
render the appropriate page
•Or if Internet Explorer, the wrong page
• Websites can be on your local computer or on a web
server

What is HTML?
• HTML = Hyper Text Markup Language
• Language of the web!
•All webpages are structured in HTML
•Composed of elements which consist of tags
•Tags mark beginning and end of elements
•Ex. A paragraph element - <p>Paragraph Content</p>

Common Elements
•Common Elements
•HTML - <html></html>
•Head - <head></head>
•Body - <body></body>
•Heading - <h1></h1>
•Paragraph - <p></p>
•Anchor - <a></a>
•Image - <img />

Starting
• HTML documents start with <!DOCTYPE html>
• Tells browser to render as HTML5
•Then <html> to put everything inside
• Most elements need to be closed
• HTML is highest order, so end with </html>

<!DOCTYPE html>
<html>
<!–- all the webpage’s elements -->
</html>

Header Element
• Next is the head element, <head>
•This is where you bring in style files, scripts, etc.
•No actual content seen on the page will be here!
•Ex. Titles, Style tags (CSS basically), etc.

<!DOCTYPE html>
<html>
<head>
<title> Let’s Hack!! </title>
</head>
</html>

Body Element
• Finally the body element, <body>
•The “body” of the html file
• Where you put images, paragraphs, bullet points,
etc.

<!DOCTYPE html>
<html>
<head>
<title> Let’s Hack!! </title>
</head>
<body>
<p>Hello world! Congratulations on making
your first page!</p>
</body>
</html>

Saving and Viewing
•File -> save as nameofFile.html
• Naming doesn’t matter
• “MvHacks.html”
• HTML files don’t need to be compiled
•Open browser, click File -> Open file…. and navigate to your
html document
• Or with Brackets, use live-view (sideways lightning bolt)

HTML Details 1
• Headings, <h1> …. <h6>
• 6 different levels, appropriately used to section content
• Cannot nest headings in each other, like <h1><h2></h2></h1>, that is bad
• How to use:
<h1>Favorite Foods</h1>
<h2>Korean Food</h2>
<p>Korean food is awesome!</p>
<h2>Thai Food</h2>
<p>Thai food is also awesome!</p>

HTML Details 2
•Paragraph, <p>
• Most common/general text element
• Automatically includes margins (spacing) between paragraphs
•Line break, <br>
• Separates lines of text
• Can be placed in a <p> element
<p>The following sentence is true.<br> The previous sentence is
false.</p> Output:
The following sentence is true.
The previous sentence is false.

HTML Details 3
• Anchor (link), <a>
• Used to create hyperlink to separate content
• Must declare ‘href’ attribute with value as destination
•Destination can be URL (http://www.google.com/) or a relative
destination (doc2.html)
• Link text enclosed in element
•<a href=“http://www.google.com/”>This link goes to Google.</a>
•<a href=“doc2.html”>This link goes to doc2</a>

HTML Details 4
• Blocks, <div>
• Used to separate different sections of an html doc
• You can nest as many as these within each other as you want, but keep in mind to close each one!
• You can also set id’s to them to set them apart (useful for CSS)
<div id=“tasty_delicious_food”></div>
<div id=“Food”>
<div id = “more_food”>
<div id = “even_more_food”>
</div>
</div>
</div>

HTML Details 5
• Image, <img>
• Used to input images into the doc
• You can specify width and height through the tag
• Width & height are both in measured in pixels
• The <img> doesn’t have a closing tag
<img src=“penguinsFlying.jpg” >
<img src=“moreFlyingStuff.jpg” width=“100” height=“100”>

HTML Details 6
•Lists
• <ul> - unordered lists aka bullet lists
• <ol> - ordered lists aka numbered lists
• <li> - these will be the individual points within each list
<ul>
<li>Birds</li>
<li>Penguins</li> </ul>
<ol>
<li>Fuzzy Creatures</li>
<li>Pandas</li> </ol>
Output:
• Birds
• Penguins
1. Fuzzy Creatures
2. Pandas

Hands-On Part 1
Create a VERY basic HTML website that includes:
1. At least one picture
2. A proper title (for the webpage)
3. A few sentences (in bullet or numbered points) about yourself
4. Anything else you want
You have 5 minutes. If you are done or need
help, raise your hand.

HTML Details 7
•Tables, <table>
• Are used to display data in a table-like fashion
• If you don’t specify a border, it’ll display with no borders
<table border = “1”>
<tr>
<td>Blah</td>
</tr>
<tr>
<td>Blah again</td>
</tr>
</table>

HTML 5
• Cool new HTML version that includes:
• <video> is used to embed a YouTube-esque video player in your website
• Supported video formats include MP4, Ogg, and WebM
<video src="Ep. 35 - The Tales of Ba Sing Se.mp4" controls>
Your browser does not support the video element.
</video>
• <audio> is used to embed an audio player in your website
• Supported audio formats include MP3, Wav, and Ogg
<audio src="leaves.mp3" controls>
Your browser does not support the audio element.
</audio>

<header>
<nav>

</nav>
</header>
<section>
<h1></h1>
<p></p>
</section>
<footer>
© 2015 MV HACKS
</footer>

What is CSS?
• CSS stands for Cascade Style Sheets
• CSS allows you to style your webpages by matching the
rules with HTML tags
• This is were <div> id’s come in handy!

How to Incorporate CSS
1. Make an external CSS spreadsheet (style.css)
◦ Add with <link rel = “stylesheet” type=“text/css” href=“style.css”>
◦ Must be in the <head> section!
◦ CSS file must be in same folder as HTML
2. Internal CSS
◦ Put everything in between <style> </style> elements
◦ Again, must be in the <head> section
3. Inline Stylesheet
◦ Manually write style=“”
◦ Like: <p style=“color: # 421c52;”> Yo! </p>

Some Syntax
body {
background: #ffffff;
font-size: 16px;
}
div#css_lessons {
width: 100%;
height: 960px;
background: #421c52;
}
Whatever is in the {} is what you are modifying
If you gave an ID, then you have to use #Idname
selector
If you have a class, then the .classname selector
Generally, most things like font-size work in the
syntax ->
nameofRule:

CSS Selectors 1
• Tag
• Use element name, applies to all elements of that type in the document
p { color: blue; }
• Class
• Use class name, applies to all elements of that class in the document
.subtext { font-weight: bold; }
• ID
• Use id name, applies to only element with specified id
#key { font-size: 28px; }

CSS Selectors 2
• You can group selectors together in the same CSS rule
• Enclosed properties apply to all selected elements
/* Applies to all paragraph elements, and heading 1s with id ‘title’ */
p, h1#title {
font-style: italic;
}

CSS Properties 1
• Text properties
• Font-family
• Font-style
• Font-size
• Font-weight
• Color
p {
font-weight: bold;
font-style: italic;
font-size: 20px;
font-family: serif;
color: #666666;
}
/* All paragraphs are now bold, italic, 20px large, serif font, and gray */

CSS Properties 2
•Background properties
• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position
body {
background-image: url(“background.png”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
/* Sets body’s background image as fixed at
the top of the page */

CSS Positioning
• Margin
• Space surrounding element
• Border
• Element border
• Padding
• Space surrounding element content

CSS Positioning 1
•Margin:
• Clears a space around your element
• Imagine there’s a border around it, margin clears
everything outside of it
• Usable one of two ways: long-hand way or short-hand
way
/*creates a margin above, right, below, left – shorthand*/
div#Hacks {
margin: 5px 6px 7px 8px;
}
/*creates a margin above,right, below, left – longhand*/
div#Hacks {
margin-top: 5px;
margin-right: 6px;
margin-bottom: 7px;
margin-left: 8px;
}

CSS Positioning 2
• Margins – a useful trick for aligning the element into the center of the page
/*centers an element into the center of the page*/
div#pieText {
margin: 0 auto;
}
• Why does this work?
• The 0 tells the browser to set the top and bottom margins to 0
• The auto tells the browser to split up the left and right evenly so the element is centered

CSS Positioning 3
•Padding:
• Clears a space around the content within the
element
• Imagine a box around the element, padding
applies to everything within the border
/*creates padding above, right, below, left –
shorthand*/
p {
padding: 5px 6px 7px 8px;
}
/*creates padding above, right, below, left –
longhand*/
p {
padding-top: 5px;
padding-right: 6px;
padding-bottom: 7px;
padding-left: 8px;
}

CSS Positioning 4
• Floating
• Allow you to float an element left or right
• Great for layouts and images
*Float to the left*/
div#pieImage {
float: left;
}
/*Float to the right*/
div#pieImage {
float: right;
}

Hands-On Part 2
Take your previous HTML website and using CSS,
1. Add at least 1 class and 1 ID and style them
2. Style the background (colors, designs, etc.)
3. Style the sentences you wrote (colors, fonts, etc.)
4. Challenge: put some padding on the image and center it
You have 5 minutes. If you are done or need
help, raise your hand.

Basics of Front End Web Dev PowerPoint

In this document

More Related Content

What's hot

Viewers also liked

Similar to Basics of Front End Web Dev PowerPoint

Basics of Front End Web Dev PowerPoint