Using JavaScript in Websites

Portfolio Interaction Challenge

Using JavaScript in Websites

Check out a free preview of the full Using JavaScript in Websites course

The "Portfolio Interaction Challenge" Lesson is part of the full, Using JavaScript in Websites course featured in this preview video. Here's what you'd learn in this lesson:

Brian challenges students to add an element of interactivity to their current portfolios and then makes a change to the Popmotion animation.

Preview
Close

Transcript from the "Portfolio Interaction Challenge" Lesson

[00:00:00]
>> Brian Holt: Cuz I want you to go into your portfolios that you engine built, and add something interactive. Something you can add a swipe or gallery of images, you can go write your own image gallery like we did, you can go add some sort of thing we did up here with dragging the puppy around.

[00:00:20]
>> Brian Holt: That is up to you. But I wanna see what kind of creative stuff you come up with. So I'm just gonna show you that, this doesn't necessarily even have to be an emoji. So I dropped an image in there as well, that we can really quick.
>> Brian Holt: So if you have some sort of lpersonal image or something like that, that you like, instead of having a puppy here, I'm gonna put an image and class equals brand alt equals logo, and source equals .slash images slash and there's a bH KPMG in there, as well.

[00:01:07]
>> Brian Holt: Okay, and then here's I'll save that, and I'm gonna go in here to the gala or styles .CSS, and here I'm gonna add just a couple more things, background color white. Border radius, 50%, width, 75 pixels, height, 75 pixels, border, one pixel solid, something 777. Nice gray color.

[00:01:45]
>> Brian Holt: Okay, so now if I come back over here, hopefully, if I refresh that, you can see here, that actually put my image up there and it's still drag and drop. All right? So that doesn't actually matter what that is. You can put whatever you want them to there.

[00:02:03]
>> Brian Holt: And now that actually looks more like a portfolio, rather than just somewhat obsessed with docs.
>> Speaker 2: [LAUGH]
>> Brian Holt: Which is true, but now I don't want to be that upfront about that.
>> Brian Holt: Any questions about that? So anything can be draggable. Right, any sort of HTML element that you feel putting up there.

[00:02:18]
You could make that drag-able and drop-able. So hopefully you got your ideas flowing for what sort of things you wanna put onto your website.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now