inflearn logo

Real! Website Creation! Step by Step! (Korea Consumer Agency Consumer Era - Layout Creation Basics)

[Website Creation Step By Step] This is a beginner-level course that will walk you through the creation of the main page of the Korea Consumer Era webzine (currently renewed).

(4.9) 33 reviews

655 learners

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Clone Coding
Clone Coding
HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Clone Coding
Clone Coding

Reviews from Early Learners

4.9

5.0

janey23

71% enrolled

I'm so happy that I can take such great lectures for free! I've always been confused about how to set up layouts, so thank you! I'm also watching the lectures you upload on YouTube!! It would be great if you uploaded responsive lectures on YouTube too. Thank you~~~

5.0

headong2

100% enrolled

Thank you for uploading the lecture for free!!! I had some difficulties studying on my ownㅜㅜ I got the feel of it as I followed along while listening to the lecture, and I was at a loss when I looked it up on my own, but I am so grateful that I can learn in such detail...!!!!>< I will finish the other lectures and properly study coding on my own

5.0

gmdwns6297

71% enrolled

I'm a backend developer, but I was about to start studying publishing and frontend, and you're explaining it in such detail. Thank you.

What you will gain after the course

  • Creating web page layouts

  • CSS Animation Production

  • Hover effect

  • Transform effect

  • Transition effect

  • How to use virtual content

  • How to use developer tools

I know the basic HTML and CSS tags...
Are you afraid of creating layouts??

  • This course is designed for those with basic knowledge of HTML and CSS and will proceed by implementing actual web pages .
  • For those just learning HTML/CSS tags! For those who know the tags but haven't created a layout themselves! This course is ideal for those who want to learn the fundamentals and practical application of layout creation by creating a typical corporate web layout.


Step By Step!
Get started right now.

You can learn everything from the basics of HTML/CSS to its use in creating web pages.
We help you create dynamic elements using CSS Animation, Transform, and Transform.

  • Creating a web page layout
  • Creating CSS Animations
  • Hover effect
  • Transform effect
  • Transition effect
  • How to use virtual content
  • How to use developer tools

Open chat room operation

For a smoother learning experience, join the Jalnan Webdi open chat room run by J.young.
We'll share some great tips and free webinar links related to Figma, UI/UX, coding, and portfolio creation.

- Open chat room name: Jalnan Webdi
- Code: jyoung



After listening to all the lectures,
Try the next level!
Real-World Website Development Step-By-Step Series

Basic Course (Hanwha Chemical_Responsive Web)
Complete understanding of PC mode layout and responsive page creation!
Application Course 1 (Wise Studio_Responsive Web)
An eye-catching web page creation curriculum!
Application Course 2 (Daebang Industry_Interactive Web)
Create a gorgeous, high-difficulty interactive web with your own hands!
Application Course 3 (Musein_Responsive Web)
Practical scalability + speed UP, confidently handle complex layouts!

h tml, css, html/css, website, website, coding, layout, interactive web, web design, portfolio, publishing

Recommended for
these people

Who is this course right for?

  • People who have basic knowledge of HTML/CSS but have never created a layout

  • For those who find layout creation difficult and overwhelming

  • For those who want to solidify the basics of layout creation

  • Anyone who wants to know how to create CSS Animations

  • For those who want to know about transform and transition effects

  • For those who want to learn how to use developer tools

  • Anyone who would like to add a web portfolio work

Need to know before starting?

  • html/css basics

Hello
This is jyoung

9,795

Learners

427

Reviews

242

Answers

4.8

Rating

13

Courses

Hello.

I am J.Young, a UI/UX Full-Stack Design Director utilizing AI.

I have over 20 years of practical experience in web and app service planning, design, and development,
and I am currently working as an instructor for UI/UX web planning, design, and front-end bootcamps.

Based on my practical experience, I have helped over 500 students find employment in the design and IT fields, and I am currently focusing on teaching practical skills and new portfolio creation methods suited for the AI era.



My teaching philosophy is!

Building capabilities that can be immediately applied in the field

Instead of simply learning how to use tools, I help you build capabilities that can be applied immediately in the field by experiencing the same process as actual work, from planning to design, development, and deployment.

Focusing on core competencies required in the field

We focus on learning AI utilization skills, problem-solving abilities, and collaboration skills required in the rapidly changing job market.

Creating a portfolio that leads to employment

We focus on creating projects and portfolios that can capture the interest of interviewers.


In the AI era, design alone is not enough.

Now, you need the
capabilities of a Fullstack Creator who can plan, design, implement, and deploy.
You will gain basic proficiency in design tools and create actual services using Claude, Codex, and Figma,
experiencing how to produce results alongside AI.

- If you are feeling lost on where to start,
- If you want to increase the competitiveness of your portfolio,
- If you want to grow faster by utilizing AI, I will be your reliable guide.

I will be with you until the moment your results are complete.

Professional Experience

  • 2017~Present | Digital Product Director & UX Consultant

  • 2015~2017 | Executive Director, EliEsel Inc.

  • 2003~2015 | Executive Director, Amusingware Inc.

  • 2003 | Head of Design, Seowoo C&D


Lecturing Experience

  • Employment Portfolio Creation and Project Mentoring

  • Corporate lectures and practical competency enhancement training

  • Practical lectures for universities, corporations, and educational institutions

  • Design · Development Portfolio Consulting and Group Mentoring

  • Team coaching and portfolio guidance based on practical projects

  • Practical training for corporate employees and job seekers

  • AI-based UI/UX · Frontend Practical Education and Consulting



    - Current) Full-time Instructor for UIUX Planning · Design · Frontend Bootcamp (EZEN DX Academy - Gangnam Branch)
    - Specialized Lectures on Design/Development Portfolios and Team Group Lectures


    * YouTube Channel in Operation (Coding Designer)

For smoother learning, if you join the Jalnan Web-D open chat room operated by J.young,
I will provide answers to lecture questions and feedback on your portfolio.

- Open Chat Room Name: Jalnan Web-D
- Code: jyoung

 

More

Curriculum

All

7 lectures ∙ (1hr 59min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

33 reviews

4.9

33 reviews

  • gmdwns62971924님의 프로필 이미지
    gmdwns62971924

    Reviews 16

    Average Rating 5.0

    5

    71% enrolled

    I'm a backend developer, but I was about to start studying publishing and frontend, and you're explaining it in such detail. Thank you.

    • jyoung
      Instructor

      Thank you, gmdwns6297, for the high praise. I'm glad it was helpful for your publishing. I'll continue to create great lectures. Thank you. J. Young Dream

  • wjsduwls01011742님의 프로필 이미지
    wjsduwls01011742

    Reviews 9

    Average Rating 5.0

    5

    71% enrolled

    I'm so happy that I can take such great lectures for free! I've always been confused about how to set up layouts, so thank you! I'm also watching the lectures you upload on YouTube!! It would be great if you uploaded responsive lectures on YouTube too. Thank you~~~

    • jyoung
      Instructor

      Thank you, janey23. I'm glad that it helped you with your layout design. I'm currently preparing another course, so please continue to show interest.. Please subscribe and like the Jalnanwebdi YouTube channel. Thank you^^ Have a happy afternoon^^ J.youngdream

  • tinybuildlab님의 프로필 이미지
    tinybuildlab

    Reviews 27

    Average Rating 5.0

    5

    100% enrolled

    It's so great to be able to practice what I've learned!!

    • jyoung
      Instructor

      Yongsu Kwon, I am grateful that you liked the lecture. I will come back with a better lecture. Happy New Year^^ J.young Dream

  • hihihj07017384님의 프로필 이미지
    hihihj07017384

    Reviews 8

    Average Rating 5.0

    5

    100% enrolled

    Thank you for uploading the lecture for free!!! I had some difficulties studying on my ownㅜㅜ I got the feel of it as I followed along while listening to the lecture, and I was at a loss when I looked it up on my own, but I am so grateful that I can learn in such detail...!!!!>< I will finish the other lectures and properly study coding on my own

    • jyoung
      Instructor

      headong2 It's really great that you're studying on your own. I'll actively help you so that you can study more smoothly than when you were studying on your own. Please pay a lot of attention to Jalnanwebdi. Thank you^^ J.young Dream

  • wlenwlen081423439님의 프로필 이미지
    wlenwlen081423439

    Reviews 9

    Average Rating 5.0

    5

    14% enrolled

    It was great to be able to listen to good lectures for free. It's the best~

    jyoung's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!

    25% off for new members

    $8.80

    25%

    $8.80