인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
로드맵 썸네일

개인 포트폴리오 홈페이지 제작 및 웹사이트 퍼블리싱 결과물 제작 로드맵 (#03)

작성자 프로필 이미지

코딩웍스(Coding Works)

HTML/CSS
jQuery
포트폴리오

입문 대상

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

152명 참여중

30% 할인

5개 남음전체 구매 적용
쿠폰 받기

로드맵 코스

⚡ 퍼블리셔 취업과 이직을 위한 코딩웍스 로드맵(#03)

개인 포트폴리오 홈페이지 제작 및 웹사이트 퍼블리싱 결과물 제작

📖 학습 목표

지금까지 200여명의 오프라인 학원 학생들을 가르치고 신입 퍼블리셔로 취업 시킨 코딩웍스가 풍부한 경험을 통해 퍼블리셔 취업을 위해 반드시 필요한 '개인 포트폴리오 홈페이지' 제작에 관한 모든 내용을 알려 드립니다. 신입 퍼블리셔 지원자가 가장 힘들어 하는 부분이 바로 '개인 포트폴리오 홈페이지' 제작입니다. 정해져 있는 것도 없도 정답이 있는 것도 아니고 경험이 부족한 수강생들에게 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드가 될 것입니다.

퍼블리싱 이론 수업은 아무나 할 수 있지만 퍼블리셔로 취업 개인 포트폴리오 홈페이지 제작 수업은 아무나 할 수 없습니다. 실전에서 학생들을 지도하고 취업시킨 코딩웍스는 자신 있습니다.

'개인 포트폴리오 홈페이지' 제작 가이드 뿐만 아니라 반응형으로 전체 웹사이트를 만드는 2개의 제작 과정을 통해서 진짜 실무에서 필요한 퍼블리싱 경험과 실력 그리고 개인 포트폴리오 홈페이지에 담을 퍼블리싱 결과물을 제작합니다.

[로드맵을 시작하기 전에 꼭! 참고해주세요.]

HTML, CSS에 대한 기본적인 이해도가 충분히 있어야 반응형으로 전체 웹사이트를 만드는 2개의 제작 과정을 수월하게 따라 오실 수 있습니다. 그렇기 때문에 중상급 퍼블리싱 실력 Skill Up을 위한 실전 포트폴리오 퍼블리싱 제작 로드맵(#02) 중에서 최소한 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)은 완강하시고 현재 로드맵을 시작하시면 좋을 듯 합니다. 만약 HTML, CSS에 대한 기본적인 이해도가 충분히 없으면 영상의 수업내용을 따라 오시기가 어려울 수 있습니다. 반응형 전체 웹사이트 제작 과정이기 때문에 기본적인 CSS에 대한 이론은 자세한 설명이 없습니다.

📖 코딩웍스가 추천하는 학습순서

  • [#01] 퍼블리셔 취업하는 훌륭한 이력서 작성 가이드
  • [#02] 면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
  • [#03] 반응형 웹사이트 포트폴리오(Architecture Agency)
  • [#04 반응형 웹사이트 포트폴리오(App Official Landing Website)

※ 수강생에 따라 [#02] 또는 [#03] 순서가 달라져도 상관 없습니다. 하지만 개인 포트폴리오 홈페이지를 제작해야 하는 단계의 수강생의 경우 가급적 [#01] 면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작을 먼저 보시고 전체적인 방향성을 잘 잡으시길 추천드립니다.

📖 중상급 퍼블리싱 실력을 위한 강좌별 학습내용

 

[#01] 퍼블리셔 취업하는 훌륭한 이력서 작성 가이드

실제 이력서 사례 + 코딩웍스가 만든 추천 템플릿

퍼블리셔 취업을 위해 채용 담당자에게 어필할 수 있는 이력서 작성방법을 상세히 알려드립니다. 이력서 작성을 어디서부터 시작해야 할지 어려운 분들께 추천드립니다. 신입 또는 이직을 위해 퍼블리셔 이력서를 작성하는 방법을 실제 사례를 기반으로 한 예시와 함께 설명합니다. 또한, 지원자 입장에서의 이력서 작성 방법이 아니라 채용 담당자 입장에서 냉정한 관점에서 면접을 부르는 이력서 작성 가이드입니다. 어필하는 이력서 작성 방법과 함께 강조할 사항, 주의할 사항 그리고 구체적인 꿀팁과 코딩웍스가 제작한 이력서 템플릿까지 제공합니다.

채용 담당자가 전혀 관심 없는 내용으로는 서류 전형 합격하기 어렵습니다. 
'퍼블리셔 취업하는 훌륭한 이력서 작성 가이드'는 '퍼블리싱 역량과 스킬 그리고 직무 이해도'를 어떻게 기술하는지에 중점을 둔 이력서 작성 방식이기 때문에 서류 전형 합격 가능성을 높입니다!

정형화되고 진부한 이력서가 아니라 퍼블리셔 직무에 특화된 이력서 작성 방법을 상세하게 소개합니다. 이력서 작성 방법뿐만 아니라 실제 채용공고 분석하기, 면접 요령, 괜찮은 회사 선택하는 요령 등 이력서 작성에서 면접과 취업까지 퍼블리셔 지원자가 궁금한 모든 내용을 담았습니다. 

99%의 사람들이 이력서에 쓰는 지원 동기, 성장 과정, 성격의 장단점, 입사 후 포부 등과 같은 진부하고 정형화된 이력서 작성 방식이 아니라, 퍼블리셔 지원자로서 자기소개, 직무 이해도, 직무 스킬, 포트폴리오 프로젝트 소개로 구성된 경쟁력 있는 이력서를 작성하실 수 있습니

  • ✅ 합격하는 훌륭한 이력서 준비하기
  • ✅ 프로젝트(포트폴리오) 소개 레이아웃, 디자인 템플릿
  • ✅ 지원자가 이력서에 적는 수많은 실수 예시와 개선 방법
  • ✅ 퍼블리셔 지원자 체크리스트
  • ✅ 괜찮은 회사 선택을 위해 실제 채용공고 분석하기
  • ✅ 면접 준비 및 요령과 팁
  • ✅ 괜찮은 회사 선택하기(웹 에이전시 vs 인하우스)
  • ✅ 퍼블리셔 취업 관련 자주 묻는 질문들
  • ✅ 퍼블리셔 희망 연봉을 얼마로 할지 고민 해결
  • ✅ 개인 포트폴리오 홈페이지 제작 방향
  • ✅ 채용 담당자의 퍼블리셔 지원자 실제 면접 질문(60개)
  • ✅ 잡코리아와 사람인에서 자기소개 입력하고 파일 첨부하기

[#02] 면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

신입 퍼블리셔로 이력서를 보내도 연락이 안 온다면, 그 이유가 궁금하다면...

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

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

※ 강의에서 진행된 수업 내용을 담은 PDF 파일과 코딩미션 완성본은 파일로 제공됩니다.

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

[#03] 반응형 웹사이트 포트폴리오(Architecture Agency)

클론사이트, 카피사이트가 아닌 코딩웍스가 직접 제작한 3D 섹션 전환 애니메이션 웹사이트 제작 과정

HTML+CSS+JQUERY 퍼블리싱으로 반응형 웹사이트 전체 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 하고 실전 퍼블리싱의 노하우를 갖게 됩니다. 특히, 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다.

※ 강의에서 진행된 전체 웹사이트 UI 디자인 PSD 파일과 퍼블리싱 완성본은 파일로 제공됩니다.

  • HTML+CSS+JQUERY 핵심이론을 통한 퍼블리싱 실전 능력 향상
  • 전체 웹사이트 퍼블리싱 실력과 노하우 향상
  • position 속성에 대한 정확한 개념과 활용
  • hover before after checked active 가상클래스에 대한 이해와 활용
  • CSS 탭 메뉴 콘텐츠, JQUERY 탭 메뉴 콘텐츠 제작 능력
  • 모바일 대응 반응형웹 퍼블리싱 제작 능력(미디어쿼리)
  • PC 버전과 모바일 버전에서 최적화된 반응형 웹 전체 제작 능력
  • 3D 화면전환 기능으로 Creative Responsive Website 제작

[#04] 반응형 웹사이트 포트폴리오(App Official Landing Website)

현직 퍼블리셔 겸 퍼블리싱 전문 강사의 꼼꼼하고 체계적인 반응형 포트폴리오 홈페이지 제작 강의

HTML+CSS+JQUERY 퍼블리싱으로 반응형 웹사이트 전체 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 하고 실전 퍼블리싱의 노하우를 갖게 됩니다. 특히, 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다. 필수로 사용해야 하는 제이쿼리 플러그인으로 Scroll Reveal Animation과 Slick 슬라이더 사용법을 학습합니다. 

※ 강의에서 진행된 전체 웹사이트 UI 디자인 PSD 파일과 퍼블리싱 완성본은 파일로 제공됩니다.

  • 전체 웹사이트 퍼블리싱 실력과 노하우 향상
  • 기존 방식인 float와 position을 이용해서 99% 배치한 반응형 레이아웃
  • position 속성에 대한 정확한 개념과 활용
  • hover before after checked active 가상클래스에 대한 이해와 활용
  • 제이쿼리(JQUERY) 핵심이론 학습 및 응용
  • CSS 탭 메뉴 콘텐츠, JQUERY 어코디언 메뉴 콘텐츠 제작 능력
  • CSS3 filter 속성, object-fit 속성 활용
  • 모바일 대응 반응형웹 퍼블리싱 제작 능력(미디어쿼리)
  • PC 버전과 모바일 버전에서 최적화된 반응형 웹 전체 제작 능력
  • Scroll Reveal Animation 플러그인
  • Text Typing 애니메이션 플러그인
  • Slick 슬라이더 사용법 및 커스텀 CSS 수정방법

[#05] 모바일 웹 퍼블리싱 포트폴리오 with Figma

"모바일 웹 UI 디자인 및 퍼블리싱 제작 필수 이론과 노하우, 체계적인 실전 제작"

Step 1. 피그마(Figma)로 모바일 웹 UI 디자인 제작
Step 2. 모바일 웹 HTML 와이어프레임 모든 페이지 상세한 제작
Step 3. CSS 변수(Var) 활용한 다양한 레이아웃의 다수 페이지 퍼블리싱 제작
Step 4. 완성된 퍼블리싱 결과물을 더 완벽하게 하는 퍼블리싱 마무리 작업

코딩웍스가 지금까지 수많은 오프라인 학원 학생들에게 수업한 모바일 웹 퍼블리싱 제작 노하우가 담겨 있습니다. 완강 후 한층 향상된 퍼블리싱 실력을 갖게 되실거라고 확신합니다!

  • Flex 레이아웃을 중심으로 중상급 CSS 실전 코딩
  • 모바일 웹 페이지 구성/폴더 구조/절대주소 vs 상대주소
  • 모바일 웹 HTML 와이어프레임 상세한 작성법
  • 모바일 웹 퍼블리싱 제작 필수 이론과 노하우, 실전 제작
  • 피그마(Figma)로 모바일 웹 UI 디자인 제작
  • 모바일 웹 UI 디자인 및 퍼블리싱 참고사항 & 주의사항
  • HTML+CSS 모바일 목업(Mockup) 제작 후 iframe 활용
  • CSS 변수(Var) 활용한 모바일과 태블릿에 맞춘 레이아웃
  • 활용도 높은 인라인 자바스크립트 활용
  • 슬릭 슬라이더(Slick Slider) 사용법 및 CSS 변경 노하우
  • 실무에서 이 정도면 충분한 제이쿼리 상호작용 학습 후 실전 적용
  • ::before ::after 등 다양한 가상클래스 실전 활용
  • 경력자처럼 퍼블리싱하는 클린 코딩(Clean Coding)의 정석

[#06] SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

"SCSS(SASS) 활용 능력은 우대사항이며 필수사항 "

Point 1. 피그마(Figma)로 SCSS(SASS)+FLEX 웹사이트 UI 디자인 제작
Point 2. SCSS(SASS)+FLEX 웹사이트 HTML 와이어프레임 모든 페이지 상세한 제작
Point 3. SCSS(SASS)+FLEX를 활용한 다양한 다수의 웹 페이지 퍼블리싱 제작
Point 4. PC, 모바일, 태블릿 대응 반응형 레이아웃 설계, 제작 그리고 완벽한 퍼블리싱 작업까

코딩웍스가 지금까지 수많은 오프라인 학원과 개인 포트폴리오 홈페이지 제작 과정에서 수업한 중상급 퍼블리싱 제작 노하우가 담겨 있습니다. 특히 SCSS(SASS)+FLEX를 기본으로 제작하는 반응형 웹 퍼블리싱 프로젝트라서 SCSS(SASS)+FLEX 능력을 최대한으로 끌어올릴 수 있습니다.
완강 후 한층 향상된 중상급 반응형 웹 퍼블리싱 능력을 갖게 되실 거라고 확신합니다!

SCSS(SASS)와 FLEX를 실전에 완벽하게 활용합니다! 

Point 1. 피그마(Figma)로 SCSS(SASS)+FLEX 웹사이트 UI 디자인 제작
Point 2. SCSS(SASS)+FLEX 웹사이트 HTML 와이어프레임 모든 페이지 상세한 제작
Point 3. SCSS(SASS)+FLEX를 활용한 다양한 다수의 웹 페이지 퍼블리싱 제작
Point 4. PC, 모바일, 태블릿 대응 반응형 레이아웃 설계, 제작 그리고 완벽한 퍼블리싱 작업까지
Point 5. 반응형 웹 프로젝트 제작을 위한 제이쿼리 핵심 이론 및 실무 활용 능력

로드맵 상세보기

6개 코스

로드맵에 포함된 강의 썸네일
블리셔 취업을 위해 채용 담당자에게 어필할 수 있는 이력서 작성방법을 상세히 알려드립니다. 이력서 작성을 어디서부터 시작해야 할지 어려운 분들께 추천드립니다. 신입 또는 이직을 위해 퍼블리셔 이력서를 작성하는 방법을 실제 사례를 기반으로 한 예시와 함께 설명합니다. 또한, 지원자 입장에서의 이력서 작성 방법이 아니라 채용 담당자 입장에서 냉정한 관점에서 면접을 부르는 이력서 작성 가이드입니다. 어필하는 이력서 작성 방법과 함께 강조할 사항, 주의할 사항 그리고 구체적인 꿀팁과 코딩웍스가 제작한 이력서 템플릿까지 제공합니다.

29,700

39,600

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

46,200

61,600

로드맵에 포함된 강의 썸네일
HTML+CSS+JQUERY 퍼블리싱으로 반응형 웹사이트 전체 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 하고 실전 퍼블리싱의 노하우를 갖게 됩니다. 특히, 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다. (반응형 제작 방식은 기존 방식의 float와 position을 이용한 반응형 레이아웃 제작 방식입니다. 현재로서는 기존 웹사이트가 기존 방식으로 제작된 레이아웃이 대부분이기 때문에 Flex와 Grid도 학습해야 하지만 기존 방식 레이아웃을 반드시 학습하시고 잘 사용해야 합니다.)

46,200

61,600

로드맵에 포함된 강의 썸네일
반응형 웹사이트 포트폴리오(App Official Landing) 제작 과정은 HTML+CSS+JQUERY 퍼블리싱으로 반응형 웹사이트 전체 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 하고 실전 퍼블리싱의 노하우를 갖게 됩니다. 특히, 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다. 필수로 사용해야 하는 제이쿼리 플러그인으로 Scroll Reveal Animation과 Slick 슬라이더 사용법을 학습합니다. 반응형 제작 방식은 기존 방식의 float와 position을 이용한 반응형 레이아웃 제작 방식으로 제작합니다. 하지만 어느 특정 요소에서는 Flex를 사용하는 부분도 있습니다.

46,200

61,600

로드맵에 포함된 강의 썸네일
퍼블리셔 취업과 퍼블리셔 실무에서 가장 경쟁력이 있는 모바일 웹 제작 능력을 향상할 수 있습니다. 퍼블리셔로서 모바일 웹을 제작하기 위한 거의 모든 제작 방법과 노하우를 다질 수 있습니다. 특히 요즘 퍼블리셔와 개발자에게 요구되는 디자인 능력을 피그마(Figma) 학습으로 많은 부분 커버할 수 있도록 피그마(Figma)로 모바일 웹 UI 디자인 작업을 하는 과정도 상세하게 설명하였습니다. 모바일 웹 퍼블리싱 수업에서 가장 강점인 부분인 HTML 와이어프레임 상세한 작성법을 모든 페이지 하나하나 상세하게 설명합니다. 강의를 통해 HTML 와이어프레임 제작 능력이 크게 향상될 것입니다. 모바일 웹 퍼블리싱은 CSS 변수(Var) 활용한 모바일과 태블릿에 맞춘 레이아웃을 완벽하게 맞추는 학습을 통해서 실무 작업과 대동소이한 정도의 작업 능력을 갖추게 됩니다. Flex 레이아웃을 중심으로 중상급 CSS 실전 능력을 충분히 갖추시게 됩니다.

79,200

105,600

로드맵에 포함된 강의 썸네일
SCSS(SASS)와 FLEX Layout을 실전에 완벽하게 활용합니다! 피그마로 전체 웹사이트의 메인 페이지 및 핵심 서브 페이지 UI를 디자인하고, 일관성 있는 클래스네임과 함께 HTML 와이어프레임 구조를 만들어 퍼블리싱까지 완료하는 체계적인 반응형 웹 사이트 프로젝트 제작 과정입니다. 총 35시간 이상의 과정 속에서 핵심 이론 및 실무 활용 능력을 충분히 익히고, PC - 모바일 - 태블릿 대응 반응형 레이아웃을 설계 및 제작하면서 반응형 웹 프로젝트에 대한 경험과 노하우는 물론 제이쿼리(jQuery) 핵심 이론 및 실무 활용 능력까지 대폭 향상시키게 됩니다.

89,920

119,900

30% 할인

5개 남음전체 구매 적용
쿠폰 받기

로드맵 코스 6