[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide

🚩 2025 Web Design Technician Written and Practical Exam Schedule

2025 Web Design Technician Qualification Exam Information:  http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

▲ As of 2023, 3,991 people took the exam, 2,298 passed , and 1,693 failed.
(In 2023, 1,693 people prepared hard for the exam, applied, and went to the test center to take the exam, but failed. It is not an easy exam, so you should prepare reasonably for the exam.)

▼ Be sure to read this before applying for the practical exam!

The practical exam application is held for 4 days. You can apply on Q-Net from 10:00 AM. Although the application period is 4 days , it all closes between 10:00 and 10:30 AM on the first day of application. Therefore, you must log in to Q-Net before 10:00 AM and standby to apply for the practical exam. Unlike the written exam, the practical exam must be held at a specific testing site, so the number of people taking the practical exam is fixed for each session. I have seen many students who were unable to take the exam because they were unable to register for the practical exam. Therefore, please log in and standby before 10:00 AM on the first day of application.

Please check the schedule carefully and I hope you pass this year!

F-type layout production and final production video updated (2024.1.16)

The production videos for the four additional F types (F1,2,3,4) added in 2024 have been updated. There are no new production modules for the F type. However, you can think of it as just one more layout being added. I don’t think you will have much of a burden preparing for the practical exam because of the four additional F types.

😧 4 types of F will be added from the first practical test in 2024

Until 2023, there were 20 types in total, 4 each of Type A, Type B, Type C, Type D, and Type E, but from the first test in 2024, 4 types of Type F were added. So, you have to study a total of 24 types.
The organizers significantly raised the test age in 2023, but increased the test difficulty slightly starting in 2024.

✅ The F-type class video added in 2024 is currently being prepared.

The first practical exam in 2024 is from 2024.03. 16 to 2024.03. 29 , so you can study the current content except for Type F. If you are good enough at Types A, B, C, D, and E, Type F will not be much different except for the overall layout. However, it seems tricky that the overall layout design is centered at 1340 pixels, but only the slide section has to be 100% browser-wide.

※ Type F also has the same slide method, tab menu, navigation, and modal as types A, B, C, D, and E.

The F-type class videos and materials will be ready by the end of January at the latest. It may be a little earlier. I expect it to be around January 20th.

※ Please download and check the public issue PDF files for 2023 and 2024 from the section below.

2024 Web Design Technician Qualification Exam Information : http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

I took the F3 Open Banking (No. 23) type test today!

It's not a study question, but I don't think there's anyone around me who has taken the F type test.

I remember that the information was not accurate, so it may seem like a waste of time, but it is different from other test takers.

I'm writing this post right after my exam to help you, teacher!

I've been strangely concerned about Type F all week, and I guess I had a gut feeling that I was going to have a test today😭😭

1. As per the lecture

I studied by grouping slide-image and slide-banner in .slide.

On the test paper, the part that we called slide-banner was called <Shortcut> in the instructions, and the shortcut part inside content-inner was called banner in the test paper. Although the only difference was the name of the code group, I thought it would be better to change the code name and study so that those preparing for Type F would be less confused! I also got confused when I read the 'Shortcut' instructions in the middle and wrote it as slide-banner like usual, so I just unified the code name with the name requested in the instructions!

2. I have something to say about the colored part of the pink box~
I don't know if you remember, but...😭😭
I was wondering if there are any instructions for entering text in the F type slide-banner link section on 24.03.27
I have posted a question..!
Unfortunately😭😭 As I expected, the test instructions included a section asking for text for each anchor.
There was a text that asked me to insert it into the provided text notepad😭😭
And the total number of images that went in was 5, the same as the layout.
However, there is no specific instruction on where to place the text in the image.
So I

Just like inserting a span into a gallery image by entering text as span
I made it by placing it vertically and arranging it using display:block processing.
Instead of creating the image with Illustrator or Photoshop, you should have inserted the image provided..!

After I arranged it, it felt like I had randomly pasted photos on top of the slide images.
I gave it a background color and adjusted the transparency to make it look like an icon that is separate from the slide image.
I made it.

3. And the notice section! The part on the right where the teacher wrote ???😭😭 in light blue was really blank!! However, the part where I was surprised and said "Huh?" in the notice section was because the tab-inner width may not be wide.
I studied layout and abbreviation using em/b tags in the notice section.
There was no date input!
So, I simply placed the anchor in the center and decorated it by blocking it.

The mistake I made was not giving the footer menu a border bottom.
There are two things: I made the menu sub-back width size the same as the header size (I made it like type A sub-back😭)
Everything else worked fine and I was able to solve it with the mindset that it was good enough!! 😭😭
If I continue like this and fall into those two problems, I think I'll be so embarrassed and ashamed..😭😭😭😭
Still, I'm so proud that I can figure out and create so many structures on my own.

And maybe because Type F is a type I've never seen before...

Today, I went to the test center and 12 people took the test, but 6 of them gave up and left.
It took me about 2 hours and 20 minutes to complete all the verification and submit.
By that time, there were three people who had submitted, including me, and there were three people left when I left the classroom.

The acceptance announcement date is April 9th, I really hope I pass😭😭
It was an online class, not a face-to-face class, but I learned so much😭😭
Thank you😭😭!

😊 jQuery slide production update completed (2023.3.11)

The jQuery method slide production video has been updated. Starting in 2023, with the addition of D-type and E-type, the difficulty of the practical exam will increase, so it is necessary to produce the slide production method more easily and conveniently. So, the existing jQuery method video has been produced as a new video.

If you create it with the existing CSS slider, there may be some negative points. There is a CSS slider lecture, but I recommend that you create a slider using jQuery. (In fact, you can learn whichever method is more convenient and take the test without any problems in passing.)

In the case of CSS slides, it looks a little awkward to go from slide 1, 2, 3 to slide 1 again and then go to 1, 2, 3, but jQuery slides naturally go from slide 1, 2, 3 to slide 1, 2, 3 again. Soon, it will be possible to create more perfect slides than CSS slides.

If you look at the jQuery code, I think you'll find it very easy and understandable because it's short.
※ There are 6 lines of jQuery code, but only 3 lines of code actually work.

▼ You can watch and download the jQuery slide production video and files below.

▼ Preview of the final version of the new D-type (D1) added in 2023

▼ Preview of the final version of the new D-type (D2) added in 2023

▼ Preview of the final version of the new D-type (D3) added in 2023

▼ Preview of the final version of the new D-type (D4) added in 2023

▼ Preview of the final version of the E-type (E1) newly added in 2023

▼ Preview of the final version of the E-type (E2) newly added in 2023

▼ Preview of the final version of the E-Type (E3) newly added in 2023

▼ Preview of the final version of the E-Type (E4) newly added in 2023

Those preparing for the 2025 web design technician practical exam, please take note!

The 2024 Web Design Technician Practical Examination information has been released. The written and practical web design technician test criteria are the same as the 2022 test criteria. And the web design technician practical exam open questions are exactly the same as in 2022, but D-type and E-type have been added from 2023. The web design technician practical exam open questions have been updated in the section below.

[Additional Information] Four more F types have been added starting from the first round in 2024. (Total of 24 types)

The only thing that has changed since 2022 is that in Technical Compliance 10 on page 5 of the Public Issues, the part that says it should work well in Internet Explorer has changed to "it should look good in MS Edge." Checking MS Edge instead of checking the result in Internet Explorer means that almost all CSS properties, such as FLEX, can be used. In other words, you can think that the burden of cross-browser compatibility has almost disappeared for test takers when creating results. (Since it is an exam, we recommend that you learn and take the exam in the way you learned in class to pass safely.)

🚩 2025 Web Design Technician Practical Examination Criteria

The current web design technician examination criteria are valid from January 1, 2025 to December 31, 2027.
This lecture was created as a practical exam lecture that perfectly matches the current exam criteria.

2025 Web Design Technician Qualification Exam Information: http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

🚩 2025 Web Design Technician Practical Text Editor

Starting with the third practical exam in 2021 , only the Visual Studio Code text editor can be used . Brackets and Dreamweaver , which were previously installed as text editors, will not be available starting in 2022, according to the instructions on the Q-Net official website. So in conclusion, you can prepare for the exam using either Notepad++ or Visual Studio Code. Of course, you won't need to use EditPlus and Brackets , so you can use Visual Studio Code to study for the practical exam.

Q-Net Official Website Web Design Functionalist Practical Utilization Software Guide

https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079

As stated in the instructions above, it says, " Plugins (separate applications, add-ons) cannot be installed. " This means that since the Visual Studio Code extension is not installed, you must take the practical exam with the basic functions of the Visual Studio Code program. So, please install Visual Studio Code and study without installing a separate extension. You must prepare for the exam in the same environment as the practical exam site . Out of the four Visual Studio Code lectures in the image below, only study the two in red boxes. Of course, if you are studying Visual Studio Code for practical work, you must study all four.

[Must Read] How to Use a Text Editor Before You Start Learning

For the practical exam of the web design technician, you only need to study the two videos in the red box among the Visual Studio Code usage in the course . ( The extension is not installed in the practical exam room. )

Enabling Auto-Save in Visual Studio Code

Auto-save is a feature of Visual Studio Code itself, not an extension feature, so please check the detailed method of auto-save on the Coding Works Inflearn blog. https://www.inflearn.com/blogs/728

[Update] Flex Layout Full Layout Creation Lecture Video

1) From 2022, cross-browser checks will be performed on Edge and Chrome in the technical compliance requirements for the web design technician practical exam. The previous IE (Internet Explorer) has been officially excluded. 👍

2) After learning the existing method of horizontal layout using float, learn Flex layout ( Flex layout is not required )
You should refrain from learning Flex layout without knowing Float and Position layout.

3) If you use it, it is recommended to use Flex layout only for the overall layout ( refrain from using Flex for detailed layout )

Option 1) Flex layout (full layout) + Float, Position (layer pop-up, navigation, notice)
Option 2) Float, Position (overall layout, layer pop-up, navigation, notice)

※ We recommend that you learn the existing method of arranging with Float to create the entire layout using Flex before using it in the final production.

⚡ For effective learning, please refer to the Coding Works Publishing YouTube channel!

Please watch the theory video lectures on the Coding Works Publishing YouTube channel in parallel. Of course, not all theory videos are on the YouTube channel, but most of the important theory videos are there. Since there are many videos, it is recommended to search for videos as in the example below.

Coding Works Publishing YouTube Channel: https://www.youtube.com/codingworks

💡  Lecture Features

A customized course that is confident of passing the practical exam with a total of 30 hours, 112 lectures, and 18 key materials.

A total of 27 HTML+CSS+JQUERY core theory lectures

Complete analysis of the practical test production module (layout, slide, navigation, tab menu, layer pop-up)

The biggest challenge in passing the web design skills test! Slide production

Coding Works lectures are not only about creating jQuery, but also perfectly implementing slides with pure CSS.

Depending on the student's preference, you can choose between creating jQuery slides or CSS slides.

CSS slide animations (horizontal slides, vertical slides, crossfade slides)

jQuery slide animation (horizontal slide, vertical slide, crossfade slide)

3 videos of the final version of the practical exam with all production modules included

Essential Photoshop CS6 usage and image production video for the web design technician practical exam

Download all production modules and the final 3 production files as well as the HTML+CSS theory textbook

Coding Works lectures are not about whether you pass or not, but a real lecture that focuses on how high you can pass.

Detailed video on the day of the practical exam, including the test site atmosphere, procedures, tips, submission methods, and how to apply for a certificate.

💡  Target audience

- Those who wish to pass the practical exam for the web design technician qualification
- Those who want to maintain, modify, and supplement the website on their own
- Those who want to change their career from web design to web publisher or strengthen HTML+CSS+JQUERY publishing
- Web planners who want to increase their understanding of web publishing
- Developers who want to increase their understanding of front-end publishing

💡  Lesson Objectives

- You can pass the web design technician practical exam with a high score.
- You can systematically improve your HTML+CSS+JQUERY publishing skills.
- You can improve your website creation know-how.

- You can create a personal portfolio website for web publishing jobs.

💡  Preparation

- Basic computer skills and internet browser usage skills
- Basic English typing skills for coding

💡 What are the features of the Coding Works Web Design Technician Practical Exam Course?

- Lecture contents optimized for the 2024 exam criteria (complete analysis and application of 12 types)
- Easy and concise code guarantees high passing score and safe passing
- Systematic course to develop skills that can be applied immediately in practice
- More than 30 hours of faithful lecture content
- Special lectures by skilled instructors who teach students directly in the field
- HTML+CSS+JQUERY theory study book PDF textbook file provided

💡 Who can take the Coding Works Web Design Technician Practical Exam Online Course?

- A practical web publisher and an instructor who teaches offline classes at a famous academy
- An instructor with sufficient teaching experience and know-how to provide good lectures
- Special know-how for passing the practical exam from an instructor who has taught classes for the practical exam of web design technician certification for several years
- An instructor who knows very well the level and needs of students preparing for the practical exam for the web function engineer certification.
- An instructor who presents a realistic and efficient learning method with code that is easy for beginners and novices to understand.

🙋🏻‍♂️ Instructor Introduction

• (Currently) Freelance Frontend Publisher
• Green Computer Academy Web Publishing Instructor
• Jo Eun Computer Academy Web Publishing Instructor
• Now a Web Publishing Instructor at Computer Academy
• Front-end publisher, front-end publishing specialist
• Now, the Computer Academy Web Design Technician Practical Certification Course
• Easy & Edu Front-end Publishing, UI/UX Design
• HTML+CSS+JQUERY publishing YouTube channel 'Coding Works' operation
• Coding Works Publishing YouTube Channel - https://www.youtube.com/codingworks
• Coding Works Publishing Blog - https://www.inflearn.com/users/@codingworks/blogs

🙋🏻‍♂️ Please read before asking questions~!!

If you have any questions while learning, please ask. When asking questions, you must upload the content that is not working, the code, and a screenshot of the browser result. In the case of code, you must copy and upload all of the HTML, CSS, and JS codes so that we can give you an accurate answer.

Please capture the browser result screen and copy and upload the code so that we can give you an accurate answer.