inflearn logo
inflearn logo

XD UI Design + Clone Coding Interactive Responsive Web Portfolio!

Let's do it in practice! Responsive web portfolio that responds to scroll #JeilEngineering

(4.7) 6 reviews

116 learners

Level Basic

Course period Unlimited

Responsive Web
Responsive Web
Interactive Web
Interactive Web
XD
XD
Responsive Web
Responsive Web
Interactive Web
Interactive Web
XD
XD
날개 달린 동전

Course 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

Marketing Partners

Course 추천하고 성장과 수익을 만들어 보세요!

Reviews from Early Learners

Reviews from Early Learners

4.7

5.0

마포인프런

100% enrolled

^ㅁ^ I like it

5.0

foxball

80% enrolled

Most frontend lectures teach you how to use plugins,,, but the teacher's lecture makes me think that hardcoding is like this and it seems like he explains everything in detail, so it's rewarding every time I listen to it. I hope you'll give me many more lectures in the future.

5.0

inflearn

100% enrolled

It was a very helpful lecture

What you will gain after the course

  • Improve your publishing skills through core theories of HTML + CSS + JavaScript + jQuery

  • Creating an interactive css layout

  • Layout using flex

  • How to use a custom method that responds to scrolling

  • Creating a slide that zooms in and out

  • Ability to create responsive web publishing using mediaquery

"A great opportunity to learn both XD UI design and Clone Coding!"

+

  1. 🧑 Are you looking for a job as a web designer, publisher, designer, or developer?
  2. ⭐ Responsive web design, especially interactive portfolios , is a must , not an option !

✅ If you need an interactive, responsive web portfolio , join this easy-to-follow course !

✅ Designing a mockup using XD? Learn how much easier and more convenient XD is than Photoshop!

✅ You'll discover the joy of coding through easy and fun lessons!


📌What you will learn in this course

  • How to Design UI Using XD
  • Interactive Responsive Web Design Methods
  • How to use a custom method that responds to scrolling
  • Creating screen layouts using flex
  • Creating dynamic screens using JavaScript and jQuery
  • Creating Zoom In/Out Slides
  • Responsive Web Final Coding Complete Version / XD Complete Version

🧐 Portfolio Preview



❓ If you are curious about the site you want to create, click the link 👉


📚 Lecture Structure

Section 00. XD Design + Clone Coding Interactive Responsive Portfolio! Course Introduction

  • Introduction to the class
  • Introduction to the XD program, introduction to using vscode

Section 01. XD Design

Section 02. Creating a deskTop layout header

Section 03. Creating a deskTop visual header

Section 04. Creating a deskTop business section

Section 05. Creating a deskTop global section

Section 06. Creating a deskTop list section

Section 07. Creating a deskTop news section

Section 08. Creating a deskTop footer section

Section 09. Creating a tablet layout

Section 10. Creating a mobile layout


🙋🏻‍♂️ I have a question!!

Q. I'm new to XD. Can I do it?
A. This course is a basic XD course. It's easy because it focuses on simply creating layouts. However, if you already know some Photoshop shortcuts, it'll be easier, and I'll share some commonly used shortcuts!

Q. What level of coding should I have?
A. I recommend that you take the class after acquiring basic knowledge that is widely shared on the web, such as being able to create HTML files, how to use tags, and where basic attributes are included.

Q. Can I use XD and vscode on Windows PC and Mac?
A. Adobe products run on all operating systems, and vsCode is no exception. :)

Recommended for
these people

Who is this course right for?

  • For those interested in scroll events

  • For those interested in implementing creative, interactive web

  • For those who want to upgrade their basic skills from beginner to intermediate level!

  • Anyone who wants to create a responsive website for practical use

Need to know before starting?

  • Even beginners can do it

  • Beginners should listen to this after gaining basic knowledge of web standards.

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

40 lectures ∙ (6hr 24min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

6 reviews

4.7

6 reviews

  • kbba785883님의 프로필 이미지
    kbba785883

    Reviews 33

    Average Rating 4.8

    5

    80% enrolled

    Most frontend lectures teach you how to use plugins,,, but the teacher's lecture makes me think that hardcoding is like this and it seems like he explains everything in detail, so it's rewarding every time I listen to it. I hope you'll give me many more lectures in the future.

    • lizb
      Instructor

      Jonghoon, thank you for your valuable course review! I am currently working hard on the course. I will come back with a good course within this year! ^^

  • itmustbejin2999님의 프로필 이미지
    itmustbejin2999

    Reviews 5

    Average Rating 4.8

    4

    88% enrolled

    If you want to know how to build a really basic responsive website, this will be very helpful. After mastering HTML, CSS, and learning the basics of JavaScript, it would be good to listen to it as a summary before learning React or Angular. I enjoyed it. Thank you.

    • lizb
      Instructor

      Thank you~

  • joonsick님의 프로필 이미지
    joonsick

    Reviews 15

    Average Rating 4.5

    4

    75% enrolled

    I've been writing scripts all day, so I'm trying to review responsiveness for the first time in a while, and the content is very informative~

    • lizb
      Instructor

      Thank you~ I will repay you with a more substantial lecture!

  • wtfaw2j1896님의 프로필 이미지
    wtfaw2j1896

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    ^ㅁ^ I like it

    • lizb
      Instructor

      Was it helpful? I'll come back with a better lecture~ Thank you ^^

  • inflearn4141님의 프로필 이미지
    inflearn4141

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    It was a very helpful lecture

    lizb's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!

    $41.80