inflearn logo
inflearn logo

Learn fullPage + animation + SVG Animation portfolio with JavaScript

Vanilla Javascript + fullPage.js + SVG Animation Interactive Web Portfolio! Essential Course for Employment and Career Change!

(4.2) 5 reviews

95 learners

Level Basic

Course period Unlimited

Interactive Web
Interactive Web
JavaScript
JavaScript
Interactive Web
Interactive Web
JavaScript
JavaScript
날개 달린 동전

Recommend Course to grow and earn commission!

날개 달린 동전

Marketing Partners

Recommend Course to grow and earn commission!

Reviews from Early Learners

Reviews from Early Learners

4.2

5.0

gangsugi

100% enrolled

I used to code svg myself and made it myself, but then I found out that I could use animation... I really listened to the informative lecture. It was a great lecture because it was explained calmly and slowly, so it was easy to listen to. I highly recommend it!!!

5.0

TaeHyun Lim

100% enrolled

I was trying to study anime.js and ended up watching this lecture. Thank you for the great lecture~

5.0

lwshan

100% enrolled

It's fun!

What you will gain after the course

  • How to use fullPage.js

  • fullPage scroll animation

  • anime.js basic usage

  • JavaScript animation using anime.js

  • Vanilla JavaScript Slider Logic

  • Interactive Web Using SVG

  • Flex Layout

Let's make it with pure JavaScript
Interactive web portfolio!

VanillaJS + fullPage + Anime!

Through programming grammar
If you have learned how to write grammar,
Now, how to handle code
You should know 🙂

What is fullPage.js?

A plugin created by developer Álvaro Trigo, it is a JavaScript library that works using mouse snapping .
It serves as a quick and easy way to create full-screen pages that work with a mouse snap.

fullPage.js official website (link)

Gain, gain!
Using anime.js
SVG animation.

anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript objects.

anime.js official website (link)

This lecture!

Create a full screen with fullPage.js,
Implementing SVG animation with anime.js
This is a practice-oriented course.


What skills do you learn?

fullPage.js & anime.js Basics

Learn about fullPage basic settings, Navigation Anchor, Active Class usage, callback function usage, and Slider Logic created with vanilla JavaScript.

Additionally, you will learn the basics of animation and the skills required for interactive animation, such as Timeline Animation and SVG Animation using anime.js, to create gorgeous and cool animation effects.

Eye-catching interactive animations

Check out these five practical examples for yourself!

You will be able to create your own interactive animated web portfolio template that can be applied in various ways, such as using line animation, graph effects, sliders that are linked to the background, moving background pages using SVG path tags, and pages that animate according to clicks.


Web publisher/designer
If you are preparing a new portfolio!

Learning the basic principles

Learn the principles behind implementing interactive templates that can be used as portfolios for real-world job applications.

Build a skeleton

Create and apply your own portfolio by inserting your UI designs into a template using vanilla JavaScript.

Interactive Portfolio

This is recommended for those preparing for employment as a web publisher/designer and needing an interactive portfolio using SVG Anime Animation.


Expected Questions Q&A

Q. How much coding experience do I need to take this course?

This course is recommended for those with a basic understanding of HTML, CSS, and JavaScript. (See Prerequisites.)

Q. Do the scripts used in the lectures use jQuery?

This is a lecture using Vanilla JavaScript.

Q. Can I create a portfolio by taking this class?

Yes, you can make it.

Students who had no coding experience in offline classes often find employment as entry-level web publishers or UI/UX designers after completing government-funded courses. The default template used in these courses is fullPage.js, and in this course, we additionally utilized SVG and staggered animation using anime.js.

Since this course focuses on basic usage and utilization, you can easily use it as a practical portfolio by adding your own UI design to what you've learned.

Recommended for
these people

Who is this course right for?

  • Anyone who needs to create a web portfolio for employment as a publisher or designer!

  • Anyone who is not confident in creating a portfolio and needs help!

  • Anyone who is curious about how websites are made and wants to learn the principles behind them!

Need to know before starting?

  • HTML Basics

  • CSS Basics

  • JavaScript Basics

Hello
This is lizb

785

Learners

43

Reviews

92

Answers

4.7

Rating

7

Courses

View the reviews for the instructor's offline government-funded course

Go to "Responsive Web Design Training Course" Reviews
(2022.03-2022.07)

From March until now, it may have been a long time for some and a short time for others, but for me, it was a truly important and valuable period in my life. Although I had some prior knowledge, I felt lost and overwhelmed, not knowing how to proceed, which direction to take, or what to do. However, thanks to the teacher's sincere and dedicated guidance, I was able to achieve significant growth in both my technical skills and career preparation. Thanks to this, my confidence has grown a lot, and I feel like I will do well even after getting a job! I am so grateful to Teacher Bang Mi-jung, who led the classes, and the other career advisors! :) I’m leaving now after successfully finding employment! I hope the students in future cohorts stay strong and gain great experiences as well! Fighting! :)

I took the Web Publisher training course from March to July :) I took on this challenge knowing nothing but design, but I feel like I'm leaving with so much thanks to the support and encouragement from my teacher and classmates. I will continue to study hard based on what I learned at the academy~~ I am so grateful to teacher Bang Mi-jung, who always taught me kindly, and to the other career support teachers!

Go to "Front-end Developer Training Course" Reviews
(2020.11.17-2021.05.11)

The training course was so interesting that the six months felt short. Although coming up with ideas and designing took a long time at first, I felt proud to see my skills gradually improve as I gained know-how and significantly shortened my work time through the course. For someone like me who couldn't find a career direction, the lessons learned through this training were not only my own knowledge but also a milestone that guided my path. My classmates in Room 3 of the Frontend Developer Training Course and Instructor Mi-jeong Bang, whom I studied with for six months, were great connections and a huge source of support. I am so grateful to Instructor Mi-jeong Bang, the employment support team, and the administrative staff for their hard work, which I believe helped me secure a job even before completing the course. Since there are many other great programs available, I would like to recommend Daewoo Vocational Training Institute to juniors and friends who, like me, have fears about employment or are struggling to find their career direction.

When I first arrived, I worried a lot about whether I could actually get a job after taking this course, since I had never learned design or coding before. However, those worries disappeared the more I attended. I learned so many things, including Illustrator, Photoshop, HTML, CSS, JS, and Vue. It might be difficult at first because there is so much new information to take in, but you don't need to worry because the passionate teacher, Bang Mi-jung, explains everything so well. ㅎㅎ Looking at reviews for other academies, I've seen cases where they use the same repetitive curriculum every year, or where teachers don't even know the answers to questions. But our teacher was always passionate about teaching us new things and was so knowledgeable that I received a lot of help! If you want to become a web publisher or a web designer, I highly recommend this course.~~

In November 2020, I happened to come across an excellent institution called Daewoo Vocational Training Institute, and I am truly grateful to have met a wonderful teacher and received such great education there. If I hadn't taken this training course, it would have been difficult for me to have the job opportunities I have now. After graduating from university, I was lost and wandering at a crossroads in my career. During that time, the 5-6 month curriculum—filled with the teacher's actual field experience and know-how that is hard to find anywhere else—became a period of great learning and growth for me, even though I knew nothing about web development. Based on this, I learned various aspects of design and web development and was able to create my own portfolio. There were several moments when I wanted to give up because learning coding languages was so unfamiliar and difficult, but thanks to the teacher's passion and guidance—teaching me ten times over if needed—I was able to secure a job early (after completing over 80% of the course) and finish the program successfully. I would like to express my deep gratitude to the teacher and the Daewoo Vocational Training Institute for making it possible for me to find my first job and make a fresh start.

They explained things in a way that was easy for even non-majors to understand, and thanks to that, I was able to get a job. I am very happy that I took this course.

The curriculum explains design and coding tools step-by-step starting from the basics, tailored for practical use in the field. It was very helpful because the teacher did their best to support me so that I could work independently. This education shattered the prejudice that government-funded classes are of low quality. My teacher was also very proactive and always tried to teach new things, which allowed me to learn a lot.

They explained things in a way that was easy for even non-majors to understand, and thanks to that, I was able to get a good job. I am so glad I took this course.

In addition to the knowledge I already had, I learned a wide variety of new things through the training at the academy. They provided practice sessions so I could obtain certifications, and although it was difficult for me, I learned enough to understand most coding-related terms. I am relieved and happy because I was able to secure a job while taking this course.


I majored in architecture, and it has been over 20 years since I first connected with web design. After experiencing many ups and downs while balancing practical work and teaching, I have come to truly love this profession, and my interest and sense of accomplishment drive me to work even harder. I hope to share the knowledge I have gained to help more non-majors enter this field easily, and I sincerely wish for all your dreams to come true.

Lucete!

Inquiries regarding lectures email: loo4love90@gmail.com

 

 

Teaching Experience  

  • 2018.3 - Present. Web Design/Multimedia/Front-end Specialist Course in progress

  • Elice Academy `HTML / CSS in a Class of Its Own` Preparing to open

  • Elice Academy `JavaScript in a Different Class` preparing to open

□ Current Instructor for Frontend / Multimedia / Web Content courses at Daewoo Vocational Training Institute
□ UI/UX Web Publishing Lecture at Hi Media

□ Ezen Computer UI/UX Web Publishing Lecture
□ The Joeun Computer Academy Jongno Campus Web Design Lecture
□ The Joeun Computer Academy Gangnam Campus Web Design/Graphics Lecture
□ Youngjae Vocational School Web Design Lecture

 

  Certification  

□ Web Design Technician Certification
□ Computer Graphics Operation Technician Certification

□ KPC Certified Instructor (GTQ, GTQi, GTQid) Certificate

Vocational Education and Training Instructor Grade 3 (Information Technology, Design, Cultural Content, IT Strategy & Planning)

IT Operations)
□ Computer Literacy Level 1

 

More

Curriculum

All

44 lectures ∙ (7hr 13min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

5 reviews

4.2

5 reviews

  • lwshan2154님의 프로필 이미지
    lwshan2154

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    It's fun!

    • lizb
      Instructor

      I'm so happy and grateful that you enjoyed the class. Thank you~~^^

  • gangsugi5753님의 프로필 이미지
    gangsugi5753

    Reviews 23

    Average Rating 5.0

    5

    100% enrolled

    I used to code svg myself and made it myself, but then I found out that I could use animation... I really listened to the informative lecture. It was a great lecture because it was explained calmly and slowly, so it was easy to listen to. I highly recommend it!!!

    • lizb
      Instructor

      Thank you! I'm glad it was helpful~~^^ I'll prepare well for the next lecture!

  • thsoon님의 프로필 이미지
    thsoon

    Reviews 19

    Average Rating 5.0

    5

    100% enrolled

    I was trying to study anime.js and ended up watching this lecture. Thank you for the great lecture~

    • lizb
      Instructor

      Yes, thank you. I hope it was helpful for your work. I also appreciate the good review. ^^

  • enyalife12235952님의 프로필 이미지
    enyalife12235952

    Reviews 3

    Average Rating 5.0

    5

    9% enrolled

    This was a very helpful lecture for me, who had no basic knowledge of JavaScript.

    • lizb
      Instructor

      I've been thinking a lot about classes lately. I'll try to think more and improve. Thank you.

  • sssisis3484님의 프로필 이미지
    sssisis3484

    Reviews 9

    Average Rating 3.9

    1

    100% enrolled

    I was lured by keywords like full-page SVG in Vanillajs. It's too easy for practitioners to listen to, https://animejs.com/, https://alvarotrigo.com/fullPage/ I think it would be better to look at it here.

    • lizb
      Instructor

      It was not a class for practitioners. As stated in the detailed lecture description, it is a beginner's course for creating a new portfolio. I am sorry that I could not help you, but unlike you, there are beginners who have difficulty even after looking at the official website. The expression "I was tricked" is because I thought about the lecture for several months, but it makes me feel empty. I will think about content that will be more helpful to practitioners.

lizb's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

$51.70