Through the entire process of creating a responsive website with HTML+CSS+JQUERY publishing, you will gain a solid foundation for intermediate publishing skills and practical publishing know-how. In particular, you will gain confidence in creating your own portfolio website by experiencing the entire process of creating a website through sufficient explanations and practical work. (The responsive production method is a responsive layout production method using the existing float and position methods. Since most existing websites are currently produced with layouts using the existing method, you will also need to learn Flex and Grid, but you must learn and use the existing method layout well.)
Enhance your practical publishing skills through the core theories of HTML+CSS+JQUERY
Improve your overall website publishing skills and know-how
The exact concept and use of the position attribute
hover before after checked active Understanding and using virtual classes
CSS tab menu content, JQUERY tab menu content creation ability
Mobile responsive web publishing production capability (media query)
Full responsive web design capabilities optimized for both PC and mobile versions
Create a Creative Responsive Website with 3D Screen Transition Function
HTML+CSS+JQUERY Responsive Website Portfolio Creation Process
'Responsive website publishing course of 24 hours or more '
' Course on creating a personal portfolio homepage for publisher employment'
' Jump Up Theory Video for Intermediate Publishing Skills'
' Hardcoding class for real skills in practical publishing'
ð Features of Coding Works Responsive Website Creation
01) Overall UI/UX - 3D section transition animation
The overall UX of the responsive website you will create is to move sections by moving the mouse wheel up and down. It is enough to show creative UI/UX because it shows 3D animation effects while moving sections . Also, by changing some of the prepared options, you can change it to a total of 9 different section transition animations, from rotation animations to size changes.
If you don't want to use any section transition animations, there is also an option in the options to turn off section transition animations.
Changing these section transition animation options is so easy and conveniently set that you can easily change them even without any knowledge of JavaScript .
â» The entire section transition UI/UX of the PC layout is created using a jQuery plugin. â» You can fully learn in this lecture how to download and use the PC layout section transition animation plug-in, as well as how to customize it. â» The entire responsive website being created fully supports cross-browser compatibility , so it can be viewed without problems in Chrome, Firefox, Edge, and Internet Explorer (IE) .
02) A website created directly by Coding Works, not a clone site or copy site.
The responsive website you are creating this time is a creative website that Coding Works created from start to finish for the students, from planning to UI/UX design and publishing.
In general, in the case of lectures on creating clone sites or copy sites, sufficient theoretical and experiential learning is possible. However, since it is a copy site, it is difficult to modify the produced results and use them as your own portfolio website. However , this responsive website is the result of Coding Works's planning, design, and publishing all processes themselves, so after sufficient learning, you can modify the text and images and change the layout to some extent to use it as your own personal portfolio homepage.
03) 15 step-by-step completed versions and PSD files provided for each lecture section
The step-by-step finished version is a zip file of the production video results for each section of the Inflearn class content during the entire website production process. If only the final finished version was provided, I thought that students might have difficulty, so I prepared the step-by-step finished version by saving it during the process.
Here are some examples of problems that can arise when there is no step-by-step finished version and only a final version:
You have to modify the jQuery plugin and start with the UI/UX as the basis, but if you have difficulty with this part, you will not be able to start properly. In this case, you can unzip the zip file that completed the first step and follow the next section. I think you can study the parts you did not do again in the second time. However, I thought that if I only provided the final version, there would be cases where you could not start, so I provided the completed version step by step.
Of course, it is best to create the final result with files that you have created purely from the beginning to the end, but the purpose of this responsive website creation is much greater than creating the result, and the purpose of learning many things about publishing in the process. In the process, you will learn the publishing process, know-how, and practical theory of creating an entire responsive website.
â» The UI design PSD file created with Photoshop is in the data room. Please modify it to suit your personal needs when creating your personal homepage later.
â» The Photoshop UI was created using Photoshop CC 2019 version and includes the fonts used in its creation.
04) 100% hard-coded mobile production without using a responsive framework
This responsive website was created using 100% hard coding.
Using a responsive CSS framework like Bootstrap makes it much easier to create a responsive website. However, while it is okay to use a responsive CSS framework if you have the experience and skills to create a responsive web by hardcoding, we do not recommend blindly relying on a responsive CSS framework to create a responsive web.
Of course, it is difficult to create a responsive web by hardcoding everything from scratch. It takes a lot of work. However, I think that your publishing skills will improve rapidly through this process.
In this responsive website creation course, horizontal layout and positioning were done using float, position, and transform, which are the basics of publishing. It would be easier to do layout with flex, but since the basics are important, this work did not use the flex property.
05) Production lectures totaling more than 20 hours
The total production time is over 20 hours. The production time is long. It is long even in my opinion. I also had a hard time making it. ð¢ð¢ Because it is an explanatory bug, the same explanation is repeated several times. It was difficult to tell the same story multiple times.
I had a hard time making it long because I thought it had to be this way, but I think it would be difficult for the students taking the lecture as well. But I thought it was important to take my time, think about it, and create it while understanding.
As I mentioned earlier, the goal is not to produce results in a short period of time, but to gain experience, publishing know-how, and practical skills in the process of creating them, so the class videos ended up being quite long.
06) Text editor used in production lecture
The text editor used in this responsive website creation course is Brackets. Of course, you can use a text editor that students are familiar with, such as Visual Studio Code. However, text editors without a real-time preview function may be difficult to follow.
â» We recommend using Brackets or Visual Studio Code, which have the Live Preview feature.
ðð»ââïž Isn't it difficult to set up the screen transition jQuery plugin?
For those who are not familiar with it, the screen transition jQuery plugin settings may seem a bit complicated. You can easily set up the screen transition jQuery plugin by watching the video, but students do not have to do it themselves.
Whether you are good at setting up the jQuery plugin for screen transition or not does not determine whether you have publishing skills or not. Don't worry~^^
For those who find the plugin settings difficult and complicated, a step-by-step complete version has been prepared. The step-by-step complete version contains all the folders and files with the plugin setup completed, so just download it, unzip it, and follow the next section.
If you want a file with the completed screen transition jQuery plugin settings, you can receive [Section 01. Step-by-step completed version] or [ Section 02. Step-by-step completed version] . If you want to start by receiving the completed version of the entire mobile layout and navigation publishing, you can receive [Section 03. Step-by-step completed version] .
[Section 03. Step-by-step finished version] Mobile full layout and navigation publishing (Mobile ver.)
ðð»ââïž Prerequisite knowledge for taking the course
The difficulty level of this responsive website creation is difficult for beginners or beginners. The course level should be similar to or close to intermediate level to follow along well. If you think you are not at least beginner level, I don't think it will be too difficult to follow along.
As for prerequisite knowledge for the course, you should know the basics of HTML+CSS. However, you do not need to be good at HTML+CSS. In the lecture that is over 20 hours long, we will explain it sufficiently. If you are watching the video and the student is slow in coding and writing HTML+CSS, you can stop the video, write HTML+CSS, and follow the next step.
It just takes a little more time than others because I have to stop the video and code. Rather, it is better to have time to calmly code on your own. Don't worry too much and let's study together.^^
Among my lectures , there is a ' HTML+CSS+JQUERY Portfolio Intermediate Practical Publishing Lecture ' . The theoretical content and practical example production content in this lecture almost covers all the content needed to produce this responsive website. In other words,I think this is a lecture that will definitely help you build the basics of HTML+CSS+JQUERY.
If you are not a beginner or a beginner, it is okay to follow along, but it might feel a little burdensome. If you have learned the basics of HTML+CSS through other lectures, I believe you will be able to follow along and complete the responsive website creation course with an understanding of why it is done this way.
ðð»ââïž Expected questions and required reading related to the lecture
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 theorieswhile 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 and experience in creating various types of websites to work in the field. I think it would be enough to study a few more lectures like the current course and study a few of the entire website creation 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 convey all the content and know-how to the student, I hope you will make it your own through the learning method explained above.
Q. There isn't a separate theory section explaining the theories that come up when creating a website? A. The course you are currently taking is not an introductory beginner course, but an intermediate level responsive website full production and publishing course. We recommend that you take other courses to improve your skills for the basic theory part and learning how to create practical examples.
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. 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.
ð¡ Preview PC layout section switching
⌠Section Transition #01: 3D Rotation
⌠Section Transition #02: Zoom in/out
⌠Section Transition #03: Pull the next section from the previous section
JavaScript that detects the mouse wheel and changes the header design and top button design
Mobile navigation trigger animation
Show/Hide GNB with jQuery
Finding section id with A tag anchor
Smooth scrolling with jQuery plugin or pure CSS properties
⌠Mobile UI/UX #03: Mobile Home Section (CSS Keyframe Animation)
⌠Mobile UI/UX #04: Mobile Project Section (CSS tab menu content, Slick.js slider)
⌠Mobile UI/UX #05: Mobile Plan Section (Slick.js content slider responsive option)
ð¡ PC layout section-by-section UI/UX preview
⌠PC Layout Section-by-Section UI/UX #01: Home Section
4 types of sequential pure CSS keyframe animations
Overlay & Background Image Animation, Text Reveal Animation
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
⌠PC Layout Section-by-Section UI/UX #02: About Section
Hover effect with filter property applied
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
⌠PC Layout Section-by-Section UI/UX #03: Project Section
CSS tab content slider using adjacent sibling selection, input attribute selection, and :checked
Slick.js autoplay image slider using jQuery plugin
Project subpage using jQuery Iframe Modal
⌠PC Layout Section-by-Section UI/UX #04: Plan Section
Slick.js content slider using jQuery plugin
How to use important Slick.js options such as responsive response options
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
⌠PC Layout Section-by-Section UI/UX #05: Awards Section
Aligning content using the position attribute and linking to external sites with the a tag
Various mouse hover effects
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
⌠PC Layout Section-by-Section UI/UX #06: Location Section
Icon design using Font Awesome
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
⌠PC Layout Section-by-Section UI/UX #07: Contact Section
Handling form elements, designing input fields using :hover and :focus
Icon design using Font Awesome
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
ð¡ PC & Mobile Subpage Layout UI/UX Preview
⌠PC & Mobile Subpage Layout #01: Hiring Subpage
Subpage opened as an Iframe Modal
SNS icon hover effect using FontAwesome
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
⌠PC & Mobile Subpage Layout #02: Project Detail Subpage
Subpage opened as an Iframe Modal
Utilize various CSS properties such as layout, format, effects, box model, and transformation.
ð¡Â List of intermediate to advanced level Jump Up publishing theories and tips
We continuously update the essential theories and tips needed for publishing skill up as well as theories essential for creating responsive websites. If there is an update on the essential theories and tips videos needed 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 17. Even if you haven't received any new news, please come to Section 17 and check if there are any videos you need to learn. Fighting~^^
â» Those who are learning the responsive web production lecture do not need to listen to this before finishing the production lecture. However, since 2, 3, and 4are essential core theories for the responsive web production lecture, we recommend that you listen to them first and then start the responsive website production lecture.
â» 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.
Section 17. Intermediate to Advanced Level Jump Up Publishing Theory and Tips
Chrome Extension Recommendations for Web Publishers (6) (Completed, 2020.05.31)
Two ways to smoothly find the desired part with the A tag anchor (jQuery plugin, CSS property) (Completed, 2020.07.25)
Using iframe to load and display another html inside the body (Completed, 2020.07.25)
CSS click event created with :checked and extended selectors (adjacent selectors, sibling selectors, attribute selectors) of input tags (Completed, 2020.07.25)
Using inline JavaScript (linking href to div, going back, going forward, refreshing, closing window) (Completed, 2020.07.26)
Distinguishing between good and bad publishing instructors (understanding display properties)(Completed, 2020.08.2)
Understanding relative font size em and rem units (Completed, 2020.08.2)
Understanding Folder File Paths You Must Know When Creating a Website (Absolute Address vs. Relative Address) (Planned)
Creating an Image Map that finds coordinates directly and codes them directly without relying on a generator (planned)
Fully understanding the flower (before, after) of the virtual class that designs the front and back of an element (planned)
â² Coding Works publishing course roadmap for publisher employment
†News of passing the publisher exam for Coding Works students
â² 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).
†Email sent by a Coding Works student after getting a job at a publisher
Â
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 :)
Hello teacher~ I'm Inflearn student OOO~ I found out the email address from another student's answer..ðð
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~!
ðð»ââïž 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 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 check the frequently asked questions in the relevant lecture community first~
â¡ 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.
![Bootstrapã掻çšããã¬ã¹ãã³ã·ãWebå¶äœ[å®è·µç·š]ããŒããã£ã³ãCourse Thumbnail](https://cdn.inflearn.com/public/courses/333141/cover/2e0b10d5-7e3c-4dd9-ace8-b3374cb55007/333141.jpg?f=avif&w=420)
![[2025幎åºé¡åºæº] Webãã¶ã€ã³æèœå£«å®æè©Šéšå®å
šã¬ã€ãCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![ãŠã§ããã¶ã€ã³éçºæèœå£« [2025幎] å®æå
šäœ (ã«ã«ãªããŒã¯è³ªåå¯èœ)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
