Responsive Website Portfolio (App Official Landing Website)
The production process for the Responsive Website Portfolio (App Official Landing) involves the entire creation of a responsive website using HTML+CSS+JQUERY publishing. Through this, you will solidify the fundamentals required to reach an intermediate publishing level and gain practical publishing know-how. In particular, you will experience the entire website production process through thorough explanations and hands-on practice, gaining confidence in creating your own personal portfolio website. You will also learn how to use essential jQuery plugins such as Scroll Reveal Animation and Slick Slider. The responsive design follows the traditional method using float and position for layouts, though Flex is utilized for certain specific elements.
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!
5.0
이슬비
100% enrolled
I listened to this substantial lecture all the way to the end.
The curriculum is so well-structured that anyone who wants to achieve beyond beginner level skills absolutely must take this course.
I think it would have been a substantial lecture even for intermediate learners. The lecture is good enough to be worth listening to at that level.
If you're a beginner or novice, you absolutely must take the core theory lectures. It felt like it filled in the gaps in my knowledge.
I think you need to listen to it even more if you want to easily follow the responsive landing page content that comes later.
They do explain things during the landing page section as well, but if you listen to this first and then proceed, you'll understand much more easily.
There may be differences depending on who's listening, but for me, I thought it was just the right lecture.
The explanations were excellent so I understood well, and it was a lecture that's also necessary for practical application.
It helped me a lot. Thank you for the great lecture.
5.0
a토링
75% enrolled
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? ㄷㄷ....... )
What you will gain after the course
Improving overall website publishing skills and know-how
A responsive layout with 99% placement using the traditional methods of float and position.
Accurate concepts and practical applications of the position property
Understanding and utilizing hover, before, after, checked, and active pseudo-classes
Learning and Application of Core jQuery Theory
Ability to create CSS tab menu content and jQuery accordion menu content
Utilizing CSS3 filter and object-fit properties
Ability to create mobile-responsive web publishing (media queries)
Full capability to create responsive websites 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 total of responsive website portfolio lectures' 'Core theory classes and responsive website production process' 'Responsive portfolio website production course for getting a job as a publisher' 'Hard coding classes for real-world publishing skills' 'Over 9 hours of essential jQuery plugin usage and essential CSS core theory videos' 'Meticulous and systematic lessons from a current publisher and professional publishing instructor'
📔 Features of the Responsive Website Portfolio Creation Course
01) Responsive website created using pure CSS layout placement methods
02) Not a clone or copy site, but a website created by Coding Works directly from UI design to publishing
03) Providing 14 step-by-step completed versions for each lecture section and UI design PSD files ※ The Photoshop UI design was created with the Photoshop CC 2019 version.
04) Over 22 hours of production lectures in total
05) Text editor for theory learning and production The text editors used in this responsive website production lecture are Visual Studio Code and Brackets. Of course, you may use other text editors. You can use any text editor you are familiar with. However, it may be difficult to follow along with a text editor that does not have a live preview feature.
06) Essential Core Theory Videos for a Smooth Production Process (Slick Slider, Reveal Animation) Excluding the Responsive Website Portfolio (App Official Landing Website) production lectures, there are over 9 hours of core theory lecture videos covering jQuery plugin usage and essential CSS theories for production. If you skip these videos and jump straight to the practical production section, you may find it difficult to follow along. Please ensure you have sufficiently studied any unfamiliar or lacking topics in [Section 2. Essential jQuery Plugin Usage and Essential CSS Core Theory] before proceeding.
💡 PC Layout Section Transition Preview
💡 Mobile Layout UI/UX Preview
🙋🏻♂️ Prerequisite knowledge for taking the course
The difficulty level of this responsive website creation course is not for beginners or entry-level students. The recommended level is intermediate or close to it to follow along effectively. If you feel you are at least beyond the beginner stage, I believe you won't have much difficulty following the course.
As for prerequisite knowledge, you just need to know the basics of HTML+CSS. You don't necessarily need to be proficient in them. I provide thorough explanations at a relaxed pace throughout the course, which spans over 20 hours. If your coding is slow and you find yourself falling behind while writing HTML+CSS, you can simply pause the video, finish your coding, and then move on to the next step.
It's just that you need a little more time than others because you're pausing the video to code. In fact, it's even better in the sense that you're taking the time to code calmly on your own. I hope you don't worry too much and continue studying with me. ^^
Among my courses, there is 'HTML+CSS+JQUERY Portfolio Intermediate Practical Publishing Course'. The theoretical content and practical examples in this course cover almost everything needed for this responsive website production. In short, I believe it is a course that will help you firmly establish your HTML+CSS+JQUERY fundamentals.
If you are not at a beginner or introductory level, you won't have trouble following along, but it might feel a bit challenging. If you have already mastered the basics of HTML+CSS through other courses, I believe you will not only be able to follow along sufficiently but also complete the responsive website creation process with a clear understanding of why things are done this way.
📕 CodingWorks' Suggested Learning Method for Efficient Learning
I believe everyone has a different way of learning. Therefore, there is no single right answer. However, I believe there is an efficient learning method from the perspective of an experienced creator. That's why I would like to suggest the efficient learning method proposed by Coding Works.
[Step 1] Watch the entire production process from Section 3 to Section 16 from start to finish without practicing.(Since it's a production process over 12 hours long, just watching it is no easy task. So, watch it casually while commuting or eating. Just keep an eye on what is being made and in what order.)
[Step 2] By completing Step 1, you will naturally realize which theoretical parts and preparations are necessary. Then, you will learn the theoretical matters required for production to some extent, even if not perfectly. If you are not at a beginner level, I have prepared videos in Section 2: Essential jQuery Plugin Usage and Essential CSS Core Theory, so I believe they will be sufficient. However, please study essential HTML+CSS theoretical matters such as pseudo-classes and selectors on the CodingWorks YouTube channel.
[Step 3] Please watch the videos carefully starting from Section 3 and follow along with the practice. Since you are well-prepared, I believe it will be much easier for you to follow along.
[Step 4] Once you have finished creating the entire responsive website along with the video, open the provided Photoshop PSD file and modify the UI design by choosing your own theme. Do not make major changes to the layout, but partially modify the existing layout to complete your personal portfolio UI design.
[Step 5] Based on the created UI design, create a functional specification and HTML structure in PPT, then proceed with actual publishing to complete it. This will complete your own design portfolio and publishing portfolio.
🙋🏻♂️ Expected Questions and Must-Read Items Regarding the Lecture
Q. Are there videos explaining intermediate CSS theories that come up while creating the examples? A. Questions like 'A lot of intermediate theories not covered in the basic theory are appearing while making the examples; where can I take the intermediate theory classes?' are frequently posted on the board.
This current course is not about creating beginner-level publishing examples. It is a course for creating beginner to intermediate publishing examples. Therefore, you need to have a certain level of knowledge in beginner-intermediate CSS theory. However, you don't necessarily need to be an expert. Beginner-intermediate CSS theories will be repeated continuously while creating the examples. Also, the Coding Works YouTube publishing channel has a playlist called [Intermediate Theory] CSS Intermediate Theory, which contains detailed videos on essential intermediate theories needed for example production. It would be beneficial to study these intermediate theories alongside this course.
▲ Go to CodingWorks YouTube Channel
Q. If I take this course, will I be able to work as a publisher in the field? A. It is possible if you can understand and utilize all the publishing content in this course. However, publishing requires sufficient experience and the experience of building various types of websites to work in the field. I believe you will be ready if you study a few more courses like this one and complete several full website production processes. Of course, you must also create a personal portfolio website. The barrier to entry for publishing is higher than you might think. Watching a video once doesn't mean all the content and know-how are transferred to the student, so please go through the process of making it your own using the learning methods described above.
Q. There doesn't seem to be a separate theory section explaining the concepts that come up while building the website. A. The course you are currently taking is not an introductory or beginner course, but an intermediate-level course on publishing an entire responsive website. I recommend improving your skills through other courses for basic theory and practical example creation.
Q. Where can I ask questions if I get stuck while studying? A. If you have any questions, please leave a post on the [Q&A] board. I will provide an answer once I check it, though it may not be immediate. Also, please be as specific as possible with your questions. It is difficult to provide a sufficient answer when a question is vague. Therefore, when asking a question, it is much easier for me to help if you attach screenshots of your HTML, CSS, and JQUERY code along with your inquiry.
Q. Instructor, would it be better to watch <The Real Practical Guide to Getting a Job as a Publisher> first? A. While further improving your publishing skills is important, building a solid foundation as a publisher should come first. In the Practical Guide to Getting a Job as a Publisher E-book (PDF), I have meticulously organized the essential knowledge every publisher must know, such as desirable coding habits and principles, and how to publish like an experienced professional. I recommend that you read the Practical Guide to Getting a Job as a Publisher E-book (PDF) first to gain a sufficient understanding of the basics before proceeding with your studies. You can view the course introduction by clicking the image below.
▲ CodingWorks Publishing Lecture Roadmap for Publisher Employment
❤ Publisher job offer news from a Coding Works student
▲ This is a student who studied publishing with me for about four and a half months through a government-funded program, and I received a KakaoTalk message saying they got a job.
▲ I received a KakaoTalk message from a student in CodingWorks' offline personal portfolio creation class regarding their interview and employment results. (2023.4.24)
❤ An email sent by a Coding Works student after getting a job as a publisher
Hello, teacher :)
Hello teacher, I am Kim O-jeong, a student who took your Inflearn lectures. I am the student who sent an email this past summer to get advice regarding my personal portfolio. Do you happen to remember me? haha
The reason I'm writing is to share the news that I successfully landed a job as a publisher with the portfolio I received your advice on!
And even!! The company contacted me first after seeing the portfolio I uploaded to Saramin, and I was hired after a Zoom interview! The company matched my desired salary, and I joined a company where I can focus solely on publisher work without having to do design or development!
It was a company looking for an experienced publisher, but they contacted me even though I'm a newcomer. When I asked why they reached out to me, they said they had looked at many other portfolios, but the "Functional Specification" in my portfolio stood out, which is why they contacted me.
I believe this is all thanks to your lectures. If I hadn't taken your course, mine would have just been an ordinary portfolio, but I was able to successfully get a job thanks to the great tips you shared!
Although I have never met you in person, I relied on and trusted your lectures so much throughout the entire process of creating my portfolio!
I feel that my skills improved significantly during the three months I spent creating my portfolio while following your lectures, more so than the skills I built up over a long period of classes at the academy.
I wanted it desperately, and by trusting and following what you told me, I achieved a truly great result.
Thank you so much!
Please stay safe from COVID-19 and I hope to see you again in another great lecture :)
Hello teacher~ I'm OOO, a student from Inflearn~ I found your email address by looking at your replies to other students.. haha
I just wanted to reach out and say thank you! haha
I've been struggling for about two weeks while applying for jobs after taking your courses... I finally passed an interview at one company and am set to start working.. Thank you so much..ㅠㅠ
To be honest, I was very worried because I am 32 years old. I sent out many resumes, but I wasn't getting many calls... But the hiring manager at this company said they don't usually like people from private academies. haha The company I decided to join is small, but they have developers and web designers. It's a system where they provide training for 3 months before putting you into practical work. The commute is a bit long and the salary is low... but I plan to learn diligently and increase my salary~ haha
Thank you so much for everything. You were so helpful with answering my questions, and it feels amazing to actually get a job after taking an online course like this...
I will continue to study and improve my skills by taking your classes in the future. Fighting!
🙋🏻♂️ Please! Read this before asking a question~!!
If you have any questions while studying, please feel free to ask. When asking a question, you must include the issue you are facing, the code, and a screenshot of the browser result. For the code, please provide all HTML, CSS, and JS files so that I can give you an accurate answer.
If you only describe the problem in text without including your code, it is difficult to provide an accurate answer unless it is a very simple issue. In that case, I will have no choice but to reply with, 'Please upload your HTML, CSS, and JS code along with a browser screenshot,' which ultimately makes getting a solution more cumbersome and time-consuming.
▲ Please check the Frequently Asked Questions in the community for this lecture first~
⚡ For effective learning, please be sure to refer to Coding Works Publishing's YouTube channel.
Please watch the theoretical video lectures on the CodingWorks Publishing YouTube channel in parallel. While not all theoretical videos are on the YouTube channel, almost all important ones are available. Since there are many videos, it is recommended to search for them as shown in the example below.
■ [Current] Government-funded Publishing & Frontend Instructor ■ [Current] Freelance Frontend Publisher ■ [Current] Operator of HTML+CSS+JQUERY Publishing YouTube Channel 'Coding Works' ■ Green Computer Academy Web Publishing Instructor ■ The Joeun Computer Academy Web Publishing Instructor ■ Ezen Computer Academy Web Publishing Instructor ■ Frontend Publisher, Professional Frontend Publishing Instructor ■ UI/UX Web Design Portfolio Lectures ■ Web Design Technician Practical Certification Class Lectures ■ Easy & Edu Frontend UI/UX Design and Publishing
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~^^
![[2026 Examination Standards] Perfect Guide for the Web Design & Development Technician Practical ExamCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?w=420)
![Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?w=420)
![Spring Framework in my hands [Spring 2]Course Thumbnail](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?w=420)