Let's make a Flip Book using HTML CSS JavaScript (Step by Step Guide)

Learn how to make a CUSTOMIZABLE Flip Book using HTML, CSS and Javascript!

⭐️ Short Font Awesome Tutorial

📚Chapters
0:00​ Introduction to Flip Book Project
0:31 Project Structure
1:40​ Font Awesome
2:06 Let's work on HTML
4:00​ Let's work on CSS
7:58 Going back to HTML
8:52 Going back to CSS
12:12 Going back to HTML again :)
12:28 Finally JavaScript
24:45 Let's make our website responsive using media query
26:48 Let's work on JavaScript
23:22 Good Bye

🧐 Source Code
*Basic Flip Book:

*Customized Children's Flip Book Example:

🏞 Image Credit
Little Dog Image:
Photo by David Clarke on Unsplash

[OlavNor-ku]

The simplicity of your logic is truly genius. It takes a great mind to code like that. Thank you tremendously

[tsheposepadile]

One of the best tutorials I've ever seen. You made it so easy to follow along. Thank you. 🙏

[turniponabike]

You did it!!! This is amazing and creative. I'm so glad you made this. I've been wanting to do a book for a long time but I could not come up with everything you did here. Now I am going to do my children's book with this. Thank you Coding Star!

[hugocangi]

HELLO FRIEND, I JUST FINISHED THE FLIP BOOK SINCE YESTERDAY, I THANK YOU A LOT, YOU EXPLAIN VERY WELL
I EMAIL TO FOLLOW YOU GREETINGS GOOD WEEKEND

[MyStudio-ioso]

Turn.js is a better choice. The pages turn like a real magazine. Not stiff and robotic.

[jonathanel-aziz]

Nice! Tried this for a magazine and so easy, the problem is to make it responsive.

[clarkjeans]

(I am not good at English.) - I didn't try your awesome code yet, but it looks like it will work. I wanted good example or code for flip book, but I can't search that well. But your guide is perfect for me!! Thank you so much, I hope your subs get higher. Have a nice nice nice day!

[soumelee]

You explain so well!
you are very good teacher.

[BersediaBelajar]

❤Yesss...Great Content... Thank you so much for your tutorial...

[lightyear]

You never asked to like & subscribe, yet I'm sure many would do regardless, including myself. It's very rare to see a tutorial that good. The only thing I didn't understand is what translateX(0%) is doing - I would think it moves along the X axis at 0%, meaning doesn't move the div at all...

[vladimirtravkin]

Many thanks for the detailed lesson.
This is one of the best tutorials on this topic.
I will be waiting for your new lessons.
Thanks again!

[kimsy]

Thank you! I can’t wait to create my writing prompts book with this 😀

[just_uriht]

Great content!!! Explained very well! As a beginner I find this super super useful!!!

[sagniksaha]

you got a new subscriber . Awesome man great work

[uzma]

it seems pretty easy:BTW:where did u make ur code?which platform?

[ckasprojects-fkhv]

This is Really awesome, thanks for this tutorial, it worked like a sharm 🙂💯

[MicroDobb]

Thank you, Sir! Can you help with a question - how I can do any button for example on page 1 to page 3 or backward. Thank you!

[miscetc-tmyt]

How is your mouse doing that? All operating systems should have that mouse feature by default.

[tempowong]

Any idea to make it to be responsive? I got trouble on the context (T_T)

[sally]

that's so good, thank you so much, it's really helpful