How to Build an Interactive Iconography Parallax Web App11:33 with Mat Helme
In this episode of Exercise Your Creative we will be making a very simple interactive iconography web application. We will be using the icons we created in our last episode. For this project you should have a basic understanding of HTML, CSS, and jQuery.
[?music playing?] 0:00 [Treehouse presents] 0:02 [Exercise Your Creative] 0:04 In this episode of Exercise Your Creative, 0:10 we will be building a very simple 0:12 iconography web application. 0:14 We will be using the icons 0:16 we created in our last video. 0:18 For this project, 0:20 you will need a basic understanding of HTML, 0:22 CSS, and jQuery. 0:24 Let's get started. 0:26 Before we begin any development, 0:29 let's take a look at what we're going to build. 0:31 We're going to be building a very simple 0:34 parallax application, which displays the icons 0:36 we made in our last video. 0:39 If you don't have these assets, 0:41 no worries, you can either download the assets 0:43 or use any images with a 500x500 pixel dimension. 0:45 We are going to develop this application in sprints, 0:49 just as we did with our icons in episode 6. 0:53 If you choose to take breaks in between these sprints, 0:56 it's up to you. 0:59 I simply want to break the project up 1:01 into segments for a fast build 1:03 and without backtracking. 1:05 We are going to approach this 1:07 like any other HTML app. 1:09 First, we will set up the folders and files 1:11 and grab any additional assets we might need, 1:14 then construct our HTML documentation. 1:17 Next, code the CSS. 1:20 Lastly, implement jQuery to the application 1:23 to make the magic happen. 1:26 For our file structure, 1:28 let's start off on the desktop 1:30 and create a new folder 1:32 called, App. 1:34 Inside that folder, make 3 other folders 1:36 labelled CSS, 1:39 Images, and Scripts. 1:41 [?music playing?] 1:44 Then put the images you would like to use 1:48 in the Images folder, inside the App. 1:50 [?music playing?] 1:53 If you completed the previous video, 1:57 this will be your icons in PNG format. 1:59 [?music playing?] 2:02 Next, let's open up Sublime Text 2 2:04 and drag in our App folder. 2:07 Then, let's create a file labelled, 2:09 index.html 2:11 and save it to the App directory. 2:13 Next, 2:16 create a file and save it as style.css 2:19 to the CSS directory in the App folder. 2:22 [?music playing?] 2:25 We will also need a reset file for our app, 2:27 as it is always good practice. 2:29 Copy and paste the CSS reset code 2:31 from Eric Meyer in a CSS file 2:34 labelled reset.css 2:37 and save it in our CSS folder. 2:40 [?music playing?] 2:42 Next, grab the latest version of jQuery. 2:44 You can do this by going to jQuery.com 2:46 and clicking on the Download button. 2:50 Copy all of the code from the page, 2:52 and create a new file in Sublime. 2:54 Then, paste the code in that file 2:56 and save it in the Scripts folder 2:59 labelled jquery.js. 3:01 [?music playing?] 3:03 Now, let's grab the parallax plugin 3:05 from the URL below. [http://curtain.victorcoulon.fr] 3:07 This plugin was created by Victor Coulon. 3:09 We only need 2 main files: 3:13 curtain.js and curtain.css. 3:16 [?music playing?] 3:20 Simply put curtain.js 3:23 in the Scripts folder 3:26 and curtain.css 3:28 in the CSS folder. 3:30 [?music playing?] 3:32 That's it, our first sprint is done, 3:37 our file structure is set, 3:40 and we're ready for our next step--HTML. 3:42 Next, we're going to open up our index.html file 3:46 and input a basic HTML5 structure. 3:49 This will include the file and code, 3:53 HTML5 doc type, 3:55 <html> tag, 3:59 <meta> tag, 4:00 [?music playing?] 4:02 <head> tag, 4:05 <title> tag, 4:07 [?music playing?] 4:09 and our <body> tag. 4:19 Remember to close up all of your tags. 4:21 [?music playing?] 4:23 Next, fill in the <title> tag and input 4:28 Interactive Iconography. 4:32 [?music playing?] 4:37 Then, let's link up the style.css file 4:39 found in the CSS folder. 4:42 [?music playing?] 4:45 Now, jump down to the <body> tag 5:04 and add in an ordered list 5:06 with 10 list items for each icon ID'd 5:09 in order of your choice. 5:11 Each list item 5:14 should have the appropriate image inside of it. 5:16 [?music playing?] 5:19 After you have completed that, 5:51 let's add a class to the ordered list 5:53 labelled, curtains. 5:55 Directly below the ordered list, 5:59 let's add in an unordered list 6:01 with a class of menu, 6:03 containing 2 list items. 6:06 [?music playing?] 6:08 Each list item should have 6:17 an <a> tag. 6:19 The first, linking to #? 6:21 and containing the HTML entity number 6:24 for the up arrow symbol 6:27 [?music playing?] 6:30 which is &#8593; 6:39 The second linking to #? 6:46 containing the HTML entity number for the down symbol, 6:50 which is &#8595; 6:53 Lastly, let's link up jquery.js 6:59 and the curtain.js 7:03 found in the Scripts folder using the script tags. 7:05 [?music playing?] 7:08 And that's all we need for our HTML. 7:40 Our second sprint is complete. 7:43 When you render your index.html file in the browser, 7:45 you will notice it's not looking so good. 7:48 No worries. We are only a couple sprints away from being complete. 7:51 Next, let's input our CSS. 7:55 To start off with our CSS, 7:58 let's open up style.css 8:00 and import reset.css and curtain.css 8:02 located in the CSS folder. 8:06 When importing the curtain.css, 8:09 we will use the previous code 8:12 as it applies to the HTML 8:15 in curtains class. 8:17 Under the CSS imports, 8:19 let's add a line for the list items 8:21 under curtains. 8:23 Let's add a black box shadow under it 8:25 at 50 pixels and set its height to 100%. 8:27 We can do this by 8:30 positioning them absolute at 50% 8:32 from the top and left 8:34 and margined at -250 pixels 8:36 from the top and bottom. 8:40 This works because the image 8:42 is 500x500 pixels, 8:44 thus always positioning them in the middle of the list item. 8:46 Next, let's add custom background 8:49 colors to each of our list items 8:52 by using their specific ID 8:55 to identify them. 8:57 I chose background colors as they applied to the icons. 9:00 [?music playing?] 9:03 Like for WordPress, 9:05 I use a darker blue 9:07 and an orange for HTML. 9:09 After you have completed all of the background colors, 9:12 let's style our menu next. 9:15 First, let's identify our menu 9:17 and position it fixed at the bottom right of the page 9:20 and give it a background color. 9:23 Then, let's float it to the left, 9:25 add some padding 9:27 and color to the arrows 9:29 as well as remove the underline decoration. 9:31 Lastly, we want to add a hover change 9:33 to the arrows. 9:36 We can do this by changing the background 9:38 color and arrow color. 9:40 That's it for our CSS. 9:42 We are now ready to add a simple jQuery function 9:44 to activate our parallax plugin. 9:47 Open up your index.html file in Sublime 9:50 and scroll down to the bottom. 9:54 Directly below your script tags, 9:56 we want to create another <script> tag, 9:59 where we will activate our plugin. 10:02 We will do this by running a function 10:04 for the curtains class 10:06 and giving it the following parameters-- 10:08 scroll speed and controls. 10:12 The scroll speed tells the app how fast 10:14 to scroll, with the larger number being the slower scroll. 10:17 The controls parameter tells the app 10:20 it should use the menu class 10:23 to control the direction of the icons displayed. 10:25 If you want to take your app 10:30 one step further, 10:32 add in a welcome image before your icon. 10:34 I simply made an image 10:36 that says, "I may not be the master of the universe, 10:38 but I am a master at..." 10:41 [?music playing?] 10:44 Then, I added it to a list item 10:46 in the order list before my first icon 10:49 and gave it an id, welcome. 10:52 Then, I set the background color to the welcome id 10:55 in my style.css file, 10:59 along with the others. 11:01 [?music playing?] 11:03 When we build our app in segments, 11:05 or sprints, you can see how you can save time, 11:07 and we don't have to backtrack. 11:09 We can complete 1 sprint, 11:12 leave the project and come back to it, 11:14 knowing our next step, 11:16 without having to dig through a bunch of code. 11:18 [?music playing?] 11:20 As always, have fun 11:26 and exercise your creative. 11:28 [Exercise Your Creative] 11:30
You need to sign up for Treehouse in order to download course files.Sign up