Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add web outline #12

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
82 changes: 82 additions & 0 deletions web/README.md
Original file line number Diff line number Diff line change
@@ -1 +1,83 @@
# Web

## What you'll make
A very simple project showcase complete with its own comment section!

## What you'll learn
An introduction to:
HTML, CSS, Javascript, JQuery, your first web framework (Flask), Python (again Flask), a templating engine, working with databases, and deploying to Heroku!


## What you'll need

- A text editor
- Github, Git (Optional)

## Table of Contents

## Setup
A folder for your files to go in, and your favourite text editor (eg. Atom)

### I'm just starting
// Instructions for setting up the environment for a complete beginner (e.g. download the Arduino IDE)

Download the Atom text editor from https://atom.io/

### I've got some experience
// Instructions for intermediate learners (e.g. downloading certain libraries)

## Vocabulary
// Glossary of technical terms used in the lesson plan

- Servers, clients, front-end/back-end
- Server-side
- Client-side
- HTML, CSS, Javascript, PHP
- DOM
- dynamic vs static

### Quick Overview

#### How websites work
[just point form notes right now]
- HTML - structure
- CSS - styling
- JS - interactivity
- PHP (for example) - server-side logic
- server client model

## Instructions
// Step-by-step instructions for building the core MVP

1. <a href="part1.md">Install Git</a>
1. <a href="part1.md">Make a basic website with HTML</a>
2. <a href="part2.md">Add styles with CSS</a>
1. <a href="part1.md">Meet the Chrome DevTools Inspector</a>
3. <a href="part3.md">Lay out a list of elements with CSS</a>
4. <a href="part4.md">Adding interactivity with JS - make a button</a>
5. <a href="part5.md">Implementing server-side logic with PHP - make a form</a>
5. <a href="part5.md">(Security)</a>

## Next Steps
// Less specific descriptions of additional features the learners should implement on their own

- <a href="xyz.md">Create a landing page</a>
- <a href="xyz.md">Add animations</a>
- <a href="xyz.md">Make a scrolling menu bar</a>
- <a href="abc.md">Add post categories</a>
- <a href="abc.md">Create a "like" button</a>
- <a href="abc.md">List posts from one category only</a>

## Extend it further
// Bullet point ideas to inspire learners to extend & personalize their projects

- Add a carousel to display top posts
- Make it public with Heroku
- Save user data
- Make posts searchable
- Create user accounts
- Use a web framework

## Additional Resources
- For a fun CSS primer, check out http://flukeout.github.io/
- [Google Fonts](https://www.google.com/fonts)
10 changes: 10 additions & 0 deletions web/css_snapshot_1.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
body {
font-family: "Montserrat";
color: white;
background-image: url("http://kriswhitewrites.com/wp-content/uploads/2013/06/landscape-mountains-snow-sky.jpg");
}

.post p {
font-family: "Open Sans";
/*font-weight: 300;*/
}
Binary file added web/html_dissected.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions web/html_snapshot_0.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Tab Name</title>
</head>
<body>
<h1>My First Website Heading</h1>
<p>My first paragraph</p>
<div class="project">
<h2>Project 1</h2>
<p>My First Website</p>
</div>
<div class="project">
<h2>Project 2</h2>
<p>My Second Website</p>
</div>
<div class="project">
<h2>Project 3</h2>
<p>My Third Website</p>
</div>
</body>
</html>
28 changes: 28 additions & 0 deletions web/html_snapshot_1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!-- [Here's an example of what your HTML file should look like now.](html_snapshot_1.html) -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Tab Name</title>
<link rel="stylesheet" href="styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>My First Website Heading</h1>
<p>My first paragraph</p>
<div class="project">
<h2>Project 1</h2>
<p>My First Website</p>
</div>
<div class="project">
<h2>Project 2</h2>
<p>My Second Website</p>
</div>
<div class="project">
<h2>Project 3</h2>
<p>My Third Website</p>
</div>
</body>
</html>
33 changes: 33 additions & 0 deletions web/parts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// temporary file

### HyperText Markup Language (HTML)
Make your website outline (title, headings, a few words)

The Document Object Model

#### Tags
- `h1`, `a`, `div`, `span`, `p`, etc.

### Cascading Style Sheets (CSS)

#### The Basics
2016-ify all the things
- font, color, margin, padding
- [to be edited]

### Cascading Style Sheets - the CSSequel
because we never go out of style ♫

#### Lorem Ipsum
// Add in your own sample projects/articles/etc, or use our [xtreme hi-tech generator](lorem ipsum)
// also high-Q pictures and icons (glyphicons)

#### Layouts
- Grid
- List

### Interacting With User Input

#### Javascript
#### Forms
#### PHP
Loading