-
iop-115.010 | Preparing Our Server | Lessons
1-
Lecture1.1
-
-
STEP-100
14-
Lecture2.1
-
Lecture2.2
-
Lecture2.3
-
Lecture2.4
-
Lecture2.5
-
Lecture2.6
-
Lecture2.7
-
Lecture2.8
-
Lecture2.9
-
Lecture2.10
-
Lecture2.11
-
Lecture2.12
-
Lecture2.13
-
Lecture2.14
-
-
STEP-101
8-
Lecture3.1
-
Lecture3.2
-
Lecture3.3
-
Lecture3.4
-
Lecture3.5
-
Lecture3.6
-
Lecture3.7
-
Lecture3.8
-
-
STEP-102
9-
Lecture4.1
-
Lecture4.2
-
Lecture4.3
-
Lecture4.4
-
Lecture4.5
-
Lecture4.6
-
Lecture4.7
-
Lecture4.8
-
Lecture4.9
-
-
STEP-103
7-
Lecture5.1
-
Lecture5.2
-
Lecture5.3
-
Lecture5.4
-
Lecture5.5
-
Lecture5.6
-
Lecture5.7
-
-
STEP-104
7-
Lecture6.1
-
Lecture6.2
-
Lecture6.3
-
Lecture6.4
-
Lecture6.5
-
Lecture6.6
-
Lecture6.7
-
-
STEP-105
5-
Lecture7.1
-
Lecture7.2
-
Lecture7.3
-
Lecture7.4
-
Lecture7.5
-
-
Challange
1-
Lecture8.1
-
-
STEP-106
4-
Lecture9.1
-
Lecture9.2
-
Lecture9.3
-
Lecture9.4
-
-
STEP-107 NOT READY
5-
Lecture10.1
-
Lecture10.2
-
Lecture10.3
-
Lecture10.4
-
Lecture10.5
-
-
STEP-108 NOT READY
4-
Lecture11.1
-
Lecture11.2
-
Lecture11.3
-
Lecture11.4
-
-
STEP-109 NOT READY
4-
Lecture12.1
-
Lecture12.2
-
Lecture12.3
-
Lecture12.4
-
-
STEP-110 NOT READY
4-
Lecture13.1
-
Lecture13.2
-
Lecture13.3
-
Lecture13.4
-
iop-100.0 | Building The Header | Exercise Assignment
In this video we create the header for our inside out project website.
Action Items to Complete
- Complete all steps completed in the video “inside out – STEP 100.0 | Building The Header”.
- 00:00 – Introduction
- 00:32 – view your current branch in Dreamweaver
- 01:14 – update code in head for site info.
- 01:42 – add your website link in comment
- 02:18 – meta viewport
- 02:40 – pause & code
- 02:47 – discuss colors created by Git in DW
- 03:12 – go grab header
- 03:44 – grab html code from bootsnipp
- 04:00 – paste html code from bootsnipp
- 05:09 – grab css code from bootsnipp
- 06:07 – create assets folder
- 06:18 – create the assets/css folder
- 06:22 – create assets/css/header-resize.css
- 06:56 – add author/site info to css file
- 07:49 – link header-resize.css in index.html
- 09:02 – grab js from bootsnipp
- 09:31 – create the assets/js folder
- 09:37 – create assets/js/header-resize.js
- 10:05 – paste code in assets/js/header-resize.js
- 10:33 – fix closing body & html tags
- 11:22 – link the header-resize.js in index.html
- 12:41 – do a Git add & commit
- 13:00 – git add
- 13:13 – git commit
- 14:46 – navigate to getbootstrap.com
- 14:51 – copy bootstrap cdn tags
- 15:12 – paste bootstrap js in bottom of body
- 16:07 – view working header
- 16:51 – opting out of jQuery for now
- 17:48 – clean up some content
- 18:13 – replace content in sections
- 19:32 – change title in h1
- #logo
- 20:04 – clean up footer
- 20:46 – commit our completed header
CDN Resources for this lesson
in the <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
in the <body>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>