gdi

Create a responsive resume using Twitter Bootstrap

Welcome!

Wifi Info

Network:

Password:


Download workshop files

Please download workshop files at:
http://girldevelopit.github.io/gdi-featured-intermediate-html-css/workshop-files.zip

Thanks to our host:

Class notes

All slides are available at:
http://girldevelopit.github.io/gdi-featured-intermediate-html-css/

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Thank you to our Teaching Assistants today

About your Instructor

Donovan Brown

  • Attended ITT-Technical Institute Troy Mi Graduated with an Associate's of Applied Scienece Degree in 2007.
  • CompTIA A+ Certified 2010 with 9+ Computer Support Experiance.
  • First Tech Internship at "YOUR Center".
  • Atteding Grand Circus's 8 Week Android Bootcamp.
  • Developing Websites for 3 years.

About your Instructor

Donovan Brown

Big Hobby: Playing Video Games

Twitter: @browncdonovan

Email: browncdonovan@gmail.com

Now it's all about you!

  • Tell us who you are.
  • What do you hope to get out of this class?
  • What your favorite game to play?

What we'll be covering in this class

  • We'll talk little bit about Twitter Bootstrap and it's features and other responsive framworks
  • Basics of Bootstrap and it's code
  • What features of Bootstrap we'll be using for the resume project
  • We'll begin development on the responsive resume project.

Workshop files

Workshop files

Last reminder to download the files for today's class!

  • We have provided a folder that contains sample images for you to use today. We encourage you to be creative so don't feel like you're restricted to these images
  • We've also included a blank index.html file for you to work from, as well as the final site for you to use as a reference if you get stuck.

Folder Structure

We've set up the folder structure for the site today to reflect common practices used.

We will be building a responsive resume website from scratch

What is Bootstrap (part 1)


  • Bootstrap is a free and open-source collection of tools for creating websites and web applications.
  • Originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter.
  • It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components and optional JavaScript extensions.
  • Bootstrap is a front end framework.
  • As of June 2015, it was the most-starred project on GitHub, with over 81,000 stars and more than 32,000 forks.

What is Bootstrap (part 2)


  • After a few months of development, many developers at Twitter began to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter's development team.
  • Since version 2.0 it supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).
  • Version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.
  • On April 23, 2015, Mark Otto announced Bootstrap 4 is in development.

Other Resposive frameworks

Twitter Bootstrap it's features and it's source code

http://getbootstrap.com/

Bootstrap Resume Project Features

  • Grid Systems
  • List stylings
  • Optional: Progress Bar Components
    • Optional: Labels
  • Alerts
  • Footer

Game Plan

  1. Build the project's structure using HTML
    • Explain Bootstrap's row and columns
    • Copy snippets of code from Bootstrap website
  2. Add styles using CSS

Enough talking! LET DEVELOP IT!!!

Copy template HTML Code in the "getting strated" in the "examples section" area of the Bootstrap Homepage and paste inside index.html

http://getbootstrap.com/

Header Section

            
                <title>ENTER YOUR NAME HERE's Online Resume</title>
                
                <link href="css/bootstrap.css" rel="stylesheet">
                
                <link href="css/style.css" rel="stylesheet">

Delete Navbar Section

            
                <nav class="navbar navbar-inverse navbar-fixed-top">
                	
                	
                	
                </nav>

Delete Container Section

           
                <div class="container">
                	<div class="starter-template">
                		
                		
                		
                	</div>
                </div>

Header section and profile image

           
            <section>
			  <div class="container container-main">
			    <img src="img/person.png" class="profile-img">
			    <header>
			    <h1>HELLO,<br> my name is <strong>*YOUR NAME HERE*</strong> and I am a *TITLE*</h1>
			    </header>
			    <img src="img/line.png" class="line">	
			  </section>	
			</div>

What are colums and rows in Bootstrap?

IMPORTAINT

Use the container div and warp row div inside container

      	  
	      	       <div class="container">
			  <div class="row">
			    
			    
			  </div>
			</div>

The structure of colums div

      	  
	      	       <div class="container">
			  <div class="row">
			    
			    <div class="col-md-4"></div>
			    <div class="col-md-4"></div>
			    <div class="col-md-4"></div>
			    
			  </div>		 
			</div>

Basic Structure of a Bootstrap Grid

      	  
	      	       <div class="container">
			  <div class="row">
			    <div class="col-md-8"></div>
			    <div class="col-md-4"></div>
			  </div>
			  <div class="row">
			    <div class="col-md-4"></div>
			    <div class="col-md-4"></div>
			    <div class="col-md-4"></div>
			  </div>
			  <div class="row">
			    <div class="col-md-6"></div> 
			    <div class="col-md-6"></div> 
			  </div>
			</div>

colums grid structure in bootstrap

creating rows for "About Me" and "Contact Info" sections

      	  
	      	</header>
	      	<img src="img/line.png" class="line">
		      <div class="row">
		         <div class="col-md-7">
		    	  ...	
		    	 </div>	
		    	 <div class="col-md-5">
		    	  ...	
		    	</div>		
		      </div>

Content for "About Me"

      	  
	      	<div class="col-md-7">
	    		  <h2>About Me</h2>
	    		  <p>ABOUT YOURSELF AND WHAT YOU DO... </p>
	    		</div>

Content for "Contact Info"

      	  
	    		<div class="col-md-5">
	    			<h2>Contact Info</h2>
	    			<ul class="contact-list">
	    				<li><img src="img/phone.png"> ENTER PHONE NUMBER</li>
	    				<li><img src="img/email.png"> ENTER EMAIL</li>
	    				<li><img src="img/twitter.png"> Twitter<span>ENTER TWITTER</span></li>
	    				<li><img src="img/github.png"> GitHub<span>ENTER GITHUB</span></li>	
	    			</ul>	
	    		</div>

Create a row and two columns for Education and Skills

      	  
	    	   <div class="row">
		         <div class="col-md-7">
		    	  ...	
		    	 </div>	
		    	 <div class="col-md-5">
		    	  ...	
		    	</div>		
		      </div>

Create h2 tags for Education and copy "Media Object" code under "Componets" from getbootstrap.com and paste it under h2 tags

http://getbootstrap.com/

      	  
	    		<div class="row">
		         <div class="col-md-7">
		         	
Education

		    	  		
		    	 </div>

Delete the following lines

      	  
	    		<div class="row">
		         <div class="col-md-7">
		         	<h2>Education</h2>
		    	  	<div class="media">
					  <div class="media-left">
					    <a href="#">
					      <img class="media-object" src="..." alt="...">
					    </a>
					  </div>
					  <div class="media-body">
					    <h4 class="media-heading">Media heading</h4>
					    ...
					  </div>
					</div>
		    	 </div>

Add the following information for Education

      	  
	    		<div class="row">
		         <div class="col-md-7">
		         	<h2>Education</h2>
		    	  	<div class="media">
					  <div class="media-left">
					    
					  </div>
					  <div class="media-body">
					    <h4 class="media-heading"></h4>
					    	<p></p>
					    	<p></p>
					  </div>
					</div>
		    	 </div>

Copy the following information for Education

      	  
	    		<div class="row">
		         <div class="col-md-7">
		         	<h2>Education</h2>
		    	  	<div class="media">
					  
					  </div>
					</div>
		    	 </div>

Paste content and add more information to education (Repeat last two steps 3 - 4 times)

      	  
	    		<div class="row">
		         <div class="col-md-7">
		         	<h2>Education</h2>
		    	  	<div class="media">
					  
					  </div>
					</div>
					
		    	 </div>

Option content for Skills: Progress bar or Labels

Progress bar: Copy Progress bar code under Componets, Progress Bar "With Label" from getbootstrap.com and paste in the following

http://getbootstrap.com/

      	  
	    	   <div class="row">
		         <div class="col-md-7">
		    	  	
		    	 </div>	
		    	 <div class="col-md-5">
		    	  	
		    	</div>		
		      </div>

Progress bar: Enter Skill name and level of proficiency for each set of skills

http://getbootstrap.com/

      	  
      	  	<h2>Programming Skills or Skills</h2>	
	    	   <div class="progress">
				  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: LEVEL OF SKILL;">
				    
				  </div>
				</div>
				<div class="progress">
				  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: LEVEL OF SKILL;">
				    
				  </div>
				</div>

Progress bar: Add "progress-bar-striped" class to div "progress-bar" class

      	  
				  <div class="progress-bar progress-bar-striped" ...>

Label: Create a unordered list give it a id of "skill-list"

http://getbootstrap.com/

      	  
	    	   <div class="row">
		         <div class="col-md-7">
		    	  	
		    	 </div>	
		    	 <div class="col-md-5">
		    	  	
		    	</div>		
		      </div>

Label: Create the following for each skill

      	  	
		    	 <div class="col-md-5">
		    	  	<ul class="skill-list">	
						<li class="tag"><h3><span class="label label-primary">NAME OF SKILL</span></h3></li>
						<li class="tag"><h3><span class="label label-primary">NAME OF SKILL</span></h3></li>
						<li...</li>
						<li...</li>
					</ul>	
		    	</div>

Create a row and two columns for Experiance and Services or Projects and add h3 tags

      	  
	    	   <div class="row">
		         <div class="col-md-7">
		         <h2>Experiance</h2>
		    	  ...	
		    	 </div>	
		    	 <div class="col-md-5">
		    	 <h2>Services or Projects</h2>
		    	  ...	
		    	</div>		
		      </div>

Copy Education Column and paste into col-md-7 and change content of the following

      	  
	    		<div class="row">
		         <div class="col-md-7">
		         <h2>Experiance</h2>
		         
		         	<h2>Education to Experiance</h2>
		    	  	<div class="media">
					  <div class="media-left">
					    
					  </div>
					  <div class="media-body">
					    <h4 class="media-heading"></h4>
					    	<p></p>
					    	<p></p>
					  </div>
					</div>
		    	 </div>

Inside of the second and third Experiance listings add the class "Secondary" inside the following

      	  
	    		
		    	  	<div class="media">
					  <div class="media-left">
					    
					  </div>
					  <div class="secondary">
					  <div class="media-body">
					    <h4 class="media-heading"></h4>
					    	<p></p>
					    	<p></p>
					  </div>
					</div>
		    	 </div>

Copy alert success and alret info code under Componets, Alerts from getbootstrap.com and paste in the following

      	  
	    	   <div class="row">
		         <div class="col-md-7">
		         <h2>Experiance</h2>
		    	  	
		    	 </div>	
		    	 <div class="col-md-5">
		    	 <h2>Services or Projects</h2>
		    	  	
		    	</div>		
		      </div>

Copy alert success and alret info code under Componets, Alerts from getbootstrap.com and paste and type in the following

http://getbootstrap.com/

      	  
      	  	<h2>Services or Project</h2>
	    	   <div class="alert alert-info" role="alert"> PROJECT OR SERVICE NAME </div>
               <div class="alert alert-info" role="alert"> PROJECT OR SERVICE NAME </div>

Copy "glyphicon glyphicon-ok" info code under Componets, Glyphicons from getbootstrap.com and paste or type in the following for all

      	  
      	  
	    	   <div class="alert alert-success" role="alert"><i class="PASTE OR TYPE HERE"></i> PROJECT OR SERVICE NAME </div>

Create footer section outside the section div and create a containter div inside the footer tags

      	  
      	  
	    	     </section>
                </div>
              	
              	<footer>
              	   <div class="container">
                      <p>Copyright &/copy; 2015, All rights reserved</p> 
                   </div>
              	</footer>

HTML is Done! Celebration time!!!

No animated Gif on this slide.

But Congrats!

Our next step is to style the project with CSS

CSS Style for body

      		
      		body{
                padding-bottom:0px;
				font-family: 'Open Sans', Arial, Tahoma !important;
				color:#363636 !important; 
				background: #ededed !important; 
				font-size:16px !important ;
			}

CSS Style for h2

      		
      		h2{
				font-weight:700 !important;
				text-transform: uppercase !important;
				line-height:1.4em !important;
				font-size:1.5em !important;
			}

CSS Style for only h2 sub-header color

      		
      		.primary, strong, h2{
				color:#3b5a76 !important; 
			}

.container main

      		
      		.container-main{
				background:#fff;
				margin-top:80px;
				padding:0 30px 30px 30px;
				-moz-border-radius: 0px;
				-webkit-border-radius: 15px 15px 0px 0px;
				border-radius: 15px 15px 0px 0px; 
			}

Style for header and h1

      		
      		header{
				min-height: 100px;
				overflow: auto;
			}

			header h1{
				margin: 0;
				padding: 20px 0 0 0;
				font-size:2.2em;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: -1px;
				text-align:center;
				line-height:1.4em;
			}

profile image and line styles

      		
      		.profile-img{
				width:160px;
				display:block;
				margin:auto;
				margin-top: -80px;
			}

			.line{
				max-width:100%;
			}

Contact list styles

      		
      		.contact-list{
				padding: 0;
				margin: 0;
			}

			.contact-list li{
				list-style:none;
				font-weight:bold;
				line-height:3.2;
			}

			.contact-list span{
				display:block;
				margin:0;
				padding:0;
				line-height:0.1em;
				margin-left:37px;
				color:#ccc;
			}

Rows, media styles and skills list

      		
      		.row{
				margin-bottom:20px;
			}

			.media{
				background:#ededed !important; 
				padding:10px;
				border-radius : 15px;
			}

			/* for label option only */
			.skill-list .tag{
				list-style: none;
				display: inline-block;
			}

Content styles for Services or project section and year

      		
      		.alert{
				text-align: left;
			}

			/* for project links only */
			.alert a:link{
				float: right;
				text-decoration: none;
				color: #3c763d;
			}

			.year{
				float: right;
			}

And lastly styles for footer

      		
			footer{
				background:#3b5a76;
				color:#fff;
				text-align: center;
				padding-top:20px;
				padding-bottom:20px;
			}

THE END

BY Girl Develop It

Special thanks to: Hakim El Hattab / hakim.se

About your Instructor

Donovan Brown

Twitter: @browncdonovan

Email: browncdonovan@gmail.com