5-HTML Structure

Key Objectives

• To stub out the structure of an HTML page.

• To continue implementing Bootstrap for responsive design.

Video

Overview

In this module, we set up some raw HTML with Bootstrap to structure our page. It is easy to get overwhelmed by every single little detail, so we are taking an iterative approach to building the application out. Get some code stubbed out to structure the app. Don't spend too much time styling. It's guaranteed that this code will mutate over time. In other words, we are going to get a rough draft going for now.

Notes/Tips

• This section could possibly take a couple hours, depending on how picky you are and how organized you stay.

• You have to stay disciplined and not worry too much about how things look at this point. This is not time to burn on how a button is looking. Just get it in the code.

• Stay very organized. After adding some HTML with properly closed tags, click alt+shift+f or option+shift+f on Mac to tabify your HTML in Visual Studio Code.

• If you copy and paste, try stripping a chunk of code down to its rawest form. What are the bare essentials that you need? Doing this will teach you a lot about what's happening.

• If you don't know what something is, take 1-2 minutes to quickly Google what it's doing.

Steps

1. Watch the video.

2. Take a look at some of the code for each section.

3. Open your projects. Study the docs and write Bootstrap starter code for all of the major sections:

   • Navbar

     <!-- Navigation -->
     <!--Note that the text-uppercase will set the name in caps -->
     <nav class="navbar navbar-default text-uppercase" id="main-nav" role="navigation">
       <div class="container">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle text-uppercase bg-primary text-white rounded" data-toggle="collapse" data-target=".navbar-collapse"
                   aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="#">EFA Starter Template</a>
           </div>
           <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav navbar-right">
                   <li class="active">
                       <a href="#">Home</a>
                   </li>
                   <li class="active">
                       <a href="#about">About</a>
                   </li>
                   <li class="active">
                       <a href="#portfolio">Portfolio</a>
                   </li>
                   <li class="active">
                       <a href="#contact">Contact</a>
                   </li>
               </ul>
           </div>
       </div>
     </nav>

   • Header

     <!-- Header -->
     <header class="jumbotron text-center">
       <div class="container">
           <h1 class="jumbotron-heading">Coder Portfolio</h1>
           <p class="lead text-muted">Some text about how amazing and awesome we are.</p>
           <p>
               <a href="#" class="btn btn-primary">Press here for something.</a>
           </p>
       </div>
     </header>

   • Projects

     <!-- Portfolio -->
     <section>
       <div class="row">
           <h2 class="text-center text-uppercase text-white">Portfolio</h2>
           <div class="col-md-4">
               <div class="thumbnail">
                   <img src="assets/img/badge-blue.png" alt="">
                   <div class="text-center caption">
                       <h3>Portfolio Item #1</h3>
                       <p>Sub title</p>
                       <p>
                           <a href="#" class="btn btn-primary" role="button">Button</a>
                           <a href="#" class="btn btn-default" role="button">Button</a>
                       </p>
                   </div>
               </div>
           </div>
           <div class="col-md-4">
               <div class="thumbnail">
                   <img src="assets/img/badge-red.png" alt="">
                   <div class="text-center caption">
                       <h3>Portfolio Item #2</h3>
                       <p>Sub title</p>
                       <p>
                           <a href="#" class="btn btn-primary" role="button">Button</a>
                           <a href="#" class="btn btn-default" role="button">Button</a>
                       </p>
                   </div>
               </div>
           </div>
           <div class="col-md-4">
               <div class="thumbnail">
                   <img src="assets/img/badge-yellow.png" alt="">
                   <div class="text-center caption">
                       <h3>Portfolio Item #3</h3>
                       <p>Sub title</p>
                       <p>
                           <a href="#" class="btn btn-primary" role="button">Button</a>
                           <a href="#" class="btn btn-default" role="button">Button</a>
                       </p>
                   </div>
               </div>
           </div>
       </div>
     </section>

   • About

     <!-- About -->
     <section class="bg-primary text-white">
       <div class="container">
           <h2 class="text-center text-uppercase text-white">About</h2>
           <div class="row">
               <div class="col-lg-4">
                   <p class="lead">Use this to get started with talking about your abilities. Here you will showcase your work, share contact
                       information, attract employers, and get practice with front end development! let's have some fun!</p>
               </div>
               <div class="col-lg-4">
                   <p class="lead"> >Use this to get started with talking about your abilities. Here you will showcase your work, share contact
                       information, attract employers, and get practice with front end development! let's have some fun!</p>
               </div>
               <div class="col-lg-4">
                   <p class="lead"> >Use this to get started with talking about your abilities. Here you will showcase your work, share contact
                       information, attract employers, and get practice with front end development! let's have some fun!</p>
               </div>
           </div>
       </div>
     </section>

   • Contact

     <!-- Contact -->
     <section>
       <div class="container">
           <h2 class="text-center text-uppercase">Contact Me</h2>
           <div class="row">
               <form>
                   <div class="control-group">
                       <div class="form-group">
                           <label>Name</label>
                           <input class="form-control" id="name" type="text" placeholder="Name">
                       </div>
                   </div>
                   <div class="control-group">
                       <div class="form-group">
                           <label>Email Address</label>
                           <input class="form-control" id="email" type="email" placeholder="Email Address">
                       </div>
                   </div>
                   <div class="control-group">
                       <div class="form-group">
                           <label>Phone Number</label>
                           <input class="form-control" id="phone" type="tel" placeholder="Phone Number">
                       </div>
                   </div>
                   <div class="control-group">
                       <div class="form-group">
                           <label>Message</label>
                           <textarea class="form-control" id="message" rows="5" placeholder="Message"></textarea>
                       </div>
                   </div>
                   <div class="form-group">
                       <button type="submit" class="btn btn-primary">Send</button>
                   </div>
               </form>
           </div>
       </div>
     </section>

   • Footer

     <!-- FOOTER -->
     <footer class="bg-primary">
       <p class="float-right">
           <a href="#">Back to top</a>
       </p>
       <p>&copy; 2018 Developer Company, Inc. &middot;
           <a href="#">Privacy</a> &middot;
           <a href="#">Terms</a>
       </p>
     </footer>

   • Commit your code and push it to your GitHub repository when finished.

4. Go on to the next module.