로드맵 썸네일

중상급 퍼블리싱 실력 Skill Up을 위한 실전 퍼블리싱 포트폴리오 제작 로드맵 (#02)

작성자 프로필 이미지

코딩웍스(Coding Works)

HTML/CSS
반응형 웹
jQuery

초급 대상

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

166명 참여중

30% 할인

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

로드맵 코스

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

중상급 퍼블리싱 실력 Skill Up을 위한 실전 포트폴리오 퍼블리싱 제작

📖 학습 목표

퍼블리셔 취업과 이직을 위해서 충분한 이론학습이 필요합니다. 하지만 이론만으로는 취업을 위한 결과물 그리고 실무에서 생산성을 낼 수 있는 실력을 갖추기는 어렵습니다. 이론을 바탕으로 이론을 활용한 다양한 실전 퍼블리싱 예제를 제작해야만 이론의 대한 깊이 있는 완성도를 갖게 됩니다. 또한, 실무 퍼블리싱

 작업을 위한 응용력과 노하우를 갖게 됩니다. 이런 것들을 하게 만들어주는 코디웍스 퍼블리싱 학습 로드맵이 바로! 중상급 퍼블리싱 실력 Skill Up을 위한 실전 포트폴리오 퍼블리싱 제작 로드맵입니다.

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)과 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)를 통해서 진짜 퍼블리시이 실력이 키워집니다. 동시에 취업과 이직을 위해 개인 포트폴리오 홈페이지 담을 퍼블리싱 결과물도 다양하게 많이 만들 수 있습니다. 곧, 퍼블리실 실력과 퍼블리싱 결과물을 동시에 만들어 낼 수 있는 필수 학습 로드맵입니다.

더불어, 퍼블리셔 취업과 이직을 위해 이제는 필수 능력이 되어버린 Flex와 Grid에 대한 활용능력도 키우실 수 있습니다. 혹시라도 Flex와 Grid는 취업해서 회사에서 필요하면 공부하지... 라고 생각하시면 취업 자체가 어렵습니다. 3년 전쯤에는 그럴수도 있었겠지만 지금은 Flex와 Grid 활용능력과 Flex와 Grid로 만든 퍼블리싱 결과물을 보여주는 것을 취업과 이직을 위해 필수입니다.

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

  • [#01] 중상급 퍼블리싱을 위한 CSS3의 모든 것
  • [#02] HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
  • [#03] HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
  • [#03] HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)
  • [#05] 플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
  • [#06] 그리드(Grid) 핵심이론 및 실전 활용
  • [#07] SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱 
  • [#08] 최고의 프론트엔드 CSS Frameworks, UIkit
  • [#09] Tailwind CSS로 만드는 멋진 웹 UI 스타일링

※ 수강생에 따라 학습 순서는 달라질 수 있지만 로드맵 구성상 코딩웍스의 추천 학습순서로 하시는 것을 추천드립니다.

[#01] 중상급 퍼블리싱을 위한 CSS3의 모든 것

중상급 퍼블리싱 실력을 갖추기 위한 필수적인 코스!!

  • 애매하고 부족한 퍼블리싱 이론을 확실하게
  • 애매한 이론 실력을 중상급 실력으로 확실하게!
  • 탄탄한 이론 실력이 퍼블리싱 결과물의 차이를 만듭니다.

[중상급 퍼블리싱을 위한 CSS3의 모든 것] 강의에서 부족한 퍼블리싱 이론을 확실하게 갖추실 수 있습니다. 이론은 어느 정도 알지만 뭔가 만들려고 할 때 자신 있게 퍼블리싱이 안될 때가 자주 있습니다. 중상급 퍼블리싱 레벨의 실력을 위해 깊이 있게 이론을 학습하고 확실한 퍼블리싱 실력을 갖추기 위한 필수적인 코스입니다. [중상급 퍼블리싱을 위한 CSS3의 모든 것] 강의는 초급부터 중상급 실력을 목표하는 분들을 대상으로 CSS3 모든 이론과 이론을 응용하는 스킬과 노하우를 배울 수 있습니다.

※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.

  • CSS 선택자(selector)의 모든 것
  • CSS 플로트(float)와 포지션(position) 모든 것
  • display 속성의 모든 것
  • 박스모델(Box-Model)과 테이블(Table) 스타일의 모든 것
  • CSS 가상클래스(Pseudo Class)의 모든 것
  • 활용도 높은 CSS3 속성을 활용한 실전 스킬(Skill)과 팁(Tip)
  • 퍼블리셔를 위한 폼(form) 요소와 속성의 모든 것

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

[#02] HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

퍼블리싱 실전을 위한 시작! 핵심이론을 바탕으로 다양한 실전 포트폴리오 퍼블리싱 예제 제작

웹 퍼블리셔 취업 위해 퍼블리싱 학습을 시작한다면 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) 부터 시작하시기 바랍니다. 퍼블리싱 기본기와 핵심이론을 어떻게 활용하는지 다양한 예제를 통해서 이론 설명과 함께 퍼블리싱 노하우를 학습하시게 됩니다. HTML, CSS 최소한의 기본만 있어도 시작할 수 있습니다.

중상급 퍼블리싱 실력을 위해 FLEX, GRID, SCSS(SASS) 능력도 반드시 필요하지만 퍼블리싱 기본기와 응용력을 키울 수 있는 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) 부터 퍼블리싱 학습의 시작을 함께 하시기 바랍니다. 시즌1을 강의 완강과 함께 앞으로 어떤 과정을 공부할지 어떻게 학습할지 수강생 스스로에게 방향이 잡힐 것이라 확신합니다.

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) 강의는 예제 제작을 중심인 강의이므로 이론에 대한 부분은 코딩웍스 유튜브 퍼블리싱 채널에 CSS 중급이론 학습을 병행하시면 더욱 효과적입니다.

※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.

  • HTML+CSS+JQUERY 핵심이론으로 퍼블리싱 기본기 향상 / 웹사이트 퍼블리싱 실력과 노하우 향상
  • 블럭요소와 인라인요소에 대한 정확한 개념과 활용 / position 속성에 대한 정확한 개념과 활용
  • hover before after checked active 가상클래스에 대한 이해와 활용
  • 텍스트에디터 Visual Studio Code와 Emmet 사용법
  • Flex 활용과 Transform 속성 개념과 활용 / 인접선택자,속성선택자,checked 가상클래스 이해와 활용
  • 다양한 마우스 호버 이펙트 / 폰트어썸 이해하고 활용하기
  • CSS 탭 메뉴 콘텐츠, JQUERY 탭 메뉴 콘텐츠 제작 능력
  • 자바스크립트(JavaScript) 기초 이해와 활용

[#03] HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

시즌1을 완강하고 좀 더 다양하고 난이도 있는 중상급 퍼블리싱을 위한 실전 퍼블리싱 과장

시즌2는 시즌1의 실전 퍼블리싱 예제와 겹치지 않는, 완전히 새로운 실전 예제를 중심으로 제작되었습니다. 취업을 위한 퍼블리싱 포트폴리오 결과물을 만들어보는 만큼, 퍼블리싱 실력을 중급 이상으로 Skill-Up하고 싶은 분들에게 알맞은 강의입니다.

시즌2를 바로 학습하시기 보다는 시즌1을 완강하시고 시즌2를 학습하시기를 추천해드립니다. 시즌1에서 인접형제선택자, 속성선택자, :checked 가상클래스 등 순수 CSS로 할 수 있는 많은 부분을 다루고 있기 때문에 시즌2의 경우 시즌1과 중복되는 부분이 거의 없는 새로운 이론과 예제를 중점적으로 학습하고 실전 예제를 만듭니다.

반응형으로 만드는 전체 2가지 웹사이트를 클론 코딩으로 만들고, 만드신 전체 2가지 웹사이트는 개인 포트폴리오 홈페이지에 퍼블리싱 결과물로 올리시면 됩니다. 2가지 반응형 전체 웹사이트는 넷플릭스와 구글 크롬다운로드 공식 사이트입니다.

※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.

  • CSS 버튼 & 네비게이션
  • CSS 키프레임 애니메이션
  • CSS 호버이펙트
  • CSS 섹션 UI 디자인
  • 웹사이트 프로토타입(Web Site Prototype) 제작
  • 자바스크립트 & 제이쿼리(JavaScript, jQuery) 실전 예제
  • 실전 반응형 웹사이트 - 넷플릭스 공식사이트
  • 실전 반응형 웹사이트 - 크롬 브라우저 다운로드

[#04] HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)


시즌1, 시즌2를 완강하고 다양하고 난이도 있는 중상급 퍼블리싱을 위한 실전 퍼블리싱 과장

시즌3는 시즌1, 시즌2의 실전 퍼블리싱 예제와 겹치지 않는, 완전히 새로운 실전 예제들로 제작되었습니다. 취업을 위한 퍼블리싱 포트폴리오 결과물을 만들면서 퍼블리싱 실력을 중급 이상으로 Skill-Up하고 싶은 분들에게 알맞은 강의입니다.

HTML+CSS+JS 실전 포트폴리오 시즌3는 중상급 퍼블리싱을 위한 퍼블리싱 최신 이론 예제 30개와 45가지 이상의 다양한 종류의 실전 예제 제작 과정으로 구성되어 있습니다. 총 298시간 정도의 강의 시간 만큼이나 충실한 내용과 체계적인 이해를 돕는 설명으로 제작된 퍼블리싱 포트폴리오 실전 제작 영상을 학습할 수 있게 됩니다.

 

강의 주요 특징

  • 다양한 최신 CSS 이론과 이론을 활용한 예제 제작

  • 45가지 이상의 난이도별 종류별 실전 예제 제작(완성본 미리보기 영상 참고)

  • HTML 와이어프레임 구조 제작 과정을 상세하게 실전을 통해서 보여줍니다. HTML 와이어프레임 구조 제작 능력을 향상시켜 퍼블리싱 실력을 최대화할 수 있습니다.

  • 로그인 폼 제작을 위한 폼 요소 디자인을 충분히 익힐 수 있습니다.

  • 반복문 변수를 활용한 다양한 CSS 키프레임 애니메이션 제작 능력을 충분히 익힐 수 있습니다.

  • Perspective 속성을 활용한 3D 카드 플립 제작

  • CSS Mockup Design - MacBook

    , iPhoneX

  • 반투명 효과를 주는 글래스모피즘(Glassmorphism) 디자인

  • 웹 퍼블리싱에 도움이 되는 다양한 참고 웹사이트 소개

[#05] 플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

FLEX 핵심이론과 활용 예제, FLEX로 만드는 전체 반응형 웹사이트 포트폴리오

플렉스(Flex) 반응형 웹사이트 퍼블리싱 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 할 수 있습니다. 또한 플렉스(Flex) 기초부터 응용 나아가 실전 UI 제작 강의가 충실합니다. 플렉스(Flex) 이론과 실전예제 그리고 반응형 웹사이트 제작과정이 20시간 이상으로 실전 경험 못지 않은 실력과 자신감을 갖게 됩니다.

※ 핵심이론은 영상뿐만 아니라 플렉스(Flex) 핵심이론 및 활용 PDF 교재로 다운받으실 수 있습니다. 
※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.
※ 전체 반응형 웹사이트 포트폴리오(The World's Best Cities) UI 디자인 PSD 파일 제공됩니다.

  • HTML+CSS+JQUERY 핵심이론을 통한 퍼블리싱 실전 능력 향상
  • Flex 반응형 웹사이트 퍼블리싱 실력과 노하우 향상
  • 모바일 대응 반응형웹 퍼블리싱 제작 능력(미디어쿼리)
  • PC 버전과 모바일 버전에서 최적화된 반응형 웹 전체 제작 능력
  • position 속성과 display 속성에 대한 정확한 개념과 활용
  • 플렉스(Flex) 핵심이론과 실전 UI 제작 능력
  • FLEX로 만드는 전체 반응형 웹사이트 포트폴리오(The World's Best Cities)

[#06] 그리드(Grid) 핵심이론 및 실전 활용

IE 브라우저 서비스 종료가 공식화된 이제는 GRID 입니다. GRID 레이아웃의 신세계를 경험하세요!!

최고의 반응형 레이아웃 제작 방식, CSS 그리드~!! 그리드(Grid) 핵심이론 및 실전 활용 예제를 통해서 CSS 그리드를 완벽하게 이해하실 수 있습니다. 또한 핵심이론을 활용한 다양한 실전 예제가 있으니 실무 활용을 위한 충분한 연습도 할 수 있습니다. 그리드 핵심이론은 영상뿐만 아니라 PDF 교재로 다운받으실 수 있습니다. 중급 퍼블리셔가 되기 위한 필수 코스인 CSS 그리드 핵심이론과 실전 활용을 익히시면 취업뿐만 아니라 퍼블리셔로서 실무에서 충분한 경쟁력을 가지실 수 있습니다.

※ 핵심이론은 영상뿐만 아니라 그리드(Grid) 핵심이론 및 활용 PDF 교재로 다운받으실 수 있습니다. 
※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.

  • CSS 그리드(Grid) 핵심이론을 통한 퍼블리싱 실전 능력 향상
  • CSS 그리드(Grid) 반응형웹 퍼블리싱 제작 능력(미디어쿼리)
  • 그리드(Grid) 반응형 웹사이트 퍼블리싱 실력과 노하우 향상
  • 퍼블리셔 취업을 위한 그리드(Grid) 핵심이론과 실전 UI 제작 능력

[#07] SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱 

대규모 프로젝트를 위한 SCSS 퍼블리싱 그리고 퍼블리셔 취업을 위한 강력한 경쟁력 SCSS 활용 능력

  • 남다른 퍼블리싱 스킬 업을 위한 SCSS 실전 포트폴리오 퍼블리싱 프로젝트 
  • 퍼블리셔 취업 경쟁력을 높여주는 SCSS(SASS) 활용 능력 향상을 위한 체계적인 학습과 실전 예제
  • 같은 내용이지만 이해하기 쉽게! 실무에 필요한 것만 알차게! 코딩웍스 강의가 이런 차이를 만듭니다.

SCSS 기초부터 활용까지 체계적으로 배우실 수 있습니다. 퍼블리셔 취업을 위해 SCSS(SASS) 활용 능력이 경쟁력을 높여주는 만큼 능력을 증명하는 SCSS(SASS)+GRID+FLEX를 활용한 실전 포트폴리오 퍼블리싱 결과물도 얻으실 수 있습니다. SCSS(SASS) 핵심이론 & 실전 예제 중심으로 구성된 수업이며 취업과 실무를 위해 SCSS(SASS)+GRID+FLEX 퍼블리싱 스킬과 노하우를 배울 수 있습니다.

※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.

  • SCSS(SASS)의 핵심 이론과 이론을 활용한 활용 예제
  • SCSS(SASS)+GRID+FLEX를 활용한 실전 포트폴리오 퍼블리싱
  • 개인 포트폴리오 홈페이지 포트폴리오 섹션 설계
  • GRID와 FLEX를 활용한 반응형 레이아웃 실전 예제 제작

[#08] 최고의 프론트엔드 CSS Frameworks, UIkit 

미니멀리즘(Minimalism), 깨끗하고 세련된 UI 디자인

  • 퍼블리셔 취업을 위한 개인 포트폴리오 결과물을 가장 세련되게 보여주며 최고의 CSS 프레임워크, UIkit
  • 퍼블리셔에게 필수인 CSS Frameworks 활용 능력을 위한 체계적인 학습과 실전 예제

부트스트랩(Bootstrap)과 함께 대표적인 CSS Frameworks인 UIkit을 기초부터 활용까지 체계적으로 배우실 수 있습니다. 퍼블리셔 취업을 위해 잘 만들어진 개인 포트폴리오 홈페이지가 반드시 필요합니다. 개인 포트폴리오 홈페이지에서 포트폴리오 결과물을 세련되게 보여주기 위해 Slideshow, Slider, Lightbox, Full Screen Modal, Filter 등 UIkit 컴포넌트의 상세한 사용법과 실전 제작에 활용하는 퍼블리싱 스킬과 노하우를 배울 수 있습니다.

※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.

  • UIkit 핵심 이론과 이론을 활용한 활용 예제
  • UIkit을 활용한 실전 포트폴리오 퍼블리싱
  • 프론트엔드 CSS Frameworks를 활용한 실전 퍼블리싱
  • 개인 포트폴리오 홈페이지 포트폴리오 섹션 설계

[#09] Tailwind CSS로 만드는 멋진 웹 UI 스타일링


[Tailwind CSS로 만드는 멋진 웹 UI 스타일링] 강의는 현재 가장 핫한 프레임워크인 Tailwind CSS v3.4.1을 이론부터 실전 반응형 웹사이트까지 19시간 충실하게 다루고 있습니다. 수업 시간이 길다고 좋은 강의는 아닙니다. 하지만 해당 강의는 시간도 긴 좋은 강의라고 자부합니다. 특히, Tailwind CSS 모든 이론을 8시간 30분 동안 상세하게 다루기 때문에 CSS 이론이 부족한 사람에게 CSS 이론을 충실히 학습할 수 있습니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

※ 강의에서 진행된 수업 내용 완성본은 파일로 모두 제공됩니다.

  • UIkit 핵심 이론과 이론을 활용한 활용 예제
  • 체계적인 Tailwind CSS 핵심이론 학습 및 응용
  • Tailwind CSS로 Flex와 Grid 쉽고 간편하게 활용하기
  • Tailwind 유틸리티 클래스 및 CSS 모든 속성
  • Tailwind CSS를 활용한 실전 예제 제작
  • 쉬운 설명으로 CSS 이론에 대한 확실한 이해도
  • Tailwind CSS 실력과 결과물이 필요한 웹 퍼블리셔
  • Tailwind CSS로 경력 이력서 & 포트폴리오 소개 반응형 웹 제작

로드맵 상세보기

9개 코스

로드맵에 포함된 강의 썸네일

49,500

30% 할인

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

로드맵 코스 9