So I really wanted to dissect exactly what goes into it and we're gonna be using APIs throughout the rest of this course. And so to finish out this section, what I'd like to do is to see how we can bring in those images so we can bring in the image and we can bring in the logo so that we have everything that we want to work with and then in the next section, I want to get into the design because I know this is looking pretty ugly right now. It's kinda hard to imagine how this is going to turn into something that looks like this right here.

So I know this looks very different than what we have but I think you're gonna be pleasantly surprised to see that everything that we have here is actually all we need in order to build this out. So the way we're gonna do this is I wanna bring in the image and the logo, we already have the other elements we need. And then in the next section, we're finally gonna get into design and we're going to make our current page look like what we have going on in the live application.

So let's get going on that, that means we should have a relatively short guide here. We already have our portfolio item and we have, thanks to our comment, this is part of the reason why whenever I'm building out an app, I like to include these kinds of comments because imagine a scenario where you're building out an application and you get called off to do something else.

You might have to go work on another app, you might have to build another front-end, and if you come back to this in a few days, you may not know exactly what you need to do in order to build out the next feature. But because of our notes here, I can just reference this and pull in all of this data so you can see we have our description and we have our ID. Now let's just bring in the image and the logo. Later on, in the styling section, we're gonna see how we can actually organize this so that it looks nice but for right now, let's just make sure it works.

So I'm gonna say, img src so this is gonna look a lot like just a plain vanilla HTML image tag so I'm gonna say src and then inside of here, let's go with the first one, with thumb_image_url and then make sure to close this off with a backslash and then the greater than sign.

If you do not do that, you will get an error, and then let's also add the logo. Now, remember the logo's white so it's gonna be hard to see. We'll have to inspect it to make sure it's bringing it in but let's hit save and see what that gives us.

So I'm gonna switch over now and there we go, we have our images.

Now, these images are not styled whatsoever, that's what we're gonna be doing in the next section but as you can see, we're now getting all of our data, all those images, everything that we added and uploaded, we now get to put on a completely separate application which I think is pretty cool.

I remember the very first time I ever built an API driven application. I thought it was pretty exciting because here I built this single stand-alone application that was actually able to communicate with an outside service and leverage that data in order to show it to my users and now you're doing the same thing.

So as long as you have these images popping up and showing on the screen, it means that we are finally ready to start implementing the design and that's what we're gonna get into in the next section.

Resources

• Source Code