강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Web Development

Flex Responsive Website Portfolio (The World's Best Cities)

Through the process of creating a Flex responsive website, you can build a solid foundation for intermediate publishing skills. In addition, there are thorough lectures on Flex from the basics to applications and even practical UI creation. With more than 20 hours of Flex theory, practical examples, and responsive website creation, you will gain skills and confidence that are comparable to practical experience.

(5.0) 38 reviews

542 learners

  • codingworks
Flex
Responsive Web

Reviews from Early Learners

What you will learn!

  • Enhance your practical publishing skills through the core theories of HTML+CSS+JQUERY

  • Improve your Flex responsive website publishing skills and know-how

  • Mobile responsive web publishing production capability (media query)

  • Full responsive web design capabilities optimized for both PC and mobile versions

  • Accurate concept and use of position and display properties

  • Flex Core Theory and Practical UI Creation Skills

How to Create a Flex Responsive Website Portfolio

'Over 23 hours of Flex responsive website publishing lectures'

How to use a text editor (5 lessons, about 2.5 hours)
Flex Core Theory (14 lectures, approximately 2.5 hours)
Flex UI Application Examples by Type (12 lectures, approximately 2.5 hours)
Flex Practical UI Creation (23 lectures, about 6 hours)
Flex Practical Responsive Website Creation (23 lectures, approximately 7 hours)

Flex Core Theory PDF Textbook Provided
Download all completed examples produced in class
Photoshop UI design file

🙋🏻‍♂️ 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.

▼ Flex Responsive Website (The World's Best Cities) - PC Version

▼ Flex Responsive Website (The World's Best Cities) - Mobile Version

Preview of the Flex Core Theory Lecture

Preview of Flex UI application examples by type

Preview of Flex Practical UI Creation Lecture

▼ Flex Responsive Website (The World's Best Cities) - PSD file provided (no restrictions on usage)

▼ Flex core theory PDF textbook provided (total 36 pages)


🙋🏻‍♂️ Prerequisite knowledge for taking the course

This lecture is a course on the subject of Flex, from the core theory of Flex to application and practical examples. And at the end, there is also a course on creating a responsive website using Flex. This lecture has the special feature of being a lecture on the theme of Flex responsiveness, but it is similar to a general publishing lecture.

Don't be too scared and start, because the Flex core theory will proceed step by step from the basics. However, you should have a basic understanding of HTML+CSS. If you are still lacking, you can take the Flex course while studying HTML+CSS.

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 conclusion is...

I don't think there will be any major problems in following along unless you are a beginner or just starting out.
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.


🙋🏻‍♂️ Learning methods for efficient learning

  • Sections 3, 4, and 5 can be downloaded from Section 6. Student Reference Materials and Download of Completed Works . ( Section 2 is a theory learning video, so it is the [Coding Works] FLEX Core Theory PDF Textbook.pdf file. )
  • Section 2. When studying the Flex core theory, study along with the core theory PDF textbook.
  • Section 3. Flex Type-Specific UI Application Examples and Section 4. Flex Practical UI Creation are the completed compressed files, so you can unzip them and start from the desired learning content. Since this is the completed version when you start learning, delete the index.html and style.css files and start from the beginning.
  • Section 5. When learning how to create a practical responsive website with Flex, download the completed version, unzip it, delete the index.html, style.css, responsive.css, and custom.js files, and start from scratch.
  • All completed examples come with a file called SOURCE.txt, which is intended for copying and pasting text for creating examples. Please make good use of it.


🙋🏻‍♂️ 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.

Q. If I take this course, will I be able to work as a publisher in the field?
A. If you can do the last step of this course, 'Flex Practical Responsive Website Creation' on your own, I think you will be able to get a job. Of course, this course does not cover all the publishing skills needed for a publisher job, but I think that just being able to create a responsive website with Flex is a good start.

Q. Is there a separate theory part in this course that explains HTML+CSS+JQUERY publishing theory?
A. The course you are currently taking is a course that studies Flex, creates Flex in practice, and creates Flex responsive websites, so there is no separate part on basic publishing theory required for the introductory beginner course, except for Flex theory. We recommend that you improve your skills by taking another course to learn the basic theory part and 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 capture the HTML, CSS, and JQUERY coding screens you are writing along with the content you are curious about.

Q. Where can I get the completed sample, PSD file, and textbook PDF file?
A. All files provided to students can be downloaded from Section 6. Student Reference Materials and Download of Completed Version at the end.

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.


▲ 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 it's amazing 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.

Coding Works Publishing YouTube Channel: https://www.youtube.com/codingworks

 

👨🏼‍🏫 Instructor Introduction

  • (Currently) Freelance Frontend Publisher
  • Jo Eun Computer Academy Web Publishing Instructor
  • Now a Web Publishing Instructor at Computer Academy
  • Front-end publisher, front-end publishing specialist
  • Now, the Computer Academy Web Design Technician Practical Certification Course
  • Lakpia ICT Training Center Front-end Publishing Master Course Instructor
  • Easy & Edu Front-end Publishing, UI/UX Design
  • HTML+CSS+JQUERY publishing YouTube channel 'Coding Works' operation
  • 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, 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 process of creating a Flex responsive website

  • 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,580

Learners

739

Reviews

2,110

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

Curriculum

All

101 lectures ∙ (23hr 40min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

38 reviews

5.0

38 reviews

  • Next님의 프로필 이미지
    Next

    Reviews 9

    Average Rating 4.6

    5

    100% enrolled

    안녕하세요ㅎ 강의 올라온거 확인하고 바로 수강했습니다😄️😄️ 중급 실전 퍼블리싱부터 전편 반응형 웹사이트 제작 강의까지 다 봤는데 정말 자세하게 이해하기 쉽게 설명해주셔서 너무 만족스럽게 들었고, 진짜 강의 완강할 때마다 제 스스로가 실력이 엄청 많이 늘었다는게 느껴져서 너무 기분이 좋고 뿌듯합니다. 이런 좋은 강의 만들어주신 강사님께도 너무 감사드립니다! 제 개인적으로는 기존 레이아웃잡는 방식보다 Flex방식으로 레이아웃 잡는게 더 편하고 쉬웠는데 IE 문제때문에 Flex를 제대로 배우고 사용하고 싶어도 사용하지 못했었는데 이제 IE 지원 중단을 한다고하니 앞으로 Flex도 꽤 자유롭게 사용할 수 있을꺼 같아 이번 강의도 너무 기대됩니다~

    • 코딩웍스(Coding Works)
      Instructor

      코더님~ 코딩웍스입니다. 제강의 완강할 때마다 실력이 느신다는 말이 저를 보람있게 하네요. 지금처럼 꾸준히 공부해주시고 늘 건강 조심하시구요. 알찬 수강후기 감사해요.^^ 코더님 수강후기가 예비 수강생들에게 좋은 가이드가 될거라고 생각합니다

  • sally3210님의 프로필 이미지
    sally3210

    Reviews 1

    Average Rating 5.0

    5

    5% enrolled

    안녕하세요. 선생님의 유튜브 강의 열심히 듣는 학생입니다. 그렇잖아도 플렉스 강의가 없어서 여기저기 찾는중이었는데 선생님이 딱 올리셔서 바로 올리자 마자 수강신청하고 듣는중인데 웹사이트가 넘 예쁘네요. 다 듣고 나면 포토샵 조금 수정해서 개인 홈페이지에 써도 되겠지요? 혹시 플렉스 웹사이트 제작한거 조금만 바꿔서 개인 포트폴리오로도 써도 되는지 여쭤봅니다. 그럼 다시 계속 열공하러 ~~~

    • 샐리님~ 코딩웍스입니다. 그럼요. 얼마든지 개인 용도로 사용하세요. 포토샵 PSD 파일을 제공하는건 퍼플리셔라고 해도 포토샵이 익숙하지 않은 사람들도 있잖아요. 그럼 개인 포트폴리오 홈페이지 만드는거 시작하는게 쉬운 일이 아니잖아요. 그래서 제공하는거니까 얼마든지 사용하세요~ 그대로 사용하셔도 되지만 그래도 포토샵 파일 본인에 맞게 수정하셔서 사용하세요. 열공하시고 궁금한 점은 질문주세요~^^

  • ljy329s님의 프로필 이미지
    ljy329s

    Reviews 11

    Average Rating 5.0

    5

    78% enrolled

    선생님 안녕하세요 저는 백앤드 개발자로 근무하다 취업등의 문제로 급하게 선생님의 강의를 듣게된 수강생입니다. 그동안 css는 너무 어렵고 접근하기조차 용기가 안나는 영역이었습니다. 어쩌다보니 이번에 퍼블리싱 능력을 급하게 키워야해서 걱정하다 선생님 강의를 들었는데 너무 너무 재밌고 이해가 잘되는지라 감사했습니다. 불과 얼마전만해도 개인프로젝트를 할때 가운데정렬이 어려워 폭풍 검색하고 GPT가 알려주는 그대로 붙여넣기에 바빴는데 이제는 이해하고 사용할 수 있게 됐습니다. 강의 초반만 해도 이런구조는 어떻게 레이아웃을 잡아야하는거지? 생각하며 어려웠었는데 이제는 예제를 보자마자 이렇게 나누면 되겠구나가 눈에 보이더라구요ㅎㅎ 이렇게 재밌고 상세한 강의를 해주셔서 감사합니다. 이제 섹션 9 파트만 남았는데 마저 들은후 선생님의 그리드 강의까지 이어 듣도록 하겠습니다ㅎㅎㅎ 감사합니다.

  • applecubic3님의 프로필 이미지
    applecubic3

    Reviews 2

    Average Rating 5.0

    5

    31% enrolled

  • 김가희님의 프로필 이미지
    김가희

    Reviews 10

    Average Rating 5.0

    5

    100% enrolled

    육아를 하고 있어서 퍼블리싱 공부를 온라인으로 밖에 못하는데 여기저기 알아보다가 인프런에서 코딩웍스 선생님을 알게 되었습니다. 지금 선생님한테 나온 강의 중에서 거의 반정도 들은 것 같아요. 강의시간도 길어서 좋았고 정말 꼼꼼하게 가르쳐 주시고 무엇보다 강의가 지루하지가 않고 이해가 잘 되게 가르쳐 주십니다. 특히 플렉스 강의는 진짜 너무너무 도움이 되었던 것 같아요. 웹퍼블리셔 공부 하시는 분들에게는 최고의 강의인 것 같습니다. 앞으로도 좋은 강의 많이 부탁드립니다. 저도 열심히 공부해서 꼭 취업하도록 하겠습니다 ~~

$42.90

codingworks's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!