Real-world! Website Production! Step by Step! (Y Studio_Responsive Web)

Real-world! Website Creation! This is an Application Course from Step By Step where you will recreate the main page of Y Studio (http://www.ystudio.co.kr/) exactly as it is using HTML, CSS, jQuery, and plug-ins. (Completed lecture files attached!)

(4.9) 16 reviews

197 learners

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Responsive Web
Responsive Web

Reviews from Early Learners

4.9

5.0

지영

81% enrolled

Thank you for the high quality lecture

5.0

SooJung Jo

97% enrolled

Please upload a lot of trending homepages these days~

5.0

박수민

100% enrolled

Thank you for the easy-to-follow lectures, I was able to complete the course without difficulty and with enjoyment!

What you will gain after the course

  • Layout design using HTML5/CSS3

  • How to apply web font icons (Linearicons)

  • How to apply web fonts (Google Fonts)

  • Various mouseover effects

  • How to use developer tools

  • jQuery: GNB jQuery that appears when clicking the hamburger menu

  • jQuery: Header that fixes to the top upon scrolling jQuery

  • jQuery: jQuery for moving smoothly to the top when the "Go to Top" button is clicked.

  • plug-in: Animation that triggers on scroll (How to apply scrolla.jquery)

  • plug-in: Image slide with animation (slick plugin)

  • Creating a responsive webpage (PC mode, Tablet mode, Mobile mode)

  • Responsive: How to use media queries

  • Responsive: viewport

 

 


Even if you only know HTML and CSS,
Web page creation is OK!


UI/UX designers or those wishing to find employment as front-end developers must have at least 5–6 portfolios featuring web pages that reflect current trends.

 


This course is about selecting and recreating websites that fit the 2020 trends, have excellent aesthetic elements, and are suitable for portfolio production among currently commercialized websites.

.


This course
is designed for those with basic knowledge of HTML and CSS, and it proceeds by implementing an actual webpage exactly as it is.
Even if you don't know difficult javaScript and jQuery, we will help you create cool and flashy webpages in a short period of time using libraries and plugins based on HTML and CSS.

 

Step By Step!
Start right now.


 

If you take this web page course—composed of interactive elements essential for real-world practice—while also preparing your portfolio, you will be able to complete a high-quality portfolio by the end of the course and get much closer to successful employment.

 

 

>> Responsive web page creation from PC mode to tablet and mobile modes (768px)

 

>> Creating responsive webpages from PC mode to tablet and mobile modes (414px)

 

>> Creation of responsive webpages from PC mode to tablet and mobile modes (320px)

 

What you will gain
after the course :D

1. Solid layout creation skills

To create a webpage, HTML and CSS based accurate layout creation is the most important. Even if you know HTML and CSS but have no idea about Layout Design, if you diligently follow this course—which teaches everything thoroughly from the basics— you will soon find that you have built a solid foundation in layout production!

2. Boost Work Productivity!

To increase work productivity, you must be able to implement interactive websites in a short time using libraries and plugins. In this course, you can thoroughly study everything from web page layout creation to responsive page production, and you will build web pages using scripts, plugins, and animations required in the field. As you consistently practice while following the lectures, you will find your professional skills leveled UP! UP!

3. High-Quality Portfolio

A high-quality portfolio is one of the most effective tools for showcasing your professional capabilities and seizing new opportunities. As you practice while taking the course, you will build up your own portfolio. By consistently implementing web pages through this course and the subsequent website production practice courses, you will be able to complete a portfolio that will serve as your greatest weapon in your job search.

4. Open Chat Room Operation

For smoother learning, if you join the Jalnan Web-D open chat room operated by J.young,
we will share essential tips and free webinar links related to Figma, UI/UX, coding, and portfolio creation.

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

Check out the curriculum for creating
eye-catching websites

1. Setting up the layout with HTML/CSS
- How to apply web font icons (Linearicons)
- How to apply web fonts (Google Fonts)
- Various mouse-over effects
- How to use developer tools

2. Simple jQuery Usage
- GNB jQuery that appears when clicking the hamburger menu
- Header jQuery that fixes to the top upon scrolling
- jQuery for smooth scrolling to the top when the "Go to Top" button is clicked

3. Applying various jQuery plugins to create web pages more simply and effectively
   - Animations triggered by scrolling - How to apply and use options for the scrolla.jquery plugin
   - Image slides with animations - How to apply and use options for the slick plugin

4. Configuring a Responsive Web Page
- How to use media queries
- viewport

 

What's special about this lecture? I'm curious!

Q1. Will this help with employment?
A1. A single image can be more impactful than a long piece of writing. If you create web pages while taking this course, you will be able to build a flashy portfolio that catches the eye of hiring managers, which will be a great help in getting a job.

Tools covered here

 

After this lecture, 10 website production lectures with different design styles and moods
will be opened sequentially.


Students preparing their portfolios should refer to this to create high-quality web pages together.

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

Recommended for
these people

Who is this course right for?

  • Those who want to design and implement various layouts to get a job as a web designer or publisher.

  • Those who want to quickly create a portfolio to get a job as a web designer or publisher.

  • Graphic designers who want to transition to becoming a front-end developer.

  • Those who have a basic understanding of HTML/CSS but are afraid of building a webpage.

Need to know before starting?

  • HTML/CSS

Hello
This is jyoung

9,794

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

32 lectures ∙ (5hr 24min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

16 reviews

4.9

16 reviews

  • josujung10111483님의 프로필 이미지
    josujung10111483

    Reviews 1

    Average Rating 5.0

    5

    97% enrolled

    Please upload a lot of trending homepages these days~

    • jyoung
      Instructor

      Mr. Sujeong! Thank you so much for your hard work and for leaving a review. I will use your review to come up with a better course. I am currently filming an interactive web that is in line with the current trend... I will upload it soon so that it is cool, fancy, and easy to understand. I ask for your continued love and interest. Thank you^^

  • bapzelo974355님의 프로필 이미지
    bapzelo974355

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Thank you for the easy-to-follow lectures, I was able to complete the course without difficulty and with enjoyment!

    • jyoung
      Instructor

      Thank you for your class review, Sumin. We will come back with better lectures. J.young Dream

  • kiki606a0614님의 프로필 이미지
    kiki606a0614

    Reviews 2

    Average Rating 5.0

    5

    81% enrolled

    Thank you for the high quality lecture

    • jyoung
      Instructor

      Jiyoung, thank you for your hard work~ You finished the lecture in a short time... Thank you... We are currently preparing the next stage of the course, so please continue to show interest Thank you^^

  • jasonchoidba9534님의 프로필 이미지
    jasonchoidba9534

    Reviews 4

    Average Rating 5.0

    5

    97% enrolled

    Thank you for the great lecture.

    • jyoung
      Instructor

      Thank you, Choi Jason, for your review. We will prepare more useful lectures in the future~~^^ Have a great day today ^^~~

  • winterlove님의 프로필 이미지
    winterlove

    Reviews 4

    Average Rating 4.8

    5

    100% enrolled

    I tried to practice by reading the book alone, but I couldn't do it properly, but after taking J. Young's Wise Studio responsive web course, I feel like I'm starting to get the hang of it. As I follow the markup step by step, it feels easy, and now I'm confident^^ Thank you.

    • jyoung
      Instructor

      Kate Thank you for your course review. I am even more grateful that you gained confidence after taking my lecture.. I will always prepare lectures that are up to date with the latest trends and have high practical application, and I will make sure that it will be a lecture that will greatly help you in creating your portfolio. Thank you Have a great day today^^

jyoung's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!