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

Client and server

Landing page is where visitors come first
• You can let people know a product not reliesed
• Very easy to create
• Example landing page follows

Get a landing page template
• Search “Bootstrap onepage” and click the top
• Find “Landing page” and go.
• Download a source code
• Open index.html

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

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

Get an editor (Sublime Text3)

Make a sample html 1 – simple.html

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

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

Grid system

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.

Sample 3: Responsive - Edit in body

Sample 4: border visible – add in header
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

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>

Sample5: four columns

Sample 5 should be like

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.

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

Install GitHub if you are on Windows
• http://qiita.com/taipon_rock/items/632c117220e57d555099

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.

Create GItHub account

Create a new repository 1 - Click “+”

Create a new repository 2 - Create a repo

Create a new repository 3 - Copy URL

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

Publish GitHub Pages 1
• You can show a page you created for free
• Static only! Script does not run on GitHub Pages.

Try cloning a repository!
$ git clone <URL>

That’s all, folks. Here is citations
• http://getbootstrap.com/getting-started
• http://bootstrap-sass.happyfuncorp.com/bootstrap-
sass/layout/README.html

Programming Lecture 1st

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to Programming Lecture 1st

Similar to Programming Lecture 1st (20)

More from Naoki Watanabe

More from Naoki Watanabe (12)

Recently uploaded

Recently uploaded (20)

Programming Lecture 1st