css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
  <!-- BOOTSTRAP NAVBAR -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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="#"><i class="fas fa-code"></i> Matt Dolan | Developer</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>

      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <header>
    <div class="container-fluid bg">
      <div class="row">
        <div class="col-lg-12">
          <div id="content">
            <h1>Matt Dolan | Developer</h1>
            <p class="sub">Front-End + Back-End = &lt;Me&gt; Fullstack Developer</p>
            <hr>

            <a href="https://twitter.com/mdolancode" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
            <a href="https://github.com/MDolanCode" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-github fa-2x"></i></a>
            <a href="https://www.linkedin.com/" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
            <a href="https://www.freecodecamp.org/mdolancode" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-free-code-camp fa-2x"></i></a>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- ABOUT SECTION -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-xs-12">
        <h2 id="about">About</h2>

        <p>
          &lt;Hello World!&gt; I am Matt, a 46 year old man who has decided to embark on the journey of becoming a self-taught developer. I am married with three young daughters and currently work two jobs. A full-time job in education and a part-time job in customer
          service for a tech company. One day I realized my life was going by me without having time for my family and so my search began for something better for my family, and myself. I first started out in e-commerce, but after about a year of doing
          that I felt I didn’t want to sell other people’s products. As a musician and self-taught "hobbiest" music producer I spent lots of my free time creating music on my computer and felt at home there. In late January 2018 after some revelations
          in my current role as a customer service representative in the tech company I work for, I felt as though a career in technology would suit me best because I have a passion for it and the income I could potentially earn, so I started my research
          as to what I would do.
        </p>
  
        <p>In my search I was looking at IT or software development. I checked out the local technology community college BCIT and was looking at the one and two year programs. Although they looked really good, the cost associated with taking those programs
          were high and not feasible for me and my family at this time. Next I looked at coding bootcamps such as Red Academy, Lighthouse Labs, and Brain Station. Although also good they too were too much for us to handle financially. So, then I looked
          at online options such as Team Treehouse, freeCodeCamp, Codecadeny, Udacity, and Udemy. I did a couple of exercises on Codecademy, then the first couple exercises on freeCodeCamp, but then signed up for the free 7 day trial at Team Treehouse
          and I liked it. For the next three weeks I went through courses on Team Treehouse, but realized there were not any official projects to work on unless you did the tech-degree, so I started to combine my learning from Team Treehouse with the
          $25 monthly subscription plus the coding challenges and projects from freeCodeCamp. On freeCodeCamp I made it to the the first basic front-end developer project, the Tribute Page and I did mine on Bob Marley. It was fun! I received positive
          and specific feedback on how I could improve my page which I implemented. Then I came to a roadblock when it came to the Personal Portfolio Webpage and I needed to learn more. I turned back to Team Treehouse to learn more, but I felt like it
          was missing something which was the complete package at that price range.
        </p>

        <p>I started to explore other online options such at Udacity, Udemy and more in-depth courses at Team Treehouse. Udacity offers a Fullstack nano-degree program with mentoring, potential job placement, feedback, projects and more. It is also backed
          by Google and Github, so it looked attractive, but when I tried the first couple of videos it didn’t feel like is was what I wanted. Plus the price was steep at $200 US dollars per month with 6 months to complete, so I moved on. Team Treehouse
          offered a similar thing as Udacity, but it is called a tech-degree instead and was a minimum of 3 months at $200 US dollars. Then I remembered one of my colleagues at the tech company I work for mentioned Udemy, so I did some research and came
          across the Web Developer Bootcamp by Colt Steele. This course has everything you need to learn how to become a Fullstack Web Developer. It takes you from beginner to developer and it teaches you both the front and back end. I have finished the
          HTML, CSS3, and Bootstrap 3 modules and I am enjoying it very much. It has everything for me, code alongs, projects, challenges, and Colt is a very good instructor too. I am not even half way through the course yet, but I am feeling more confident
          with my skills and decided to give another shot at making my portfolio webpage again for freeCodeCamp. The price was also great! This course normally costs $205 AND you get to keep everything plus it gets frequently updated, but I found a coupon
          using the Chrome Extension Honey and it gave it to me for only $12.99! You can often find it also on sale for $14.99 and the great thing is that is has a 30 day money back guarantee. Now you are probably thinking well it must be to good too
          be true. Well I will tell you Colt’s course has had over 67,000 reviews and a rating of 4.7/5, and when I saw that I had to take the chance and I am happy I did. Like I said I am not half way through yet, but I am loving what I am learning and
          look forward to the rest of the course. Between Udemy and freeCodeCamp I feel like I am ready to take on the challenge of becoming a Fullstack Developer and I hope to inspire others to live out their dreams too. Now I know this isn’t your normal
          “About” page, but I wanted to give something to those who are maybe looking for a course to help them learn like I was and I hope this helps them. Thank you for taking the time to look at my portfolio website. :)
        </p>


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

        <div class="row">
          <div class="col-lg-6 skills">
            <h3>Skills</h3>
            <h4>Non-Human Languages:</h4>
            <ul>
              <li>HTML5, CSS3</li>
            </ul>
            <h4>FrameWorks:</h4>
            <ul>
              <li>Bootstrap 3</li>
            </ul>
            <h4>Human Languages:</h4>
            <ul>
              <li>English, Japanese</li>
            </ul>
          </div>
          <div class="col-lg-6 skills">
            <h3>Education</h3>
            <h4>Current Courses</h4>
            <ul>
              <li>Udemy: Web Developer Bootcamp; Fullstack - Colt Steele</li>
              <li>freeCodeCamp: Front-End Developer </li>
            </ul>
            <h4>Completed Courses</h4>
            <ul>
              <li>Team Treehouse: Digital Literacy Track, 2018</li>
              <li>Team Treehouse: How to Make a Website, 2018</li>
            </ul>
            <h4>Other Resources</h4>
            <ul>
              <li>Team Treehouse</li>
            </ul>

          </div>
        </div>
      </div>
    </div>
    <!-- PORTFOLIO SECTION -->
    <div>
      <h2 id="portfolio">Portfolio</h2>
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://gdurl.com/S5uC" alt="Start Up Webpage">
            <p class="description">Start Up Webpage</p>
          </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://gdurl.com/5FXT" alt="Photography Webpage">
            <p class="description">Photography Webpage</p>
          </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="http://gdurl.com/Uo7V" alt="Start Up Webpage">
            <p class="description">Musician Tribute Webpage</p>
          </div>
        </div>

        <!-- <div class="col-lg-4 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=527bc5d7e466efd5ce8a98c311728fbd&auto=format&fit=crop&w=1130&q=80" alt="Start Up Webpage">
          </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=527bc5d7e466efd5ce8a98c311728fbd&auto=format&fit=crop&w=1130&q=80" alt="Start Up Webpage">
          </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=527bc5d7e466efd5ce8a98c311728fbd&auto=format&fit=crop&w=1130&q=80" alt="Start Up Webpage">
          </div>
        </div> -->

      </div>
    </div>
    <!-- CONTACT SECTION -->
    <div class="Kontakt">
      <h2 id="contact">Contact</h2>
      <div class="row">
        <div class="col-lg-6 ">
          <img src="http://gdurl.com/SGzh" class="img-rounded img-responsive" alt="Photo of Matt Dolan">
        </div>


        <div class="col-lg-6 ">
          <h3>Matt Dolan</h3>
          <p>Phone: 778-322-8135</p>
          <p>Email: mdolan.code@gmail.com</p>
          <p>Address: 404 43rd Avenue East, Vancouver, Canada</p>
          <a href="https://twitter.com/mdolancode" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
          <a href="https://github.com/MDolanCode" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-github fa-2x"></i></a>
          <a href="https://www.linkedin.com/" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
          <a href="https://www.freecodecamp.org/mdolancode" class="btn btn-default btn-sm" role="button" target="_blank"><i class="fab fa-free-code-camp fa-2x"></i></a>
        </div>
      </div>

    </div>

    <footer>&copy; 2018 Matt Dolan</footer>

  </div>

  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
            
          
!
            
              body {
  color: #554659;
  background-color: #f8f8f8;
  font-family: 'Roboto Slab', serif;
}

.navbar {
  margin: 0;
}

.bg {
  background: url(https://images.unsplash.com/photo-1505487985217-c1f95816212d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6491055a75d8ffa83dd072e10ac557a8&auto=format&fit=crop&w=1600&q=80);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#content {
  text-align: center;
  padding-top: 35%;
  padding-bottom: 10%;
}

#about, #portfolio, #contact, .skills {
  padding-top: 65px;
}

h1, h2, h3, h4 {
  font-family: 'Raleway', sans-serif;
}

h1 {
  font-weight: 700;
  font-size: 38px;
}

.sub {
  font-size: 15px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 15px;
}

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 400px;
    max-width: 90%;
}

 .fa-twitter {
  color: #554659;
}
 .fa-twitter, .fa-github, .fa-linkedin, .fa-free-code-camp {
  color: #554659;
}
 .fa-twitter {
  color: #554659;
}
 .fa-twitter {
  color: #554659;
}

.description {
  text-align: center;
}

.Kontakt {
  margin-bottom: 5%;
}

footer {
  text-align: center;
  margin-bottom: 5%;
}

/* font-family: 'Raleway', sans-serif; */
/* font-family: 'Roboto Slab', serif; */

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console