WEEK | MONDAY & TUESDAY | WEDNESDAY & THURSDAY |
---|---|---|
1 | DAY 1 | DAY 2 |
Introductions What is the Internet/the cloud? What is HTML & CSS how they work together What is a browser vs search engine Open & Closed Carets or Tags < > < /> Codepen.io CODE PEN CODING |
CODE PEN CODING: Clean coding or Nesting HTML & CSS syntax Build a micro page, blog style Pixels as a unit of measurement © and other HTML entities Why .io? input / output Resources like w3schools.org |
|
2 | DAY 3 | DAY 4 |
CODE PEN CODING: Building a mini website including navigation Color theory HEX, RGB & RGBA JPG vs PNG vs GIF vs SVG and their differences How to pronounce GIF - Solved! Branding and design best practices |
Cloud 9 - Plan A http://www.c9.io: Learn local & remote directory structure and organization Create Home Page Wire Frame What are IDEs? |
|
3 | DAY 5 | DAY 6 |
Cloud 9 - Plan B Photo shoot - Plan A Finish coding our Home page Github.com basics. |
Photo shoot - Plan B Inline vs Block Level elements Finish coding our Home page |
|
4 | DAY 7 | DAY 8 |
Photoshop Editing: Optimizing images for web. Creative Commons: creativecommons.org Royalty Free Finish Home page and copy Understanding fonts What is Serif & Sans Serif? |
Create About & Contact Pages Write our CSS content /* homework - maybe final */ |
|
5 | DAY 9 | DAY 10 |
Create About & Contact Pages Write our CSS content Add custom fonts - Plan A Possibly learn how to add audio & video files |
Embed Day: Add a YouTube video, Google map & contact form Finish final CSS Add custom fonts - Plan B Add Google Analytics /* homework */ |
|
6 | DAY 11 | DAY 12 |
Showcase Your Web Projects 7pm - 8pm | PIZZA PARTY! and Code :-) |
This is a basic example of the code students will learn to write.
<!doctype html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<main>
<section>
<article>
<h1>This is a heading tag or element.</h1>
<p>This is a paragraph tag or element.</p>
</article>
</section>
</main>
</body>
</html>
<!-- How the text is indented in HTML is important. -->
This is an example of the type of styles students will learn how to write.
p {padding:10px; margin:10px;}
.blackText {color:#000000; font-size:18px; font-weight:700;}
/* CSS can be written in the above sytnax or the syntax below. */
p {
padding:10px;
margin:10px;
}
.blackText {
color:#000000;
font-size:18px;
font-weight:700;
}
URLs and URLs in angle brackets will automatically get turned into links. http://www.geekwiseacademy.com or http://www.geekwiseacademy.com.
Click the video below to watch on YouTube.
Blockquotes in Github look very clean and cool. This line is part of the same Github text quote.
Quote break.
I'm sure I'll create a secondary Reposotory (Repo) soon.