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


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

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


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 [email protected]

$ 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


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

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

Technology

Programming Lecture 1st