How to create a modal with HTML, CSS & JS - Part 1: HTML

To finish of the Portfolio website, it's time to create the modals that will open when we click on a portfolio item. These modals will use JavaScript to change make them fade in and out, but before we get to that, we have to create the modals themselves!

In this video I start things off by writting the HTML for them. It's a pretty straightforward video, with nothing fancy, but it sets the stage for the more fun stuff later on.

In part two we dive into the CSS to style the modal and make it look decent. Then part three looks at setting up the JavaScript and getting the basic functionality of the modal to work. Finally, in part four, we get a bit more complex with the JS, adding in some animations to have it fade in and fade out, and exploring the animationend event listener to get things to work properly.

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[OchirBFolo]

It's still very useful and helpful after 2 years later xD

[bareerakhan]

which font family are you using in vscode its nice thank you.

[JonFuller]

Hey Kevin, just wanted to give you a heads up, the grid starter kit is currently being used for a current project all inspired by you. So a big THANK YOU. Also from following this, I have learned so much and the partials scss has helped me to make a better to read and better to edit set of scss files. Thanks again

[space_monkey]

Hi kevin, I wanted do simple projects on JavaScript and jquery, do you have any videos on this topic, any website or videos which would be helpful, please guide me.

[aidanmcdonagh]

Great video! Just wanted to know, is there a reason you do it this way instead of creating the modal view dynamically with JS/jQuery?

[Alena-mfmt]

how do you do to preview what you are doing? I have atom too and I don't know how to do it,
sorry for my bad English (nice video :D)

[learnwithheintayzar]

Hi kevin! You are awesome in there. Can you help me please? I wanna to make a "Try it yourself" button like w3schools. I can see a result of codes when I click the button like that. Please help me Kevin.

[lucasramosdeoliveira]

Why didn't u did another html file?