Thumbnail
깜짝 할인 중(D-1)
크리에이티브 웹 퍼블리싱
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
(5.0)
5개의 수강평 ∙ 117명의 수강생

21%

48,400원

61,600원
지식공유자 : 코딩웍스(Coding Works)
총 92개 수업˙총 19시간 6분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 550 공유
초급자를 위해 준비한
[웹 퍼블리싱] 강의입니다.

지금까지 200여명의 오프라인 학원 학생들 신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해 코딩웍스가 심혈을 기울여 만들었습니다. 면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작 강의는 퍼블리셔 취업을 위해 필수로 준비해야 하는 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드입니다. 강의는 총 19시간 이상의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

✍️
이런 걸
배워요!
퍼블리셔 포트폴리오 홈페이지 제작 방법
HTML+CSS+JQUERY+JAVASCRIPT 기본기
최근 취업한 퍼블리셔 실전 면접 질문들과 답변 요령
제이쿼리와 자바스크립트 & 코딩 미션
퍼블리싱 실력을 증명하는 퍼블리싱 결과물 준비하기
개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용
개인 포트폴리오 홈페이지 웹 호스팅 하기
신입 퍼블리셔 지원자로서 꼭! 알고 시작해야 할 필독사항

퍼블리셔 면접+취업 포트폴리오 제작, 
강의 하나에 모든 노하우를 담았습니다.

🔍 개인 포트폴리오 제작 강의, 어떤 강의인가요?

신입 퍼블리셔로 이력서를 보내도 연락이 안 온다면,
그 이유가 궁금하다면,
그건 개인 포트폴리오 홈페이지가 별로여서 그렇습니다.
또 하드코딩한 퍼블리싱 결과물이 너무 없어서 그렇습니다.

국비 퍼블리싱 과정을 수료하고 신입 퍼블리셔로 아무리 이력서를 보내도 면접 연락이 안 옵니다. 개인 포트폴리오 홈페이지를 어떻게 만들어야 하는지, 무엇을 어떻게 해야 하는지 막막하다는 하소연어린 질문을 자주 받습니다. 개인 포트폴리오 홈페이지가 문제인지 리뷰를 해주었으면 하는 부탁도 자주 받습니다.

그런데...
개인 포트폴리오 홈페이지 가이드와 리뷰라는 게 한두 마디 한다고 해결되는 게 아닙니다. 해야 할 말과 보여줄 것이 너무 많습니다. 그래서 이번 강의가 제작되었습니다. 퍼블리셔 포트폴리오 홈페이지 제작이 막막한 신입 퍼블리셔 지원자에게 무엇을 어디서 어떻게 해야 하는지 아주 상세하고 구체적으로 보여드립니다.

특히 하드코딩한 퍼블리싱 결과물을 개인 포트폴리오 홈페이지에 다양하게 많이 있어야 면접 연락을 자주 받습니다. 면접 연락을 자주 받으면 당연히 취업도 빠르게 됩니다. 하드코딩한 퍼블리싱 결과물을 다양하게 만드는게 정말 중요하고, 퍼블리싱 결과물을 만드는 방법을 제대로 알아야 합니다.

▼ 코딩웍스 수강생께서 퍼블리셔 취업 후 보내 주신 이메일(2021.10.13)

선생님 안녕하세요 :) 

선생님 인프런 강의 듣던 학생 김O정입니다.
이번 여름 개인포트폴리오 관련해서 조언 얻고자 이메일 보냈던 학생입니다. 
기억나실련지요?ㅎㅎ 

다름이 아니라,
선생님께 조언 얻었던 포트폴리오로 퍼블리셔 취업 성공했다는 소식을 전하고자 메일 보내요!

심지어!! 
사람인에 올려둔 포트폴리오를 보고 회사쪽에서 먼저 연락이 왔고, 줌으로 면접을 보고 합격했습니다! 
회사쪽에선 희망연봉을 맞춰줬고 디자인, 개발 업무를 하지 않는 정말 퍼블리셔! 업무만 할 수 있는 회사에 들어오게 되었습니다.

경력직 퍼블리셔를 구하는 회사였는데, 신입인 저에게 연락이 와서 왜 저에게 연락을 주셨냐고 물어보니
다른 사람들 포트폴리오도 엄청 많이 봤는데, 제 포트폴리오에서 본 "기능정의서"가 눈에 띄어서 연락을 주셨다고합니다 

이게 다 선생님의 강의 덕분이라고 생각합니다.
선생님 강의를 듣지않았다면 저 역시 그냥 평범한 포트폴리오가 되었을텐데 선생님께서 말씀해주신 꿀팁들로 취업에 성공 할 수 있었습니다! 

비록 실제로 뵌적은 없지만,
포트폴리오를 만드는 내내 선생님 강의 보면서 엄청 의지하고 믿고 열심히 만들었습니다! 

학원에서 긴 시간 수업을 들으면서 쌓았던 실력보다 선생님 강의를 듣고 포트폴리오를 만든 3달동안 실력이 엄청 상승했다는게 느껴집니다

간절히 원했고,
선생님이 말씀해주신대로 믿고 했더니 정말 좋은 결과가 나왔습니다.

정말 감사드립니다!

코로나 조심하시구요
또 좋은 강의로 만나고싶습니다 :) 

▼ 코딩웍스 수강생께서 퍼블리셔 취업 후 보내 주신 이메일(2021.11.26)

코딩웍스 선생님, 인프런 강의 수강자입니다~ 

선생님 안녕하세요~ 인프런 수강생 OOO이에요~ 선생님 메일 주소는 다른 수강생 답변보고 알았습니다..ㅎㅎ
감사 인사 전해드리려구요 ㅎㅎ

지금까지 선생님 강의 수강하고 2주 정도 이력서 내보면서 고생 좀 했는데요..
회사 한 곳 면접 합격하여 출근하기로 했습니다.. 정말 감사드립니다..ㅠㅠ

사실 제가 나이가 32살이라 걱정이 많았습니다 이력서를 많이 넣었는데 연락도 잘 안오고..
근데 이 회사 인사담당자가 본인은 학원 출신은 안좋아한다고 하더라구요 ㅎㅎ
제가 입사하기로 한 회사는 작지만 개발자도 있고 웹디자이너도 있습니다.
3개월동안 교육시키고 실무에 투입하는 식이더라구요.
거리도 좀 있고 연봉도 낮긴하지만.. 열심히 배워서 연봉을 올려보려구요~ ㅎㅎ

그 동안 정말 감사했습니다. 질문 답변도 잘해주시고 이렇게 온라인으로 강의를 들어서 취업이 되니까 너무 신기하네요..

앞으로도 선생님 강의 들으면서 실력 더 키우면서 공부하겠습니다. 화이팅~!

 

 

⚡ 효과적인 학습을 위해 꼭! 코딩웍스 퍼블리싱 유튜브를 참고해주세요.


코딩웍스 퍼블리싱 유튜브 채널에서 이론 영상 강의와 병행하시기 바랍니다. 물론 모든 이론 영상이 유튜브 채널에 있는건 아니지만 중요한 이론 영상은 거의 다 있습니다. 영상이 많으니까 영상을 찾는 방법은 아래 예시처럼 검색하시는게 좋습니다.

코딩웍스 퍼블리싱 유튜브 채널 : https://www.youtube.com/codingworks

 


신입 퍼블리셔로 면접 연락을 자주 받고 빠르게 취업할 수 있는 
개인 포트폴리오 홈페이지 제작 과정을,
현장 경험과 노하우를 총동원해 상세하고 체계적으로 알려드립니다.

취업 포트폴리오 준비를 위한 다양한 콘텐츠

이번 '퍼블리셔 개인 포트폴리오 홈페이지' 제작 강의는 총 19시간 이상다양한 컨텐츠의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

퍼블리셔 취업을 위한 개인 포트폴리오 제작, 
어디서 어떻게 시작해야 할지 막막하셨죠?
구체적이고 정보와 가이드를 인터넷에서 찾기 어려우셨죠?

개인 지도를 받듯 상세하고 꼼꼼하게

저 역시 강의를 준비하면서 어려웠습니다. 오프라인 학원에서 학생들과 직접 대면하면서 지도하는 것도 정말 힘든 일입니다. 가르치는 사람이 같은 방식으로 가르쳐도 개인 홈페이지를 만드는 사람의 성향, 능력 등 모든 것이 다르기 때문에 옆에서 붙어서 일일이 지도하지 않으면 힘들어서 그렇습니다. 그래서 이번 강의는 오프라인 학원에서 개인 지도를 받는 느낌을 받으실 수 있도록 최대한 상세하고 꼼꼼하게 제작되었습니다.

지금까지 200여명의 오프라인 학원 학생들,
신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해,
코딩웍스가 만들었습니다.

코딩웍스의 노하우를 모두 담았습니다

코딩웍스가 최근 3년간 국비 웹 퍼블리싱 과정 강사를 하면서 200여명의 학생들에게 퍼블리싱 교육을 하고 수료 전 취업을 위한 개인 포트폴리오 홈페이지 제작 지도를 했습니다. 그 노하우가 이번 강의에 모두 담겨 있습니다. 19시간이 넘는 강의 분량뿐만 아니라 실무에서 퍼블리셔로 인정받는 방법은 물론, 개인 포트폴리오 홈페이지 제작을 하는 방향성과 자신감을 심어드리는 컨텐츠가 담긴 강의입니다.

코딩웍스가 심혈을 기울여 만든
면접과 취업을 부르는 퍼블리셔 개인 포트폴리오 홈페이지 강의를 통해,
퍼블리셔 취업 목표를 곧 이루실 수 있다고 확신합니다!


⚡️ 개인 포트폴리오 제작 강의, 섹션별 강의내용

섹션 1. 신입 퍼블리셔 지원자로서 꼭! 알고 시작해야 할 필독사항

01. 일단! 웹 디자이너 웹 퍼블리셔 전망과 연봉 그리고 명심할 것들
02.개인 포트폴리오 홈페이지, 포트폴리오 개념을 구분하는 것이 먼저!
03. 면접 연락이 오는 홈페이지, 안 오는 홈페이지, 그 이유(feat. 하면 안 되는 것들)
04. 신입 퍼블리셔의 일반적인 취업 진행 절차
05. 하드 코딩한 퍼블리싱 결과물이 없는 사람들의 개인 홈페이지 특징
06. 기획과 와이어프레임을 포함한 UI/UX 디자인 선행되어야 합니다.
07. 개인 포트폴리오 홈페이지에 스킬(Skill) 섹션에 대해서
08. 요즘 퍼블리셔 면접 트랜드, 퍼블리셔 뽑는 면접관들 안목
09. 취업을 부르는 개인 포트폴리오 홈페이지(feat. 최근에 취업한 학생 홈페이지 리뷰) 01
10. 취업을 부르는 개인 포트폴리오 홈페이지(feat. 최근에 취업한 학생 홈페이지 리뷰) 02
11. 취업을 부르는 개인 포트폴리오 홈페이지(feat. 최근에 취업한 학생 홈페이지 리뷰) 03

섹션 2. 잘 만든 UI 디자인 참고해서 내 것으로 만드는 방법

01. UI 디자인을 백지에서 창의적으로 시작하면 대부분 망하는 이유
02. 참고 UI 디자인을 활용해 개인 홈페이지 제작하기 프로세스
03. 최소한의 기획작업과 UI 디자인 없이 바로 퍼블리싱하면 99.8474% 망합니다.
04. 퍼블리셔로서 포토샵 UI 디자인 실력 키우기
05. UI 디자인 참고하는 가장 좋은 방법, 테마포레스트(Theme Forest)

섹션 3. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항

01. 폴더구조, 파일명, 소스코드 등 이런 구체적인 것을 면접관이 어떻게 알지?
02. 개인 포트폴리오 홈페이지 폴더구조와 파일명 제대로 구성하기
03. 상대주소 vs 절대주소 개념 이해하기
04. 소스 코드(Source Code)에서 잘못된 부분 찾기 – HTML 코드
05. 소스 코드(Source Code)에서 잘못된 부분 찾기 – CSS 코드
06. UI 및 상호작용에 필요한 제이쿼리 플러그인 사용 범위
07. 퍼블리셔 취업을 위한 포트폴리오 결과물 종류와 개수
08. 퍼블리싱을 위한 텍스트 에디터(Text Editor)를 무엇을 선택할까?
09. 수정보완으로 극복이 안될 경우 개인 포트폴리오 홈페이지 재작업을 위한 기획

섹션 4. 취업과 실무에서 최고로 중요한 퍼블리싱 기본기

01. 퍼블리싱 기본기 섹션 내용 소개(신입 퍼블리셔가 채용되는 상세한 절차)
02. 실무에서 칭찬받는 퍼블리싱 기본기와 바람직한 코딩 습관들(HTML Coding)
03. 실무에서 칭찬받는 퍼블리싱 기본기와 바람직한 코딩 습관들(CSS Coding)
04. 웹 표준, 웹 접근성, 크로스브라우징(Cross Browsing)을 준수하는 코딩
05. Flex와 Grid와 같은 최신 트렌드 경험과 포트폴리오 보유하기
06. 퍼블리셔 취업보다 실무에서 살아남는 것이 더 중요
07. 부트스트랩으로 대표되는 CSS Frameworks에 대해서

섹션 5. 개인 홈페이지와 취업을 위한 제이쿼리, 자바스크립트 & 코딩 미션

01. 제이쿼리 vs 자바스크립트의 차이, 바닐라 자바스크립트란?
02. 신입 퍼블리셔 취업을 위한 제이쿼리 학습은 어디까지 해야 할까?
03. 개인 포트폴리오 홈페이지 제작을 위해 꼭 필요한 제이쿼리 & CSS
04. [필수 제이쿼리 플러그인] 결과물 목록을 보여주기 위한 콘텐츠 슬라이더
05. [필수 제이쿼리 플러그인] 결과물 목록에서 상세 결과물을 보여주기 위한 풀스크린 모달
06. [필수 제이쿼리 플러그인] 적절한 CSS 애니메이션을 넣는 Scroll Reveal
07. [프론트엔드 프레임웍] Front-end Framework 소개 및 적용예시
08. [프론트엔드 프레임웍] Front-end Framework 사용법 및 주요 컴포넌트(UIKit)
09. [Coding Mission] 코딩미션 내용 소개 및 수행 절차
10. [Coding Mission 01] 인접선택자와 속성선택자를 활용한 순수 CSS 탭 콘텐츠
11. [Coding Mission 02] 실무에서 반드시 사용되는 제이쿼리 하드코딩 탭 콘텐츠
12. [Coding Mission 03] 실무에서 반드시 사용되는 제이쿼리 어코디언 콘텐츠
13. [Coding Mission 04] 제이쿼리 & 자바스크립트로 스크롤 후 헤더 디자인 변경
14. [Coding Mission 05] Header와 footer를 include하는 제이쿼리 load 메서드
15. [Coding Mission 06] 제이쿼리 Front & Back 화면전환 트랜지션
16. [Coding Mission 07] CSS 키프레임 애니메이션(3가지 애니메이션)
17. [Coding Mission 08] 반응형 레이아웃 & 반응형 네비게이션 제작하기 

섹션 6. 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법

01. 면접과 취업에 결정하는 포트폴리오 퍼블리싱 결과물
02. 웹사이트 퍼블리싱 포트폴리오 결과물 준비하기
03. 모바일 웹 앱 퍼블리싱 포트폴리오 결과물 준비하기
04. 실전 퍼블리싱 포트폴리오 결과물 준비를 위한 레퍼런스 준비하기
05. 실전 퍼블리싱 포트폴리오 결과물로 레퍼런스 학습하고 변환하기
06. 실전 퍼블리싱 포트폴리오 결과물로 레퍼런스를 변환한 예시
07. 퍼블리싱 실력을 늘리고 개인 포트폴리오 결과물을 얻는 또 다른 방법
08. 생산성을 200% 향상시키는 듀얼모니터(Dual Monitor) 작업 환경

섹션 7. 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용

01. 퍼블리싱을 위한 UI UX 기능정의서 준비되었다면 퍼블리싱 시작하세요.
02. 개인 포트폴리오 홈페이지 폴더 구조 만들기
03. 전체적인 섹션 별 콘텐츠 내용 미리보기 및 중요 포인트
04. 개인 포트폴리오 홈페이지 전체 레이아웃 추천
05. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Header
07. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - About Section
08. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Skill Section
09. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Portfolio Section
10. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Website Publishing
11. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Practical Publishing
12. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Mobile Publishing
13. 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Epilogue Section

섹션 8. 개인 포트폴리오 홈페이지 웹 호스팅 하기

01. 카페 24 웹 호스팅 신청하고 개인 홈페이지 도메인 얻기
02. FTP 프로그램 파일질라 다운로드 및 설치
03. FTP 프로그램 파일질라 사용법(사이트 관리자, 업로드, 설정 내보내기)
04. 카페 24 관리자 페이지 사용법(계정 초기화, FTP 비밀번호 변경)

섹션 9. 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령

01. 채용공고 보고 또는 면접 보고 갈 회사 안 갈 회사 구분하기
02. 잡포지션을 명확히 하고 입사 지원하기(웹디자이너, 퍼블리셔, 디블리셔, 퍼자이너)
03. 최근 신입 퍼블리셔 면접에서 학생들이 받은 실전 면접 질문들
04. 신입 웹 퍼블리셔 취업을 위한 이력서 준비방법과 면접요령

섹션 10. 수업 자료 다운로드


⚠️ 수강 전 필독사항

클론 코딩을 진행하지 않습니다.

'개인 포트폴리오 홈페이지' 제작 강의는 실습으로 클론 코딩을 진행하면서 개인 포트폴리오 홈페이지를 만들어 가는 실습 과정이 아닙니다. 개인 포트폴리오 홈페이지를 제작하는 절차와 요령 그리고 신입 퍼블리셔로서 반드시 알아야 하는 퍼블리싱 기본기에 대해 가이드하는 영상입니다. 클론 코딩하면서 같은 작업물을 만드는 강의가 아닙니다. 여러분이 개인 포트폴리오 홈페이지를 잘 만들 수 있도록 절차와 방향성을 알려드리는 강의입니다.

텍스트 에디터를 준비하세요.

대부분의 강의는 실습을 하지 않는 가이드 영상 컨텐츠입니다. 하지만 강의 제목에 (실습)이라고 표시된 내용은 텍스트에디터로 코딩을 하는 강의 컨텐츠입니다. (실습)이라는 표시가 있는 강의 시작 전에 텍스트에디터를 준비하세요.

수업 자료를 제공합니다.

수업에 필요한 파일 다운로드는 [섹션 10. 수업자료 다운로드]에 모두 있습니다. 수업 영상에서 다운로드가 필요한 내용이 있으면 섹션 10에 가시면 모두 있습니다. 단, 섹션 5의 [Coding Mission] 파일 완성본은 단계별 학습을 위해 각 영상의 우측 상단의 수업자료에 있습니다.

질문은 구체적으로 남겨주세요.

질문&답변에서 질문하실 때 질문 내용이 명확하게 전달될 수 있도록 구체적으로 질문해주시고, 어떤 섹션 어떤 토픽에서 내용에 대한 질문이라고 표시해주세요. 토픽이 많아서 정확히 어떤 섹션의 어떤 토픽인지 지정하지 않으시면 정확한 답변이 어려울 수 있습니다.

[필독] 블라켓(Brackets) 확장기능관리자 서비스 불가

블라켓(Brackets) 확장기능관리자 서비스 불가해졌습니다. 일시적인 것인지 영구적인 것인지 모르겠지만 현재로서는 영구적인 서비스 불가라고 생각됩니다. 좋은 텍스트 에디터였는데 Adobe 서비스가 중단되면서 여러가지로 사용중 문제도 생고 지금은 확장기능관리자 서비스 불가해졌습니다. 다른 익스텐션은 몰라도 에밋(Emmet)을 설치할 수 없습니다.

저도 오랬동안 애정하면서 사용했던 텍스트 에디터인데 아쉽지만 이제 비주얼 스튜디오 코드(Visual Studio Code)를 쓸 수 밖에 없네요. 

강의에 있는 블라켓츠 사용법 영상은 보지 마시고 비주얼 스튜디오 코드(Visual Studio Code)를 사용법을 충분히 학습하시고 학습 영상을 보시기 바랍니다. 만약 강의에 비주얼 스튜디오 코드(Visual Studio Code) 사용법이 커리큘럼에 없다면 아래에 코딩웍스 퍼블리싱 유튜브 채널 비주얼 스튜디오 코드(Visual Studio Code) 사용법 영상을 보시기 바랍니다.


  1. 비주얼 스튜디오 코드 사용법 및 환경설정 : https://youtu.be/ovbAh681j8o
  2. 비주얼 스튜디오 코드에서 에밋(Emmet) 사용법 : https://youtu.be/u1tFhCB9krY
  3. 비주얼 스튜디오 코드 필수 Extension 설치 및 사용법 : https://youtu.be/0j--ATQP2Qw
  4. 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지 : https://youtu.be/NWOxSd4ZuUk

🙋🏻‍♂️ 강사소개

  • (현재) 프리랜서 프론트엔드 퍼블리셔
  • 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
  • 이젠 컴퓨터아카데미 웹 퍼블리싱 강사
  • 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
  • 이젠 컴퓨터아카데미 웹디자인 기능사 실기 자격증반
  • 라크피아 ICT 트레이닝 센터프론트엔드 퍼블리싱 마스터 코스 강사
  • 이지앤에듀프론트엔드 퍼블리싱, UI/UX 디자인
  • HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영

🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

면접과 취업을 부르는 퍼블리셔 개인 포트폴리오 홈페이지 제작, scss, sass, flex, grid, html, css, html/css,  website, 웹 퍼블리셔, 퍼블리셔 취업, 웹사이트, 코딩, coding, jquery, javascript, 제이쿼리, 자바스크립트, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오,  퍼블리싱, 반응형 웹, 웹디자인기능사 실기시험, bootstrap, 부트스트랩, css frameworks, 프레임워크

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
면접 연락이 안오는 개인 포폴 홈페이지를 리뉴얼 하고 싶은 분들
퍼블리셔 취업을 위해 개인 포트폴리오 홈페이지 제작해야 하는 분들
📚
선수 지식,
필요한가요?
HTML+CSS 기본기

안녕하세요
코딩웍스(Coding Works) 입니다.
코딩웍스(Coding Works)의 썸네일

■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks

🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs

커리큘럼 총 92 개 ˙ 19시간 6분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 신입 퍼블리셔 지원자로서 꼭! 알고 시작해야 할 필독사항
일단! 웹 디자이너 웹 퍼블리셔 전망과 연봉 그리고 명심할 것들 미리보기 20:40 개인 포트폴리오 홈페이지, 포트폴리오 개념을 구분하는 것이 먼저! 미리보기 06:19
면접 연락이 오는 홈페이지, 안 오는 홈페이지, 그 이유(feat. 하면 안 되는 것들) 10:34
신입 퍼블리셔의 일반적인 취업 진행 절차 10:34
하드 코딩한 퍼블리싱 결과물이 없는 사람들의 개인 홈페이지 특징 09:00
기획과 와이어프레임을 포함한 UI/UX 디자인 선행되어야 합니다. 07:04
개인 포트폴리오 홈페이지에 스킬(Skill) 섹션에 대해서 08:05
요즘 퍼블리셔 면접 트랜드, 퍼블리셔 뽑는 면접관들 안목 04:32
취업을 부르는 개인 포트폴리오 홈페이지(feat. 최근에 취업한 학생 홈페이지 리뷰) 01 19:59
취업을 부르는 개인 포트폴리오 홈페이지(feat. 최근에 취업한 학생 홈페이지 리뷰) 02 15:32
취업을 부르는 개인 포트폴리오 홈페이지(feat. 최근에 취업한 학생 홈페이지 리뷰) 03 18:09
섹션 2. 잘 만든 UI 디자인 참고해서 내 것으로 만드는 방법
UI 디자인을 백지에서 창의적으로 시작하면 대부분 망하는 이유 11:41
참고 UI 디자인을 활용해 개인 홈페이지 제작하기 프로세스 11:27
최소한의 기획작업과 UI 디자인 없이 바로 퍼블리싱하면 99.8474% 망합니다. 07:51
퍼블리셔로서 포토샵 UI 디자인 실력 키우기 07:20
UI 디자인 참고하는 가장 좋은 방법, 테마포레스트(Theme Forest) 미리보기 08:41
섹션 3. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항
폴더구조, 파일명, 소스코드 등 이런 구체적인 것을 면접관이 어떻게 알지? 13:44
개인 포트폴리오 홈페이지 폴더구조와 파일명 제대로 구성하기 17:17
상대주소 vs 절대주소 개념 이해하기(실습) 21:10
소스 코드(Source Code)에서 잘못된 부분 찾기 – HTML 코드 08:58
소스 코드(Source Code)에서 잘못된 부분 찾기 – CSS 코드 08:16
UI 및 상호작용에 필요한 제이쿼리 플러그인 사용 범위 05:45
퍼블리셔 취업을 위한 포트폴리오 결과물 종류와 개수 09:52
퍼블리싱을 위한 텍스트 에디터(Text Editor)를 무엇을 선택할까? 03:29
수정보완으로 극복이 안될 경우 개인 포트폴리오 홈페이지 재작업을 위한 기획 05:25
섹션 4. 취업과 실무에서 최고로 중요한 퍼블리싱 기본기
퍼블리싱 기본기 섹션 내용 소개(신입 퍼블리셔가 채용되는 상세한 절차) 08:37
실무에서 칭찬받는 퍼블리싱 기본기와 바람직한 코딩 습관들(HTML Coding) 30:41
실무에서 칭찬받는 퍼블리싱 기본기와 바람직한 코딩 습관들(CSS Coding) 30:44
웹 표준, 웹 접근성, 크로스브라우징(Cross Browsing)을 준수하는 코딩 21:58
Flex와 Grid와 같은 최신 트랜드 경험과 포트폴리오 보유하기 04:22
퍼블리셔 취업보다 실무에서 살아남는 것이 더 중요 09:14
부트스트랩으로 대표되는 CSS Frameworks에 대해서 05:38
섹션 5. 신입 퍼블리셔를 위한 제이쿼리와 자바스크립트 & 코딩 미션
제이쿼리 vs 자바스크립트의 차이, 바닐라 자바스크립트란? (실습) 미리보기 30:26
신입 퍼블리셔 취업을 위한 제이쿼리 학습은 어디까지 해야 할까? 08:17
개인 포트폴리오 홈페이지 제작을 위해 꼭 필요한 제이쿼리 & CSS 06:09
[필수 제이쿼리 플러그인] 결과물 목록을 보여주기 위한 콘텐츠 슬라이더 13:33
[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 CSS 변경(1) (실습) 25:28
[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 CSS 변경(2) (실습) 22:22
[필수 제이쿼리 플러그인] 결과물 목록에서 상세 결과물을 보여주기 위한 풀스크린 모달 미리보기 11:18
[필수 제이쿼리 플러그인] 적절한 CSS 애니메이션을 넣는 Scroll Reveal Animation 09:08
[플러그인 사용방법] 스크롤하면 시작되는 애니메이션 - Wow.js & AOS.js (실습) 30:30
[프론트엔드 프레임웍] Front-end Framework 소개 및 적용예시 07:43
[프론트엔드 프레임웍] Front-end Framework UIKit 사용법/컴포넌트(실습) 미리보기 35:26 [Coding Mission] 코딩미션 내용 소개 및 수행 절차 미리보기 14:03
[Coding Mission 01] 인접선택자와 속성선택자를 활용한 순수 CSS 탭 콘텐츠 08:02
[Coding Mission 02] 실무에서 반드시 사용되는 제이쿼리 하드코딩 탭 콘텐츠 06:41
[Coding Mission 03] 실무에서 반드시 사용되는 제이쿼리 어코디언 콘텐츠 07:10
[Coding Mission 04] 네비게이션을 위한 제이쿼리 & 자바스크립트 헤더 디자인 변경 07:39
[Coding Mission 05] Header와 footer를 include하는 제이쿼리 load 메서드(실습) 27:25
[Coding Mission 06] 제이쿼리 Front Back 화면전환 트랜지션 09:58
[Coding Mission 07] CSS 키프레임 애니메이션 07:34
[Coding Mission 08] 반응형 레이아웃 & 반응형 네비게이션 제작하기 17:47
섹션 6. 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법
면접과 취업에 결정하는 포트폴리오 퍼블리싱 결과물 18:24
웹사이트 퍼블리싱 포트폴리오 결과물 준비하기 35:58
모바일 웹 앱 퍼블리싱 포트폴리오 결과물 준비하기 29:20
실전 퍼블리싱 포트폴리오 결과물 준비를 위한 레퍼런스 준비하기 19:10
실전 퍼블리싱 포트폴리오 결과물로 레퍼런스 학습하고 변환하기 07:08
실전 퍼블리싱 포트폴리오 결과물로 변환한 취업한 학생들 예시 18:15
퍼블리싱 실력을 늘리고 개인 포트폴리오 결과물을 얻는 또 다른 방법 08:59
생산성을 200% 향상시키는 듀얼모니터(Dual Monitor) 작업 환경 08:59
섹션 7. 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용
퍼블리싱을 위한 UI UX 기능정의서 준비되었다면 퍼블리싱 시작하세요 미리보기 24:03 개인 포트폴리오 홈페이지 폴더 구조 제대로 만들기 (실습) 미리보기 20:29
전체적인 섹션 별 콘텐츠 내용 미리보기 및 중요 포인트 05:52
개인 포트폴리오 홈페이지 전체 레이아웃 추천 18:14
섹션 별 콘텐츠 레이아웃 및 중요 포인트 – Header 06:44
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Intro Section 13:15
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - About Section 13:08
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Skill Section 09:02
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Portfolio Section 07:48
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Website Publishing 14:36
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Practical Publishing 16:32
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Mobile Web App Publishing 11:02
섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Epilogue Section 05:39
섹션 8. 개인 포트폴리오 홈페이지 웹 호스팅 하기
카페 24 웹 호스팅 신청하고 개인 홈페이지 도메인 얻기 18:24
FTP 프로그램 파일질라 다운로드 및 설치 04:52
FTP 프로그램 파일질라 사용법(사이트 관리자, 업로드, 설정 내보내기) 27:44
카페 24 관리자 페이지 사용법(계정 초기화, FTP 비밀번호 변경) 05:45
섹션 9. 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령
채용공고 보고 또는 면접 보고 갈 회사 안 갈 회사 구분하기 16:24
잡 포지션(Job Position)을 명확히 하기(웹디자이너, 퍼블리셔, 디블리셔, 퍼자이너) 11:55
최근 취업한 신입 퍼블리셔 면접에서 학생들이 받은 실전 면접 질문들 21:55
신입 웹 퍼블리셔 취업을 위한 이력서 준비방법과 면접요령 미리보기 19:03
섹션 10. 수업자료 다운로드
면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작(PDF)
UI/UX 퍼블리싱 기능정의서(PDF)
featherlight.js 커스텀 CSS
[예시] 개인 포트폴리오 홈페이지(폴더구조)
클래스를 제어하는 2가지 방식 - jQuery vs JavaScript
[다운로드 PDF] 비주얼 스튜디오 코드 필수 세팅, 단축키 변경, 필수 Extension 설치, 에밋(Emmet) 단축키
Brackets에서 Emmet 코드힌트 안생기는 오류 해결 화면
신입 퍼블리셔를 위한 제이쿼리 학습범위
코딩웍스가 제안하는 Skill Section에 사용할 참고 텍스트(보충설명 포함)
CSS 모바일 목업(Mobile Mockup) 포트폴리오 보여주기(html, css, PDF 파일)
강의 게시일 : 2021년 04월 08일 (마지막 업데이트일 : 2021년 07월 05일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
5개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
mhlyu63 thumbnail
결론부터 말하면 강의 너무너무 좋아요! 사람마다 다르겠지만 저처럼 국비퍼블리싱과정 5개월 끝나고 2달 넘게 면접연락 하나 못 받고 있는 사람이 볼때는 그래요.. 제가 다닌 국비과정에서는 1주일 html css하고 바로 자바스크립트로 넘어가버렸어요. 처음엔 어려웠는데 하다보니 꾸역꾸역 따라갔어요. 슬라이더를 자바스크립트로 라이브러리 없이 만들 수 있는 수준이니까 자바스크립트는 퍼블리셔 신입치고는 잘 하는 편이에요. (거의 4달동안 자바스크립트 위주로 수업을 했으니까 그럴수 밖에요...) 근데 이게 전부에요. 막상 퍼블러셔 취업을 하려고 개인 홈페이지를 만들려고 하는데 html css 퍼블리싱에 대해 아는게 없더라구요. 경험도 없고 한마디로 막막했어요. 나중에 안거지만 강사가 개발자 출신이라 퍼블리싱이 약하니까 바로 자바스크립트로 수업하고 그걸 위주로만 수업했더라구요. 퍼블리셔 취업할 사람이 자바스크립트만 좀 다룰줄 알면 뭐합니까,, html css 퍼블리싱은 초보나 다름없는데.. 진짜로 저의 경험에서 말씀 드리자면 html css 퍼블리싱 실력이 최우선인것 같아요. 하나 덧붙이지면 국비 퍼블과정 다닐때 마지막달에 개인 홈페이지 만드는거 아니냐고 학생들이 물으니까 강사하는 말이 그건 과정 끝나고 개인이 알아서 만드는 거라고 하더라구요. 저희는 처음이라 다른 강사랑 비교할 수가 없어서 그냥 그런거구나 했었어요. 과정 끝나고 개인홈페이지 만들려 하니까 너무 막막했는데 이제 막막함이 많이 풀리네요. 감사합니다!!!
2021-04-26
지식공유자코딩웍스(Coding Works)
mhlyu63님 말씀처럼 퍼블리셔 취업을 위해서 HTML, CSS 퍼블리싱 능력이 최우선 되어야 하죠. 이렇게 말씀드리긴 그렇지만 지난 시간을 더 잘 만들기 위한 경험의 시간으로 긍정적으로 생각하시는게 어떨까 합니다. 강의 영상에도 있지만 '이제 다시 시작이다' 라는 마음으로 해보세요. 화이팅입니다~!!
2021-04-26
cine312 thumbnail
역시 짱이에요! 취업준비중인데 많은 도움이 되고 있습니다. 감사합니다 ㅎㅎ
2021-07-28
지식공유자코딩웍스(Coding Works)
cine312님~ 수강평 감사드립니다. 꼭~ 마음에 드시는 개인 포트폴리오 홈페이지 제작하셔서 얼른 취직하시길 기원합니다~!!
2021-07-28
lawesome1 thumbnail
선생님 드디어 기다리던 포폴 제작 강의 오픈하셨네요. 정말 좋아요ㅎ 신입 퍼블리셔 개인 포폴 홈페이지 준비 과정을 상세히 집어주시는 강의에요~!!!
2021-04-24
지식공유자코딩웍스(Coding Works)
기다리셨다니 부담되네요. 나름 최선을 다해 오프학원에서 퍼블리싱 취업 포트폴리오 제작 지도한 경험을 모두 담았다고 생각합니다. 많은 도움이 되시길 저도 기대할게요~ 수강평 감사합니다^^
2021-04-24
lhmint93 thumbnail
필드에서 일하시면서 느꼈던 정~말 답답한 부분만 모아서 강의로 만드신 것 같아요. 깨알 꿀팁들 정말 많고요. 재미있으면서도 유익해요.
2021-05-12
지식공유자코딩웍스(Coding Works)
필드에서 일하시는군요. 일하면서도 계속 개인의 발전을 위해서 공부하시는 거 보면 대단하십니다. 언제나 화이팅입니다 그리고 수강평 감사드립니다~!!
2021-05-12
ckwoong thumbnail
강의 좋습니다. 알찬 내용입니다. 감사합니다.
2021-04-25
지식공유자코딩웍스(Coding Works)
ckwoong 님~ 수강후기 감사드립니다. 꼭! 마음에 드시는 개인 포트폴리오 홈페이지 만드시기 바랍니다.
2021-04-25
깜짝 할인 중(D-1)

21%

48,400원

61,600원
폴더에 추가 550 공유
지식공유자 : 코딩웍스(Coding Works)
총 92개 수업˙총 19시간 6분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스