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
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] .
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.
Except for a few things, I think it will be much easier to follow along if you study the contents of ' HTML+CSS+JQUERY Portfolio Intermediate Practical Publishing Course ' once in order to create this responsive website.
The bottom line is...
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.
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.
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
▲ 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 check the frequently asked questions in the relevant lecture community first~
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
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
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
12,605
Learners
743
Reviews
2,113
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
108 lectures ∙ (23hr 47min)
Course Materials:
All
30 reviews
5.0
30 reviews
Reviews 5
∙
Average Rating 5.0
5
강의 수강 전에는 홈페이지 하나 만들어야지! 하고 코딩을 하면, 꼭 내 머리대로 구조가 나오지 않고 삐뚤뺴뚤하고 마진에 -230px을 줬다가 어디다간 또 거의 어거지로 끼워맞추면서 구조를 만들었습니다. 그리고 나서는 "아 ~ 나는 프론트랑은 연이 아닌가보다~" 의 반복........ 영상을 보니 전체적인 그림도 잘 그려지고, 강사님이 무한반복을 얘기해주는터라, 듣다보면 선생님이 아 대충 뭘 얘기하겠구나 하는것도 알 수 있을 정도가 된다고 생각합니다. 예를들어, 강사님이 "자식요소에 float를 줍니다." 라는 멘트를 하면 그 뒤에는 무조건 따라나오는게 "자식요소에 float값을 줬으니까 부모요소가 높이값을 잃어버리므로 부모에 overflow:hidden을 준다"라는게 거의 매~~~~~~~~번 나옵니다. 이런식으로 따로 외우려고 하지 않아도, 플로트에 플짜만 나와도 부모 오버플로우히든이 기계처럼 외워질 정도로 반복을 해주시기에, 구조가 딱 머리에 들어오게 됩니다. 강의 소개에 보면, 학습방법으로 섹션3(헤더~모바일) 작업을 편하게 보라고 하시는데, 저도 이전 강의에서는 그러지 못하고, 그저 결과물이 나오면 그것에 만족을 했습니다. 고로 강사님과 같이 만든 결과물을 보고 제가 만든것이라고 착각을 하게 되더라고요..ㅎ 근데 결과물 보고 와 뿌듯하다~ 다른거에 도전해볼까!! 라고 하면.. 막상 혼자하려니 잘 안되더군요. 그래서 이번엔 그냥 마음 비우고 처음엔 침대에 누워서도 보고, 귤까먹으면서도 보고, 빨래돌리면서도 보고, 버스에서도 보고 ㅋㅋ 정말 시간나면 유투브 대신 강의 시간 채운다 생각하고 쭉쭉 봤습니다. pc앞에 앉아서 볼때도 세상 편한 자세로 봤는데..(..ㅎ 이게 바로 온라인의 장점 아닙니까) 듣다보면 무조건 본인이 잘 모르는 내용들이 나오더라구요. 그런것들은 다시 들으면 물론 어렴풋이나마 생각이 나겠지만, 한번 배울때 가볍~~게 메모장 하나 켜서 or (pc로 듣는다면) 인프런 강의 오른쪽에 필기하기에다가 간단한 메모들을 곁들여서 들으니 덜 졸리고(<s>잠의노예</s>) 손이 놀고 있지 않으니까 기억이 더 잘 나더라고요. 그리고, '강의 오늘 다들었다~' 하면끝맺음으로 오늘 배운 내용들 중에 내가 정말 몰랐던 내용들이 메모장에 정리가 차곡차곡 되니까, 가볍게 슥 보면서 이해하고, 복습할때도 편하고요. 그리고 나서, 2회독을 할때는 직접 코딩을 입력하면서 볼때는 굳이 강사님과 같은 속도로 만들기 보단, 먼저 완성본사진+기본구조를 보고 먼저 만들어보고, css 뚝딱뚝딱 넣고나서, 어떻게 강사님과 다르게 넣었는지를 비교하면서 보는것도 하나의 재미라고 생각합니다. 그래야 온전히 내것인지 아니면 내가 타자연습만 했는지 잘 알 수 있다고 생각합니다. 또한 이렇게 해야 질문도 질좋은 질문이 오갈 수 있다고 생각합니다. 2회독을 마치면, 여러 사이트들을 보면서 f12를 누르지 않고 스스로 만들어 보는것도 좋다고 생각합니다. 그런데 2회독을 마치면(이전강의 포함) 웬만한 사이트들은 구조가 눈에 들어와서 얼추 비슷하게 흉내내는 저의 모습을 보게 되더군요!! 고로, 시간에 쫓기어 1회독에 끝낼거야! 라고 생각하기 보단, 1회독은 정말 세상에서 제일 편한 자세로 보고, 2회독에서 직접 코드 입력할땐, 어렴풋이나마 남는 기억 + 내가 쓴 메모장을 보면서 참고할 사항들은 참고하며 먼저 만들고 비교하기가 정말 탁월한 학습방법이라고 생각합니다. 여튼 저같은 바보도 어느정도 따라가는 강의라 함은, 여느 누구도 도전할 가치가 있는 강의라고 생각합니다.!!!! p.s) 아니 근데, 이 강의 초급대상이라고 되어있는데, 이거 초급영상 인건가요..?...... (퍼블리싱의 끝은 아직 먼것인가 ㄷㄷ....... )
a토링님~ 수강평에 정말 꼼꼼하고 자세하네요. 전에도 없었지만 앞으로도 이렇게 길고 상세한 수강평은 없을 것 같습니다.^^ 노력하시는 만큼 곧 좋은 결과 있을 거예요. 화이팅!!
Reviews 3
∙
Average Rating 5.0
5
코딩웍스님 강의중 실전 사이트 제작 파트를 세번째로 학습했습니다. 이 강의 이전에 플렉스 사이트 제작 강의를 들었기 때문에 float는 사용하지 않고 일단 flex로 레이아웃을 잡았습니다. 시간적인 여유가 있어서 로고도 따로 만들고 디자인도 나름대로 약간 변경해서 잡아 보았습니다. 슬릭스라이더에 대한 개념을 이번에 조금 더 확실히 잡게 되었구요. js 파트에서도 개념 정리를 조금 더 익힌것 같습니다. 애니매이션이 많아서 이번에 그 부분이 특히 인상 깊었으며, FAQ 파트에서 어코디언 만드는 법, input과 label을 연결해서 탭메뉴 만드는 법 등도 저에게는 많은 도움이 되었습니다. 약간 아쉬운 점은 제가 3840 해상도의 모니터에서 작업을 하다 보니. 메인 화면에서 세로를 90vh로 했을때 다음 단락인 ceo access 와 간격이 너무 많이 벌어지게 된다는 점. 또한 flex로 작업을 했을때 좌우 애니매이션이 될 때 가로스크롤이 생기면서 화면이 깨지고, 화면 상단에 fixed된 header가 왔다갔다 하거나 숨어버리는 경우가 생기게 되더라구요. 처음에는 스크롤이 생기는 원인을 몰라서, 하루종일 소스를 보면서 머리를 쥐어뜯었는데. 나중에 보니까 그런 이유였던것 같습니다. 그래서 flex로 되어 있던 부분중에 애니매이션 관련 되는 곳은 모두 float로 수정했더니 이상이 없습니다. 아무튼 열정 넘치는 강의 너무 감사히 잘 들었으며 항상 건승을 기원 합니다. 감사합니다!
수강평 감사드립니다~!!
Reviews 6
∙
Average Rating 5.0
5
소리도 안키고 회사에서,,, 아주대충 흐름만 pc버전까지 봤습니다 정말 흐름만 아는... 이제 강의 제대로 보면서 따라하고, 안보고 하고 얼마나 달라져있을지 궁금하네요 과연 그럴수 있을것인지?? 나중에 하단에 수정합니다 여담이지만 아직 회사에서 디자인 일만해서 심심해요ㅠㅠ시..싫고
lololo님 오랜만이네요. 현직 디자이너이시군요. 퇴근하시고 힘드시니까 주말에 차근차근 한 단계 한 단계 영상 보면서 따라해 보세요~
Reviews 5
∙
Average Rating 5.0
5
그동안 들었던 어떤 강의보다, 실력향상에 도움이되는 월등한 강의입니다. 이론과 실습 모두 이해하기 쉽게, 강사님께서 정말 정말 설명을 잘 해주세요!! 강사님 정말 감사드려요! 업로드 되는 강의 모두 듣고 싶을정도로 만족도가 높습니다.!! ^^
mm님 안녕하세요 강의가 도움이 되셨다니 정말 기쁘네요. 코딩웍스 다른 강의들도 관심을 가져 주신다니니 감사드립니다. 공부합시다가 궁금한 점 있으면 질문 주세요.수강후기 감사드려요~
Reviews 1
∙
Average Rating 5.0
5
완강 성공 했습니다. 원래 기초 지식도 있고 해서 5일만에 완강 해버렷네요.. 포트폴리오 하나 쌓고 갑니당!^^
승훈님 벌써 완강을 하셨다고요? 강의 올라간지 일주일밖에 안 됐는데 부지런히 열심히 하셨네요. 이번 작업하신 거 변경 하셔 가지고 개인 포트폴리오로 만드시면 좋을 거 같습니다. 수강후기 감사드립니다~^^
Limited time deal
$46,200.00
25%
$48.40
Check out other courses by the instructor!
Explore other courses in the same field!
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
