Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the next few movies I'm going to build a more complicated application that's going to show me Movie Recommendations from my friends based on their likes. In this video I'll start by setting up the application structure, so I'll get going with the code from my previous movie, right now this outputs a grid of images from this user's profile. So I'll start by changing the name of the application at the top, and I'm going to add a header section to just explain what this application does. Now I'm going to take this logout link, and I'll just move it to the top after we check for a user.
I'll add a class of notes so that I can style it a little better later on. In the same way I'm going to modify the login link. And I'll modify this so that the text is a little more descriptive. I'm also going to get rid of the Hello text. Our movie will still need a list of our friends but I don't want it to be in a grid like it was before. We'll use a div to wrap around our data, and then place all the friend's info in another div.
That other div is also going to eventually contain a list of movies. So first I'll take this URL right here, and I'll modify it by making it a div, and I'll call that div, moviegroup. I'll change this closing ul to a closing div. And I'll also get rid of the code for the list items. Underneath the name that is an h2 tag, I'm going to add an h3 tag that just says the words Recommends.
Now we'll wrap each friend's information with a class of friend info. So we'll create another div. The class is going to be friendinfo, and this will also inherit our group class. And we'll also need to close that right here. So I'm going to go ahead and save and switch back to my app, and I'll refresh. And you can see that you basically get the same information. You now have a little bit of a headline, plus you also have the photo and the name of each user as well as the words Recommends.
There is a little more code that wraps all this together into something that we're going to style later, but for right now this is looking exactly like what we want. So even though we've done a little bit more set up, and it doesn't quite look right we've modified it, so we'll be ready to add a second path and get our list of movies from each friend.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97076 Viewers
61 Video lessons · 84395 Viewers
71 Video lessons · 68607 Viewers
56 Video lessons · 101093 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.