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!

Thank you to our Teaching Assistants today

About your Instructor

About your Instructor

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

• Explain Bootstrap's row and columns
• Copy snippets of code from Bootstrap website

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>
                <!-- Bootstrap core CSS -->
                <link href="css/bootstrap.css" rel="stylesheet">
                <!-- Custom styles for this template -->
                <link href="css/style.css" rel="stylesheet">
            
          

Delete Navbar Section

            
                <nav class="navbar navbar-inverse navbar-fixed-top">
                	<!--navbar code-->
                	<!--more navbar code -->
                	<!--and more navbar code-->
                </nav>
            
          

Delete Container Section

           
                <div class="container">
                	<div class="starter-template">
                		<!--navbar code-->
                		<!--more navbar code -->
                		<!--and more navbar code-->
                	</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">
			    <!-- colunms and content-->
			    <!-- another row with colums and content-->
			  </div>
			</div>
      	  
      	

The structure of colums div

      	  
	      	       <div class="container">
			  <div class="row">
			    <!-- colunms and content-->
			    <div class="col-md-4"><!-- content --></div>
			    <div class="col-md-4"><!-- content --></div>
			    <div class="col-md-4"><!-- content --></div>
			    <!-- colunms and content-->
			  </div>		 
			</div>
      	  
      	

Basic Structure of a Bootstrap Grid

      	  
	      	       <div class="container">
			  <div class="row"><!-- I am a row guys!!!-->
			    <div class="col-md-8"><!-- content --></div>
			    <div class="col-md-4"><!-- content --></div>
			  </div>
			  <div class="row"><!-- Me two!!!-->
			    <div class="col-md-4"><!-- content --></div>
			    <div class="col-md-4"><!-- content --></div>
			    <div class="col-md-4"><!-- content --></div>
			  </div>
			  <div class="row"><!-- Me three!!!-->
			    <div class="col-md-6"><!-- content --></div> 
			    <div class="col-md-6"><!-- content --></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"><!-- Education -->
		    	  ...	
		    	 </div>	
		    	 <div class="col-md-5"><!-- Skills -->
		    	  ...	
		    	</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 -->
		         	<h2>Education</h2>
		    	  	<!--Paste Media Object here-->	
		    	 </div>	
       
       

Delete the following lines

      	  
	    		<div class="row">
		         <div class="col-md-7"><!-- Education -->
		         	<h2>Education</h2>
		    	  	<div class="media">
					  <div class="media-left">
					    <a href="#"><!-- delete me -->
					      <img class="media-object" src="..." alt="..."><!-- delete me too-->
					    </a><!-- delete me three-->
					  </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"><!-- Education -->
		         	<h2>Education</h2>
		    	  	<div class="media">
					  <div class="media-left">
					   <!-- Year Completed your School, Collage or Class --> 
					  </div>
					  <div class="media-body">
					    <h4 class="media-heading"><!--Name of your School, Collage, or Class --></h4>
					    	<p><!-- Name of Diploma, Certificate, or Degree --></p>
					    	<p><!-- Other optional information --></p>
					  </div>
					</div>
		    	 </div>	
       
       

Copy the following information for Education

      	  
	    		<div class="row">
		         <div class="col-md-7"><!-- Education -->
		         	<h2>Education</h2>
		    	  	<div class="media"><!-- COPY FROM HERE -->
					  <!-- Education content-->
					  </div>
					</div><!--Media closing--><!-- TO HERE -->
		    	 </div>	
       
 	   

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

      	  
	    		<div class="row">
		         <div class="col-md-7"><!-- Education -->
		         	<h2>Education</h2>
		    	  	<div class="media">
					  <!-- Education content-->
					  </div>
					</div>
					<!-- PASTE HERE -->
		    	 </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"><!-- Education -->
		    	  <!-- I have Content already-->	
		    	 </div>	
		    	 <div class="col-md-5"><!-- Skills -->
		    	  <!-- PASTE HERE-->	
		    	</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;">
				    <!-- Name 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;">
				    <!-- Name 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"><!-- Education -->
		    	  <!-- I have Content already-->	
		    	 </div>	
		    	 <div class="col-md-5"><!-- Skills -->
		    	  <!-- ul id="skill-list" HERE-->	
		    	</div>		
		      </div>			
	     

Label: Create the following for each skill

      	  	
		    	 <div class="col-md-5"><!-- Skills -->
		    	  	<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"><!-- Experiance -->
		         <h2>Experiance</h2>
		    	  ...	
		    	 </div>	
		    	 <div class="col-md-5"><!-- Services -->
		    	 <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"><!-- Experiance -->
		         <h2>Experiance</h2>
		         <!-- PASTE HERE -->
		         	<h2>Education to Experiance</h2>
		    	  	<div class="media">
					  <div class="media-left">
					   <!-- Year Completed to Years employed --> 
					  </div>
					  <div class="media-body">
					    <h4 class="media-heading"><!--Name of your School to job title--></h4>
					    	<p><!-- Name of Diploma to Duties at Employer --></p>
					    	<p><!-- More Duties at Employer  --></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">
					   <!-- Years employed --> 
					  </div>
					  <div class="secondary"><!-- Secondary class -->
					  <div class="media-body">
					    <h4 class="media-heading"><!--Name of job title--></h4>
					    	<p><!-- Duties at Employer --></p>
					    	<p><!-- More Duties at Employer  --></p>
					  </div><!-- closed secondary class closing tag-->
					</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"><!-- Experiance -->
		         <h2>Experiance</h2>
		    	  <!-- I have Content already!-->	
		    	 </div>	
		    	 <div class="col-md-5"><!-- Services -->
		    	 <h2>Services or Projects</h2>
		    	  <!-- PASTE HERE-->	
		    	</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><!-- bye bye :( -->
                </div><!-- see you later? :( -->
              	
              	<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