Responsive Website Portfolio (App Official Landing Website)
The process of creating a responsive website portfolio (App Official Landing) is through HTML+CSS+JQUERY publishing, and through the entire process of creating a responsive website, you will gain the basics of 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. You will learn how to use jQuery plugins that must be used, such as Scroll Reveal Animation and Slick Slider. The responsive production method is produced using the existing method of responsive layout production using float and position. However, there are also parts where Flex is used for certain elements.
Improve your overall website publishing skills and know-how
A responsive layout that is 99% arranged using the existing methods of float and position
The exact concept and use of the position attribute
hover before after checked active Understanding and using virtual classes
Learning and applying the core theory of jQuery
Ability to create CSS tab menu content and JQUERY accordion menu content
Using CSS3 filter properties and object-fit properties
Mobile responsive web publishing production capability (media query)
Full responsive web design capabilities optimized for both PC and mobile versions
Scroll Reveal Animation Plugin
Text Typing Animation Plugin
How to use Slick slider and how to modify custom CSS
Responsive Website Portfolio (App Official Landing) Production Process
' Over 22 hours of responsive website portfolio lectures' 'Core theory class and responsive website creation course' ' Course on creating a responsive portfolio homepage for publisher employment' ' Hardcoding class for real skills in practical publishing' 'More than 9 hours of essential jQuery plugin usage and CSS essential core theory video' ' A thorough and systematic class by a current publisher and publishing expert instructor'
📔 Features of the Responsive Website Portfolio Creation Process
01) Responsive website created using pure CSS layout method
02) A website that was created by Coding Works, from UI design to publishing, rather than a clone site or copy site.
03) 14 step-by-step completed versions and UI design PSD files provided for each lecture section ※ The Photoshop UI design was created using Photoshop CC 2019 version.
04) Production lectures totaling more than 22 hours
05) Text editor for theory learning and production The text editors used in this responsive website creation course are Visual Studio Code and Brackets . Of course, you can use other text editors. You can use the text editor that the students are familiar with. However, text editors without real-time preview functions may be difficult to follow.
06) Essential core theory videos for learning a smooth production process (Slick Slider, Reveal Animation) Excluding the lecture on creating a responsive website portfolio (App Official Landing Website), there are over 9 hours of core theory lecture videos, including how to use jQuery plugins and essential CSS theories for production. If you come to the practical production section without watching these videos, you may find it difficult to follow. Please fully learn the contents that you feel are unfamiliar or lacking in [Section 2. How to use essential jQuery plugins and essential CSS core theories] .
💡 Preview PC layout section switching
💡 Mobile Layout UI/UX Preview
🙋🏻♂️ 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 intermediate or close to it to follow along well. If you think you are not at least beginner, 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 you 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.
📕 Coding Works' suggested learning methods for efficient learning
I think everyone has a different learning method. So there is no right answer. However, I think there is an effective learning method that experienced people and creators think of. So Coding Works suggests an effective learning method.
[Step 1] Watch the entire production process from Section 3 to Section 16 from start to finish in video without any hands-on training.(It's a production process that takes over 12 hours, so it's not easy to just watch it. So, feel free to watch it while eating on the go. Just pay attention to what's being made and in what order.)
[Step 2] If you do step 1, you will naturally know which parts require theory and which parts require preparation. Then, you will learn the theory required for production to some extent, even if it is not perfect. If you are not at the beginner level, I think you will not be lacking because I have prepared a video for Section 2. How to use essential jQuery plugins and CSS essential core theories. However, please study essential HTML+CSS theories such as virtual classes and selectors on the Coding Works YouTube channel.
[Step 3] Please watch the video carefully and practice from Section 3. I think it will be much easier to follow since you have prepared well in advance.
[Step 4] Once you have completed creating the entire responsive website with the video, open the provided Photoshop PSD file and modify the UI design to your own theme. Do not make any major changes to the layout, but make partial modifications to the existing layout to complete your personal portfolio UI design.
[Step 5] Based on the UI design you have created , create a functional definition and HTML structure in PPT and complete it by publishing it in practice. Then, your own design portfolio and publishing portfolio will be complete.
🙋🏻♂️ 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 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.
▲ Go to Coding Works YouTube channel
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 you should study a few more lectures like this course and study a few of the entire website creation process. Of course, you should also create a personal portfolio homepage. The entry barrier to 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 or beginner course, but an intermediate-level course on creating and publishing a full responsive website. We recommend that you take other courses to learn the basic theory part and 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. Would it be a good idea to first look at <Practical Guide to Getting a Job as a Publisher> 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 learn the publishing basics to gain a sufficient understanding. Click on the image below to see the class introduction.
▲ 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.
Interview and employment-inducing publisher personal portfolio homepage production, scss, sass, flex, grid, html, css, html/css, website, web publisher, publisher employment, website, 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
Recommended for these people
Who is this course right for?
Publishers who want to experience the entire website creation process
Those who want to create a real website using publishing basics
If you need to create a personal portfolio website for publishing
Need to know before starting?
Basic HTML+CSS coding skills
Hello This is
12,637
Learners
745
Reviews
2,114
Answers
4.9
Rating
23
Courses
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 ■ [현재] 프리랜서 프론트엔드 퍼블리셔 ■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영 ■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사 ■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사 ■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사 ■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사 ■ UI/UX 웹 디자인 포트폴리오 강의 ■ 웹디자인 기능사 실기 자격증반 강의 ■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
Before taking the class, I thought I had to make a homepage! and when I started coding, the structure didn't turn out as I had planned, and I made it crooked and gave -230px to the margin and then made it fit in somewhere else. And then I kept repeating, "Ah~ I guess I'm not related to Front~"........
When I watch the video, the overall picture is drawn well, and since the instructor talks about infinite repetition, I think I can understand what the instructor is going to say as I listen.
For example, when the instructor says, "Give float to the child element.", what follows unconditionally is "Give float to the child element, so the parent element loses its height value, so give overflow:hidden to the parent." It comes out almost every time. Even if you don't try to memorize it separately like this, the structure will be in your head because the parent overflow hidden will be repeated so much that you can memorize it like a machine even if only the plot appears in the plot.
In the lecture introduction, the learning method is to look at the section 3 (header~mobile) work comfortably, but I couldn't do that in the previous lecture, and I was satisfied with the result. So when I saw the result I made with the instructor, I thought it was my own..ㅎ But when I saw the result and thought, "I'm proud~ Let's try something else!!".. When I actually tried to do it alone, it didn't work well. So this time, I just emptied my mind and watched it while lying in bed, while eating tangerines, while doing laundry, and on the bus. When I really had time, I thought I would fill the lecture time instead of YouTube, and I watched it all the time. I watched it in the most comfortable position I could find when I sat in front of the PC..(..ㅎ Isn't this the advantage of online?) As I listened, I inevitably came across content that I didn't know well. When I listen to those things again, I will probably remember them vaguely, but when I learn them once, I lightly open a notepad or (if listening on a PC) write notes on the right side of the Inflearn lecture and add simple notes, so I listen to them without getting sleepy (<s>Sleep Slave</s>) and my hands are not idle, so I remember them better. And, when I say 'I finished the lecture today~', I organize the contents I learned today that I really didn't know in my notepad, so I can easily look at them and understand them, and it's also convenient when I review them.
And then, when I read them a second time, when I look at them while inputting the code myself, rather than making them at the same speed as the instructor, I think it's fun to first look at the finished version + basic structure, make them, quickly add CSS, and compare how I added them differently from the instructor. That way, I think I can tell if they're completely mine or if I just practiced typing. Also, I think this way, there will be good questions.
After reading it twice, I think it would be good to look at various sites and make it yourself without pressing F12. However, after reading it twice (including the previous lecture), I saw myself imitating the structure of most sites because I could see it!!
Therefore, rather than thinking, “I’m going to finish it in one reading because I’m pressed for time!”, I think it’s an excellent learning method to read it once in the most comfortable position in the world, and when you input the code directly in the second reading, first create it and compare it while referring to the vague memories + notes you wrote. Anyway, I think it’s a lecture that even an idiot like me can follow to some extent, so it’s a lecture worth challenging for anyone!!!!
p.s) By the way, this lecture is for beginners, but is this a beginner video..?...... (Is the end of publishing still far away? ㄷㄷ....... )
aToring-nim~ Your course review is really thorough and detailed.
There has never been a course review this long and detailed before, and I don't think there will be a course review this long and detailed in the future.^^
As much as you work hard, you will soon get good results. Fighting!!
This is the third time I learned the practical site creation part of Coding Works' lecture.
Since I took the Flex site creation lecture before this lecture, I didn't use float and just set the layout with flex.
Since I had some time, I made a separate logo and changed the design a little bit.
I got a more solid concept of SlickRider this time.
I think I learned a little more about the concept in the js part.
Since there were a lot of animations, that part was especially impressive this time, and the FAQ part, such as how to create an accordion and how to create a tab menu by connecting input and label, was also very helpful to me.
One thing that was a little disappointing was that I was working on a monitor with a resolution of 3840.
When I set the vertical on the main screen to 90vh, the gap between the next paragraph, CEO access, and the next paragraph was too wide.
Also, when I worked with flex, when there was a left-right animation, the horizontal scroll occurred and the screen broke, and the fixed header at the top of the screen sometimes moved back and forth or disappeared. At first, I didn't know why the scrolling happened, so I spent the whole day looking at the source code and pulling my hair out.
Later, I found out that it was probably because of that.
So, I changed all the parts that were in flex to float in relation to animation, and there was no problem.
Anyway, I really enjoyed the passionate lecture,
and I wish you continued success.
Thank you!
I didn't even turn on the sound, and at work... I only roughly watched the PC version of the flow. I really only know the flow...
Now I'm curious to see how much it will change if I watch the lecture properly and follow along, and if I don't watch it. Will it really be possible?? I'll edit the bottom later. As a side note, I'm still bored because I only do design work at work. I hate it.
This is a much better lecture than any other lecture I have ever taken. The instructor explains it really, really well, in a way that is easy to understand both theory and practice!! Thank you so much, instructor! I am so satisfied that I want to listen to all the lectures that are uploaded!! ^^
Hello mm
I'm so glad that the lecture was helpful.
Thank you for being interested in other Coding Works lectures.
If you have any questions about Let's Study, please ask. Thank you for your review~
Seunghoon, you've already completed the course? It's only been a week since the lectures were uploaded, but you've been working hard and diligently. I think it would be good to change the work you've done this time and make it into a personal portfolio. Thank you for your course review~^^
![[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.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)