programming lecture 1st

Entrepreneurship Open School WEB seminar #1- Bootstrap and GitHub -

Student in 2012

Naoki Watanabe

Saturday, May 12, 2017

Self Introduction

• 2016-present works for IT company

• 2014-2016 studied elementary particle in the Univ. of Tokyo

• 2010-2014 studied physics in the Univ. of Tokyo

• Hobby• Reading a book• Writing an article• Development

• Goal• Be free financially, mentally and technologically

Saturday, May 12, 2017 Entrepreneurship open school web seminar 2

Agenda

1. Understand how the Internet works

2. Make a responsive landing page with Bootstrap template

3. Use GitHub

Saturday, May 12, 2017 Entrepreneurship open school web seminar 3

Client and server

Saturday, May 12, 2017 Entrepreneurship open school web seminar 4

Saturday, May 12, 2017 Entrepreneurship open school web seminar 5

Landing page is where visitors come first

• You can let people know a product not reliesed

• Very easy to create

• Example landing page follows

Saturday, May 12, 2017 Entrepreneurship open school web seminar 6

Saturday, May 12, 2017 Entrepreneurship open school web seminar 7

Get a landing page template

• Search “Bootstrap onepage” and click the top

• Find “Landing page” and go.

• Download a source code

• Open index.html

Saturday, May 12, 2017 Entrepreneurship open school web seminar 8

To know html and CSS

• HTML contains text, img, checkbox, heading ….

• CSS contains border, padding, color, font ….

• To know easily, rename css folder to something and open index.html

Saturday, May 12, 2017 Entrepreneurship open school web seminar 9

Bootstrap

• Bootstrap is a UI framework published by Twitter.

• First version was in 2011 and is still updated.

• 3.4% of the entire webpages are powered by bootstrap.

• Cross browser compatibility

• Responsive for smartphone and PC

Saturday, May 12, 2017 Entrepreneurship open school web seminar 10

Get an editor (Sublime Text3)

Saturday, May 12, 2017 Entrepreneurship open school web seminar 11

Make a sample html 1 – simple.html

Saturday, May 12, 2017 Entrepreneurship open school web seminar 12

Copy bootstrap link

• Go to http://getbootstrap.com/getting-started/

• Copy

Saturday, May 12, 2017 Entrepreneurship open school web seminar 13

Sample HTML 2 – add bootstrap in header

• Add <link rel…> in header

• Add <meta name="viewport" content="width=device-width, initial-scale=1"> in header

Saturday, May 12, 2017 Entrepreneurship open school web seminar 14

Grid system

Saturday, May 12, 2017 Entrepreneurship open school web seminar 15

How to write css class in html

• class=“col-{size}-{number of columns}

• Ex) class=“col-md-3”

• lg: width>=1200px. Ex. Desktop.

• md: width>=992px. Ex. Desktop.

• sm: width>=768px. Tablet.

• xs: width<768px. Phone.

Saturday, May 12, 2017 Entrepreneurship open school web seminar 16

Sample 3: Responsive - Edit in body

Saturday, May 12, 2017 Entrepreneurship open school web seminar 17

Sample 4: border visible – add in header

Saturday, May 12, 2017 Entrepreneurship open school web seminar 18

Change typos 8 and 4 to 12 as.col-xs-12 col-md-6.col-sx-12 col-md-6↓

Q. 1 column for smartphone (xs),4 columns for desktop (md)?

• 3 minutes

Saturday, May 12, 2017 Entrepreneurship open school web seminar 19

Answer

<div class=“row”>

<div class="col-xs-12 col-md-3">A</div>

<div class="col-xs-12 col-md-3">B</div>

<div class="col-xs-12 col-md-3">C</div>

<div class="col-xs-12 col-md-3">D</div>

</div>

Saturday, May 12, 2017 Entrepreneurship open school web seminar 20

Sample5: four columns

Saturday, May 12, 2017 Entrepreneurship open school web seminar 21

Sample 5 should be like

Saturday, May 12, 2017 Entrepreneurship open school web seminar 22

Edit a bootstrap template

You will edit in

• <title>…</title>

• <h1>…</h1>

• <h2>…</h2>

• <p>…</p>

• Download a photo to img folder and change path in html <img src=“img/{filename}”>

I’ll show you what I edited in the next slide.

Saturday, May 12, 2017 Entrepreneurship open school web seminar 23

Saturday, May 12, 2017 Entrepreneurship open school web seminar 24

Saturday, May 12, 2017 Entrepreneurship open school web seminar 25

Saturday, May 12, 2017 Entrepreneurship open school web seminar 26

Next, upload your app on GitHub.For a windows user, install GitHub now.

Saturday, May 12, 2017 Entrepreneurship open school web seminar 27

Install GitHub if you are on Windows

• http://qiita.com/taipon_rock/items/632c117220e57d555099

Saturday, May 12, 2017 Entrepreneurship open school web seminar 29

What is Git?

• Git is Version Control System (VCS)

• You can share a code and track a history.

• Some services like GitHub, GitLab provides Git.

Saturday, May 12, 2017 Entrepreneurship open school web seminar 30

Create GItHub account

Saturday, May 12, 2017 Entrepreneurship open school web seminar 31

Create a new repository 1 - Click “+”

Saturday, May 12, 2017 Entrepreneurship open school web seminar 32

Create a new repository 2 - Create a repo

Saturday, May 12, 2017 Entrepreneurship open school web seminar 33

Create a new repository 3 - Copy URL

Saturday, May 12, 2017 Entrepreneurship open school web seminar 34

Upload to GitHub

$ cd /path/to/folder/where/your/file/is/located

$ git config –global user.email you@example.com

$ git config –global user.name “Your Name”

$ git init

$ git add sample.html

$ git commit –m “my first commit”

$ git remote add origin https://github.com/{your_id}/{repository_name}.git

$ git push origin master

Saturday, May 12, 2017 Entrepreneurship open school web seminar 35

Publish GitHub Pages 1

• You can show a page you created for free

• Static only! Script does not run on GitHub Pages.

Saturday, May 12, 2017 Entrepreneurship open school web seminar 36

Publish GitHub Pages 2

Saturday, May 12, 2017 Entrepreneurship open school web seminar 37

Publish GitHub Pages 3

Saturday, May 12, 2017 Entrepreneurship open school web seminar 38

Try cloning a repository!

$ git clone <URL>

Saturday, May 12, 2017 Entrepreneurship open school web seminar 39

That’s all, folks. Here is citations

• http://getbootstrap.com/getting-started

• http://bootstrap-sass.happyfuncorp.com/bootstrap-sass/layout/README.html

Saturday, May 12, 2017 Entrepreneurship open school web seminar 40