Web Design SIG

Sept 2016 - June 2017

Welcome

SIG Leader: Matt Ryan

https://mattryan.co | [email protected]

Who am I and why am I up here?

  • 40+ years in IT
    • Beginning with software and now returning to it
    • Freelance web developer and business owner
  • Emphasis on developer as opposed to designer
    • Aren't we all a little bit of a designer
  • Anxious to learn
    • Ready to learn with someone
  • Asked and didn't say 'no' fast enough ?!?

Initial Plan for SIG

  • SIG =/= Class
  • Here to learn from each other
  • Become aware of different approaches
  • Discuss ideas
  • Offer feedback to each other

Intro to Bootstrap

  • what it is
  • why use it
  • what can you do with it
  • where to get it
  • how to use it
Bootstrap Introductory Page
Fig.1 - http://getbootstrap.com

Get it & Use It

  • Link to CDN or Content delivery network

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css">
  • Download and Store Locally - Your Own Copy
    • Bootstrap files in your web server or local computer
      • 
<link rel="stylesheet" href="css/reveal.css">
    • Put bootstrap into same directory tree as your index.html

Get Started

  • Basic HTML - index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jumbotron Template for Bootstrap</title>
</head>
<body>
<h1 class="display-class-3">Hello, WebDes SIG!</h1>
</body>
</html>
Page In Progress - 1

Add Navigation Bar


<nav class="navbar navbar-inverse navbar-fixed-top">
	<a class="navbar-brand" href="#">Project name</a>
	<ul class="nav navbar-nav">
		<li class="nav-item active">
		<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
		</li>
		<li class="nav-item">
		<a class="nav-link" href="#">About</a>
		</li>
		<li class="nav-item">
		<a class="nav-link" href="#">Contact</a>
		</li>
	</ul>
</nav>
Page In Progress - 2

Message | Jumbotron | Button

  • Add main container
  • Add content
  • Add call to action, aka button

    <div class="jumbotron">
      <div class="container">
        <h1 class="display-3">Hello, WebDes SIG!</h1>
        <p>This is a template for a simple marketing or informational website.
        It includes a large callout called a jumbotron and three supporting pieces
        of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#"
        role="button">Learn more »</a></p>
      </div>
    </div>
Page In Progress - 3

Add Featured Content

  • Add container
  • Add row element
  • Add content and button

<div class="container">
	<div class="row">
		<div class="col-md-4">
			<h2>Heading</h2>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
			tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
			massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
			Donec sed odio dui. </p>
			<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
		</div>
	</div>
</div>
Page In Progress - 4

Rest of Content Row


<div class="col-md-4">
	<h2>Heading 2</h2>
	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
	tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
	massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
	Donec sed odio dui. </p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
	<h2>Heading 3</h2>
	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
	tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
	massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
	Donec sed odio dui. </p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
Page In Progress - 5

Wrap It Up


<hr>
<footer>
	<p>© PACS Ltd. 2016</p>
</footer>
Page Done

Knock Your Socks Off Resources

codeofaninja.com/2014/05/ bootstrap-tutorial-beginners-step-step.html

taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/

Next Time We Get Together

Look at grid system

Check out responsiveness

Lingering Thoughts


anyone?
    anyone?

Thanks!

Matt Ryan

https://mattryan.co · [email protected] || @MattRy

Technology Setup

  • Windows 10 laptop
  • Desktop Server for Windows
    • Provides local web server, Apache, MySql, PHP
  • reveal.js for web based presentation (running locally)
  • Sublime Text 3 as text editor