Through various practical examples of HTML+CSS+JQUERY publishing for beginners and intermediate levels, you will learn the basics of publishing for intermediate publishing skills. In particular, through various practical examples, you will gain confidence in publishing by experiencing sufficient explanations and practical work. This is a publishing class that provides a sufficient amount of study time of over 41 hours. (It is more effective if you study CSS intermediate theory on the Coding Works YouTube publishing channel.)
Improve your basic publishing skills with the core theories of HTML+CSS+JQUERY
Improve your website publishing skills and know-how
Accurate concept and use of block elements and inline elements
The exact concept and use of the position attribute
hover before after checked active Understanding and using virtual classes
How to use the text editor Brackets and Emmet
How to use the text editor Visual Studio Code and Emmet
Using Flex and the concept and use of the Transform property
Understanding and using adjacent selectors, attribute selectors, and checked virtual classes
Various mouse hover effects
Understanding and using Font Awesome
CSS tab menu content, JQUERY tab menu content creation ability
Understanding and using JavaScript variables (var) and conditional statements (if)
Publishing that is dynamic and flashy using jQuery plugins is not real publishing.
Real publishing skills are those that can meticulously design the layout with HTML, arrange and design in detail with CSS, and even create interaction with jQuery that you wrote yourself.
If you rely on the flashiness of using jQuery plugins and do not study the basics, it is not easy to get a job as a web publisher. Even if you get a job and start working, it is likely that each day will be difficult as a publisher.
Being able to hard code, that is, code each line of code yourself, is the real publishing skill.
1. Publishing! Don't be too scared. Start with confidence. Getting started is half the battle .
2. Publishing! I can't say it's easy to get on track, but it definitely pays off .
3. Basic HTML+CSS+JQUERY hardcoding skills are important for getting a job as a publisher.
I have something to say to those who are starting out with HTML+CSS+JQUERY publishing.
It's not easy to develop publishing skills to create a good website by hardcoding it all by yourself. It's hard, to be exact.
There are many theories to know, and you should have enough practical experience creating based on theories. You should also have some Photoshop UI design skills. Only then can you become a skilled person who can create a website worth seeing on your own.
However, you should not follow the 'Follow the Portfolio Website Creation' method without expanding your skills through faithful theoretical study and example creation using the theory mentioned above.
Of course, if you follow along diligently, you will get a result called a 'clone portfolio that copies someone else's work', but it will not lead to real skill.
If you are looking for a job as a web publisher or if you are a designer and want to be competitive with web publishing skills, you definitely need a personal portfolio website. Even if you create a personal homepage by following along without the thorough theoretical study and practical production experience I mentioned earlier, if you do not have hard coding skills, even if you get a job, you will quickly find out that you lack basic skills.
Before creating a personal portfolio website, please gain sufficient theoretical knowledge and experience creating various publishing examples using the theory.
The way I think about 'improving publishing skills' is...
When making a practical publishing example, first, just watch how to make it without any burden, the second time, make it while watching and following along, the third time, do it on your own without watching, and when you really can't remember, refer to the video and make it. Only then will it be recorded as your true skill.
※ Recommended learning method when studying publishing practice examples (1st to 4th learning and creating a final report)
Q. Is there a video explaining intermediate CSS theory while making examples ?
A. ' There are a lot of intermediate theories that are not covered in the basic theory when making examples. Where can I take intermediate theory classes? ' This question is frequently posted on the bulletin board.
This course is not about creating a beginner publishing example. It is about creating a beginner to intermediate publishing example. So you should have some knowledge of CSS beginner and intermediate theories. But you don't have to know them all. We will continue to repeat CSS beginner and intermediate theories while creating examples. And there is a detailed video of the essential intermediate theories needed for creating examples in the playlist called [Intermediate Theory] CSS Intermediate Theory on the Coding Works YouTube Publishing Channel, so it would be good to learn the intermediate theories while taking this course.
Q. If I take this course, will I be able to work as a publisher in the field?
A. If you understand and can utilize all the publishing content in this course well, it is possible. However, publishing requires sufficient experience to work in the field. I think it would be enough to study a few more things like the current course and study a few of the entire website production processes. Of course, you should also create a personal portfolio homepage. The barrier to entry for publishing is higher than you think. Since watching a video once does not mean that all the content and know-how will be conveyed to the student, I hope you will make it your own through the learning method explained above.
Q. While creating a practical example, are there any parts in the theory section that aren't explained?
A. The basic theory videos for beginners are uploaded so that you can refer to them if you feel there is any theory that you lack. In the video of making a practical example, there is content that is not in the theory part. If you ask why there is content in the example that is not in the theory part, it will be difficult for me to answer.
Q. Where can I ask questions if I don't understand something while studying?
A. If you have any questions, please post a post on the [Questions & Answers] board and I will answer you as soon as I confirm it, even if it is not right away. Also, please be as specific as possible with your questions. It is not easy to give a sufficient answer when your question is not specific. So when you ask a question, it will be much easier to answer if you attach a screenshot of the HTML, CSS, and JQUERY coding screen you are writing along with the content you are curious about.
Q. There is a course on creating responsive websites. Which one should I take first?
A. Before taking the course to create a full responsive website, I recommend that you sufficiently improve your theoretical and practical example creation skills in this course and then come to the course to create a full responsive website. Since it is a course to create a full responsive website, it is difficult to cover each part in detail like this course, so I think that if you are sufficiently trained in the practical publishing course and then come to the course to create a full website, your understanding will be much higher.
Q. Instructor, would it be a good idea to first look at the Publisher Job Search Real Practical Guide during class?
A. It is important to learn more publishing skills, but it is important to first establish the basics as a publisher. In the e-book (PDF) of the Publisher Employment Practical Guide, the publishing basics are thoroughly organized into the content that you must know as a publisher, such as desirable coding habits and principles, and publishing like an experienced person. We recommend that you first look at the e-book (PDF) of the Publisher Employment Practical Guide and study the publishing basics to gain a sufficient understanding. Click on the image below to see the class introduction.
[Update Guide, Learning Method Guide] HTML+CSS+JQUERY Portfolio Publishing Essential Theory and Practical Example Production Course
Thank you for taking the Coding Works, HTML+CSS+JQUERY Portfolio Publishing Essential Theory and Practical Example Production Course. And thank you in advance to all those who will take the course in the future..^^
This course will be continuously updated for the time being. If there is an update, we will notify you through 'Inflearn News'. Please follow the existing theory and practical publishing well until the final update. ^^
We continuously update not only theories essential for creating practical examples, but also core theories and tips necessary for publishing skill up. If there is an update on the core theories and tips videos necessary for skill up, we will notify you through new news.
The core theories and tips videos needed for Skill Up will be sequentially updated in Section 7. Even if you haven't received any new news, please come to Section 7 and check if there are any videos you need to learn. Fighting~^^
※ You can receive a zip file of the completed learning examples studied in the Jump Up Publishing Theory and Tips video by clicking on the lesson materials in the upper right corner of the video.
The Login UI Design Practical Web Page Publishing video has been updated. This updated lecture video consists of a total of 4 parts in Section 7. The complete version has also been uploaded for downloading. When practicing, download the complete version, delete index.html and style.css, and follow along slowly from the beginning of the video.
Publishing a login UI design is a static publishing without jQuery interaction, but it is considered an optimal example for studying all CSS properties across the board, including the core CSS properties such as box model, border, background image, color, and using checkboxes and labels.
▼ Pure CSS Content Slider Prototype 01 (Fullscreen Tab Content Slider Prototype)
▼ Pure CSS Content Slider Prototype 02 (Fullscreen Tab Content Slider Application)
▼ Publishing tab menu content with JQUERY (Style 01) (Completed)
▼ As a publisher, you must know JavaScript, variables (var) and conditional statements (if) - 20-year-old adult check (complete)
▼ Practical Publishing with JavaScript Variables and Conditional Statements for Ratings with jQuery (complete)
▼ How to use Visual Studio Code and Emmet (complete)
▼ Publishing tab menu content (style 02) with jQuery (complete)
▼ Publishing prototype with jQuery that changes the background image when the mouse is hovered over it (complete)
▼ Shopping Mall Item UI Hover Effect with jQuery (Completed)
▼ Coding Works Lecture Features Accordion Content Slide with jQuery (Completed)
▼ jQuery Responsive Animated Modal
▼ 01. Creating a practical example using CSS keyframe animation 01 (Circular size change loading animation)
▼ 02. Creating a practical example using CSS keyframe animation 02 (rectangle coordinate change loading animation)
▼ 03. Practical publishing using CSS keyframe animation 03 (double border radius animation)
▼ 04. Practical publishing using virtual class hover 01 (Product list with detailed description when hovered)
▼ 05. Practical publishing using virtual class hover 02 (Creating a tooltip that appears when the mouse is over it)
▼ 06. Practical publishing using virtual class hover 03 (over-the-top menu and other blurred navigation)
▼ 07. Practical publishing using virtual class hover 04 (hover navigation effect that separates up and down)
▼ 08. Practical publishing using virtual class hover 05 (App UI layer 3D hover animation)
▼ 09. Practical publishing using virtual class before and after 01 (basic usage before and after)
▼ 10. Practical publishing using virtual class before and after 02 (Animation hover navigation effect)
▼ 11. Practical publishing using virtual class before and after 03 (SNS icon animation)
▼ 12. Practical publishing using virtual class before and after 04 (text navigation using content attr)
▼ 13. Practical publishing using virtual classes to decorate input field designs (input fields using Font Awesome)
▼ 14~15. Practical publishing using virtual class order check 01 (Animation skill progress, delay)
▼ 16. Practical publishing using the order check virtual class 03 (Gallery image accordion navigation using Flexbox)
▼ 17. Practical Publishing 01 (Creating an Animated Hamburger Button) with Extended Selector and Virtual Class Checked
▼ 18. Practical publishing with extended selector and virtual class checked 02 (Creating animated side menu)
▼ 19. Practical Publishing 03 (Creating Tab Menu Content) with Virtual Class Checked with Extended Selector
▼ 20. Practical Publishing 04 with Checked Virtual Class with Extended Selector (Tab Content - Opacity)
▼ 21. Practical Publishing 05 with Checked Virtual Class with Extended Selector (Tab Content – Opacity Application)
▼ 22. Practical Publishing 06 (Tab Content - Slide) with Virtual Class Checked with Extended Selector
▼ 23. Practical Publishing 04 (Testimonial Tab Slider) with Virtual Class Checked with Extended Selector
▼ Accordion with jQuery
▼ Modal with jQuery & :target
Before learning, you need to learn CSS Essential Theory and CSS Intermediate Theory first.
This course is a course that focuses on learning through examples. You need to learn CSS essential theory and CSS intermediate theory first. Therefore, you should know at least CSS essential theory and learn how to create examples. If you continue to study examples, the difficulty of the examples will continue to increase. Therefore, it can be burdensome because the unknown theories will continue to increase.
If you ask questions that are too basic, you will end up posting a lot of questions in the future. As the person answering the questions, if you ask questions that can be easily found by searching on Google, it will be no fun to answer them.
I'm not saying that you shouldn't ask basic questions. I studied on my own, but studying on your own is hard. When you get stuck, there's no one to ask, and it's frustrating. However, if you get stuck and have questions, Google it first. There are many contents that Korean bloggers explain very well. If you search and study but still have questions, ask me about them, and I'll explain them in detail to the best of my knowledge.
In order to improve your skills in the future, you will need to learn a lot of things while studying publishing.
Your skills will improve a lot as you learn on your own. However, there may be some parts that are difficult to find and understand on your own. I will help you with those parts. And you can ask questions about the content of the code from the example production in this course.
Just in case, I would like to add that rather than doing the examples now, I recommend that you first learn the essential and intermediate CSS theories on the Coding Works YouTube channel and then do the examples.
🌏 Coding Works YouTube Channel Playlist - CSS Essential Theory
https://www.youtube.com/watch?v=-1_e38zLCXw&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99
🌏 Coding Works YouTube Channel Playlist - CSS Intermediate Theory
https://www.youtube.com/watch?v=PLrDCRrXdRk&list=PLv_UUi9AVBVvr9gODWpz6aZUS6VNvdsYq
For reference, there is a lecture called [All About CSS3 for Intermediate to Advanced Publishing] among the Coding Works lectures. If you take this lecture, you will have a perfect understanding of CSS theory. After that, if you come to other example production and website production courses, you will be able to learn while understanding most of the learning content, so I think the learning efficiency will be very good.
▲ A student who studied under me for about 4 and a half months in a nationally funded publishing course received a KakaoTalk message saying that he got a job.
▲ I received a KakaoTalk message about the interview results for students who took the offline course on creating a personal portfolio at Coding Works (April 24, 2023).
Hello teacher :)
Teacher, I am Kim O-jeong, a student who was taking Inflearn's lectures.
I am a student who sent an email this summer asking for advice on my personal portfolio.
Do you remember?😊😊
It's nothing else than,
I'm sending this email to tell you that I successfully landed a job at a publisher with the portfolio I received advice on from you!
Even!!
The company contacted me first after seeing the portfolio I posted on Saramin, and I was interviewed via Zoom and passed!
The company matched my desired salary, and I was able to join a company where I could do only publisher work, not design or development work.
It was a company looking for an experienced publisher, and they contacted me, a new employee, and asked me why they contacted me.
He said that he looked at a lot of other people's portfolios, but he contacted me because the "Functional Definition" in my portfolio caught his eye.
I think this is all thanks to the teacher's lectures.
If I hadn't taken the teacher's class, my portfolio would have just been ordinary, but I was able to successfully get a job thanks to the great tips the teacher gave me!
Although I have never actually met him,
While creating my portfolio, I relied on it a lot, trusted it, and worked hard while watching the teacher's lectures!
I feel like my skills have improved a lot in the three months I spent listening to the teacher's lectures and creating a portfolio, more than the skills I built up while taking long classes at the academy.
I desperately wanted it,
I believed and did as the teacher said and the results were really good.
Thank you so much!
Be careful of corona
I hope to see you again with another great lecture :)
I just wanted to say thank you 😊😊
I've had a hard time taking your class and submitting my resume for about two weeks now...
I passed the interview at a company and decided to come to work.. Thank you so much..😭😭
Actually, I was worried because I'm 32 years old. I submitted a lot of resumes, but I didn't get any calls.
But this company's HR manager said that he doesn't like people who graduated from private academies 😊😊
The company I decided to join is small, but it has developers and web designers.
They said they would train them for three months and then put them into practice.
It's a bit far and the salary is low, but I'm going to study hard and try to increase my salary~ 😊😊
Thank you so much for everything. You answered my questions so well, and I am so amazed that I got a job after taking this online class.
I will continue to study and improve my skills by listening to your lectures. Fighting~!
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 upload all HTML, CSS, and JS codes so that we can give you an accurate answer.
If you only describe your problem in text without any code in your question, it will be difficult to give you an accurate answer unless it is really simple. Then, I will have no choice but to reply again saying, 'Please upload HTML, CSS, JS code and browser capture~', which will be cumbersome and take more time to find a solution.
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
※ If you know basic publishing theory, you can learn practical publishing production.
※ You can refer to the essential theories when needed while learning practical publishing production .
Section 0. [Preview] Preview of the completed HTML+CSS practical publishing example
Section 1. Using Brackets and Visual Studio Code
Section 2. Section 01. HTML+CSS+JQUERY Publishing Essential Theory
Section 3. HTML+CSS+JQUERY Practical Publishing Production
Section 4. HTML+CSS Practical Publishing Production with JQUERY
Section 5. Practical Publishing of Landing Pages Using Video Backgrounds with jQuery
Section 6. Practical Web Page Publishing - Login Screen UI Design
Section 7. Intermediate to Advanced Level Jump Up Publishing Theory and Tips
Section 8. [Download] Source files and finished version used to create the example
Interview and employment-inducing publisher personal portfolio homepage production, scss, sass, flex, grid, html, css, html/css, website, web publisher, publisher employment, website, coding, coding, jquery, javascript, jquery, javascript, layout, interactive web, interactive web, web design, web design, portfolio, publishing, responsive web, web design technician practical exam, bootstrap, bootstrap, css frameworks, framework
Who is this course right for?
If you are new to web coding
Those who want to make website maintenance and corrections themselves
Those who want to change their career from web design to web publishing or strengthen HTML+CSS+JQUERY publishing
Web planners who want to increase their understanding of web publishing
Developers who want to improve their understanding of front-end publishing
Those preparing for the Web Design Technician practical exam
Need to know before starting?
Basic computer skills and internet browser skills
Basic English typing skills for coding
12,820
Learners
763
Reviews
2,114
Answers
4.9
Rating
23
Courses
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
All
142 lectures ∙ (41hr 42min)
Course Materials:
All
174 reviews
4.9
174 reviews
Reviews 2
∙
Average Rating 5.0
5
Let me be honest. Rather than paying 1.5 million won for a private institute and listening for 6 months, Pay 50,000 won for this lecture and just listen to it for 2 hours a day for 1 month. (Recommended to read twice) It only teaches the real essence and key points without any boring theories. (I got a 1-second refund after watching the history of HTML in the first lecture of F-Mo online lecture) Usually, when online lectures are given, the instructors make a mistake by going slowly at first, and then when the practical part gets difficult, I don't know if it's because they're lazy to explain or because they're excited, but the speed increases by 4 times while writing code that wasn't explained, but here, they go all the way to the end at the same pace as the beginning, tailored to beginners. Difficulty? Honestly, if you graduated from middle school or higher and find this lecture difficult, you can think that publishing is not your destiny in this life because it's so kind and easy. For reference, I only know C# in liberal arts and the words HTML and CSS were new to me. What do you want? 1. I wish there was a practice of publishing an entire web page, even if it's just one page. (Like a shopping mall) 2. Rather than making HTML and CSS layouts one by one, I would appreciate it if you could share some tips on where to get them from. (Even if it's an additional course, I'm willing to buy it.)
Hello. This is Coding Works. I am embarrassed that you praised my poor lecture too much. I am currently teaching at an academy, but my rule is to never say, 'Use code you don't know and memorize it for students'. I think it is never desirable to use code you don't know and get results. I also don't know a lot, so I always think of easy ways to help students understand. Following the 'Practical Publishing Example Creation Process' you are currently listening to, the lecture on creating a responsive website from start to finish with a single page that you mentioned is currently being recorded. Since it is a lecture on publishing the entire website, it took quite a while to produce the video. Originally, I was going to open this first, but it was delayed, so I opened the Practical Publishing lecture first. As you know, the most difficult part of publishing is HTML wireframe design for the entire website layout, and I am especially good at teaching the process of publishing the entire website. I am preparing hard, so please wait a little. It's a tough time, but I'm sure you'll be rewarded for your hard work studying publishing. Thank you again for the great review.^^
Reviews 14
∙
Average Rating 5.0
5
As a new publisher working at a company, I think this was the perfect lecture to help me resolve the parts that I was really confused about and didn't know about. First of all, I understand it very well. Coding Works' lectures are generally at a level that suits my level, and since he has a lot of practical experience, there were a lot of parts that were really helpful for the company. Since the lectures are unlimited, I can look them up whenever I forget or get confused, which is really great, and I plan to take other lectures as well. Thank you so much :)
Thank you for your kind words~^^
Reviews 4
∙
Average Rating 5.0
5
I am currently studying Coding Works as a front-end developer. I have seen HTML and CSS in other books and lectures, but it was very difficult to create a proper screen. By chance, I watched two Coding Works lectures through the YouTube algorithm and paid for them right away. Before taking this lecture, I definitely watched the lectures and read the book, but I was unfamiliar with the markup and had a hard time doing it, but now I am having fun running the examples for today and implementing them. I need to study React, but I am studying the markup work harder. ㅎㅎㅎ In my case, it is easier to control the DOM with vanilla JavaScript than jQuery, so I did not take the jQuery lecture, but I think it would be good for beginners to experience creating dynamic screens with jQuery. I have also purchased the intermediate CSS lecture, and I plan to take it together when Season 1 is somewhat complete. For now, I am aiming to complete Season 2 and the intermediate CSS theory by the end of January. Thank you for making this lecture.
Since this is a detailed course review, I think it will be a good reference for prospective students. Have fun studying and if you have any questions, please ask~!!
Reviews 1
∙
Average Rating 5.0
5
I'm taking other classes, but I can't find a class I can write a review for, so I'm writing here! I really, really recommend this publishing class! I studied with the teacher's class and got a job as a new publisher, and it's already been a year! I remember working on my portfolio and even having an interview with this class!! When I'm working, I look up the classes I signed up for, and if there are any updated classes, I look them up again, and I also look at the teacher's YouTube channel. The teacher teaches you from the basics so easily and solidly, so you can trust and follow along! I'm leaving a review because I really want to thank you, teacher! ㅠㅠ I hope you continue to give many more classes in the future!! I'm about to have a salary negotiation, and you're the teacher who gave me confidence because you taught me everything, like flex, grid, and scss. ㅠㅠ I'm slow at learning, so I'm lacking in many ways, but I'll work hard and learn well. Please cheer me on so that my salary can go up!! ㅎㅎ Thank you, teacher.
Thank you for the great review of the course~^^
Reviews 7
∙
Average Rating 5.0
5
This is the best lecture. I studied on my own after listening to this and got a job. It's my second year. ㅎㅎ
This is a late review, but I think other students will be encouraged by reading this review. Thank you~!!
$36.30
Check out other courses by the instructor!
Explore other courses in the same field!
![[Fantasy Pig's Feet] From design to coding講義サムネイル](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)講義サムネイル](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]講義サムネイル](https://cdn.inflearn.com/public/files/courses/336946/cover/01jv48md3p02hgkwt4yh1svf3j?f=avif&w=420)
![Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]講義サムネイル](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
