개인 포트폴리오 홈페이지 제작 과정

개인 포트폴리오 홈페이지 제작

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

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

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

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

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

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

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

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

  5. 신입 퍼블리셔를 위한 제이쿼리와 자바스크립트 & 코딩 미션

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

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

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

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

    - 퍼블리싱을 위한 UI UX 기능정의서 준비되었다면 퍼블리싱 시작하세요
    - 개인 포트폴리오 홈페이지 폴더 구조 제대로 만들기 (실습)
    - 전체적인 섹션 별 콘텐츠 내용 미리보기 및 중요 포인트
    - 개인 포트폴리오 홈페이지 전체 레이아웃 추천
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 – Header
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Intro Section
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - About Section
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Skill Section
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Portfolio Section
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Website Publishing
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Practical Publishing
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Mobile Web App Publishing
    - 섹션 별 콘텐츠 레이아웃 및 중요 포인트 - Epilogue Section

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

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

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

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

  10. 퍼블리셔 취업을 남들보다 앞당기기 위한 준비

    - 퍼블리셔 취업에 알맞는 이력서 작성
    - 모바일 웹(Mobile Web) 포트포리오(기획서, 기능정의서, UI디자인, 퍼블리싱)
    - SCSS(SASS) 활용능력과 퍼블리싱 결과물

JQUERY 필수 플러그인 활용

  1. 이미지 & 콘텐츠 슬라이더, 슬릭 슬라이더(slick.js)
  2. 이미지 & 콘텐츠 슬라이더, UIKit(Slider, Lightbox)
  3. 풀스크린 모달, 페더라이트(featherlight.js)
  4. 스크롤 리빌 애니메이션(Scroll Reveal Animation), 와우(Wow.js) & AOS.js

퍼블리싱 포트폴리오 제작

  1. 반응형 개인 포트폴리오 홈페이지 제작(1개)