강의

멘토링

로드맵

Programming

/

Front-end

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

  • lizb
Interactive Web
Interactive Web
JavaScript
JavaScript
Interactive Web
Interactive Web
JavaScript
JavaScript

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

374

Learners

16

Reviews

92

Answers

4.9

Rating

3

Courses

I am an instructor who conducts practical, hands-on classes covering everything from frontend to backend, teaching web development based on extensive lecturing experience.

Curriculum

All

44 lectures ∙ (7hr 13min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

5 reviews

4.2

5 reviews

  • 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.

  • 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!

  • 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~~^^

  • 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. ^^

  • 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!