-
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-103 | Adding A Loader | Exercise Assignment
In this lesson, we begin by correcting our navigationSite architecture, menus and other navigation tools in the web design must be created with consideration of how users browse and search. The goal is to help the user to move around the site with ease, efficiently finding the information they require. menu in the header when the scroll effect is applied by adjusting the height of the links. After that we add a loader to our application. Doing this serves several purposes that include letting the user know that something is happening as well as preventing the user from overloading request while a loading action is in motion. Although a fairly simple lesson this one has great value in demonstrating how a little bit of extra effort can make a huge difference to the user experience.
- Complete all steps completed in the video “inside out – STEP 103.0 | Adding A Loader”.
- 00:00 – Introduction
- 00:25 – Overview
- 01:26 – fix the nav menu when the header shrinks
- 02:43 – where the class smaller is called
- 03:08 – smaller class in header-resize.css
- 04:03 – update header.smaller nav a to 32px
- 04:40 – validate CSS change on localhost
- 05:28 – pause & code
- 06:00 – begin working on the loader
- 06:17 – add loader div to index.html page
- 07:19 – add
- #loaderDiv to style.css
- 07:41 – pause & code
- 09:17 – validate
- #loaderDiv CSS changes
- 10:38 – add jQuery to hide loader on the page loaded
- 10:43 – pause & code
- 11:02 – validate hide loader on page load
- 11:47 – add jQuery to show loader on page load
- 11:49 – pause & code
- 12:10 – add style rule to hide loader by default
- 12:18 – pause & code
- 13:40 – overview of changes
- 15:45 – save & close all files
- 15:48 – git status
- 16:02 – git add
- 16:08 – git commit