강의

멘토링

로드맵

개발 · 프로그래밍

/

프론트엔드

UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

기획-디자인-구현 프로세스의 세번째 과정 - 반응형 웹 포트폴리오 템플릿 제작

(5.0) 수강평 3개

수강생 53명

난이도 초급

수강기한 무제한

  • LIZ.B
실습 중심
실습 중심
강의자료
강의자료
포트폴리오
포트폴리오
웹표준
웹표준
하드코딩
하드코딩
실습 중심
실습 중심
강의자료
강의자료
포트폴리오
포트폴리오
웹표준
웹표준
하드코딩
하드코딩
토스
LG전자
토스뱅크
카카오뱅크
롯데쇼핑 이커머스사업본부

롯데쇼핑 이커머스사업본부

임직원들도 이 강의를 듣고 있어요!

토스
LG전자
토스뱅크
카카오뱅크
롯데쇼핑 이커머스사업본부

롯데쇼핑 이커머스사업본부

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

5.0

5.0

foxball

26% 수강 후 작성

이강의를 듣고있다면, 당신은 이미 개발자 입니다. 이렇게 자세히 가르쳐주시는 강의는 어디에도 없습니다.

5.0

kwanggony

100% 수강 후 작성

파트2를 듣고 강의가 많은 도움이 되어서 파트3도 듣게 되었습니다. 왠만큼 알고 있는 내용이지만 그래두 혹시 모르는 부분이 있을까 싶어서 열심히 들었구요, 좋은 강의였고 아 이런 방법도 있구나 하고 생각이 드는 도움이 많이 되었던 강의였습니다. 좋은 강의 잘 들었습니다. 감사합니다^^

5.0

이종운

100% 수강 후 작성

훌륭한 강의 감사합니다

수강 후 이런걸 얻을 수 있어요

  • javascript

  • Flex Layout

  • 바닐라 자바스크립트 scroll animation 로직

  • gsap animation

  • mediaquery css layout

  • 반응형웹 사이트 구현

  • desptop 버전과 mobile 버전에서 최적화된 반응형 웹 제작 능력

반응형 웹 포트폴리오 템플릿을
내 손으로 직접 만들어봐요! ✒️

Part.3에서는
제작까지!

  • Part1에서 만들어본 앱의 홍보용 랜딩 페이지를 구현해 봅니다. 
  • Part1과 Part2에서 배운 디자인을 토대로 랜딩페이지를 구현해 봅니다.
  • 전체 레이아웃은 금융홍보사이트를 기반으로 동일 레이아웃에 내용을
    Part1에서 다룬 벗앤의 내용으로 변경해 만들어 봅니다.
  • 학생 개개인의 포트폴리오를 만들 수 있습니다.

이런 분들에게 추천해요 🙆‍♀️

반응형 웹 포트폴리오
제작을 원하는 분

디자인 산출물을 통한 구현
프로세스를 경험하고 싶은 분

웹표준 & javascript 스킬업
원하시는 분

이 강의만의 특징 ✨


학습 내용 📚

gasp을 이용한 scroll animation hard coding

데스크탑 서브메뉴 & 검색창 구현

모바일 네비게이션의 구현

모바일 네비게이션 데스크탑 네비게이션의 리사이즈 이벤트

키프레임 애니메이션에서 slider로 반응형 웹 구현

스크롤시 고정 header와 탑버튼 링크 구현


예상 질문 Q&A 💬

Q. 반응형 웹포트폴리오를 만드는데 도움이 되나요?

반응형 웹사이트를 구현하는데 필요한 대부분의 리소스가 포함되어 있습니다. 충분한 도움이 되실 거예요.

Q. 사전 지식이 꼭 있어야 수업을 들을 수 있을까요?

네, 그렇습니다. Figma에 대한 기본적인 이해와 웹표준, javascript 기초 지식이 있어야 수업을 쉽게 따라올 수 있습니다.

Q. 질문을 남기면 답변해 주시나요?

네, 확인하는대로 최대한 빨리 답변해 드립니다.

Q. 사용하는 에디터는 어떤것인가요?

Vscode를 이용해 수업을 진행합니다.

💥 수강 전 참고사항

실습 환경
  • 운영 체제 및 버전(OS): Windows, macOS, Linux, Ubuntu, Android, iOS 등 OS 종류 및 버전
  • 사용 도구: 실습에 필요한 소프트웨어/하드웨어 버전 및 과금 플랜, 가상머신 사용 여부 등
  • PC 사양: CPU, 메모리, 디스크, 그래픽카드 등 프로그램 구동을 위한 권장 사양
학습 자료
  • 원본사이트 & 실제 프로젝트 디자인 figma 파일  
  • 반응형 웹 사이트 완성본 및 진행 순서별 작업파일
  • 강의 하단 게시판 이용 각 수업 내용 및 code 정리
선수 지식 및 유의사항
    • Figma 기초지식
    • html, css, javascript, jquery 기초 지식
    • visual studio code 사용 방법

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 반응형 웹 사이트 구현으로 포트폴리오를 제작하실 분

  • HTML + CSS + JavaScript + jQuery 핵심 이론을 통한 퍼블리싱 실전 능력 향상

  • flex를 활용흔 css layout

  • 개발 능력의 업그레이드

안녕하세요
입니다.

372

수강생

15

수강평

92

답변

4.9

강의 평점

3

강의

프론트엔드부터 백엔드까지 실무 중심의 수업을 진행하고 있으며, 오랜 강의 경험을 바탕으로, 실무 중심의 웹 개발을 가르치는 강사입니다.

커리큘럼

전체

76개 ∙ (9시간 32분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

3개

5.0

3개의 수강평

  • kwanggony님의 프로필 이미지
    kwanggony

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    파트2를 듣고 강의가 많은 도움이 되어서 파트3도 듣게 되었습니다. 왠만큼 알고 있는 내용이지만 그래두 혹시 모르는 부분이 있을까 싶어서 열심히 들었구요, 좋은 강의였고 아 이런 방법도 있구나 하고 생각이 드는 도움이 많이 되었던 강의였습니다. 좋은 강의 잘 들었습니다. 감사합니다^^

    • LIZ.B
      지식공유자

      시리즈 강의를 다 들으셨다니, 정말 감사합니다. 또한 도움이 되셨다니, 저도 너무 기쁩니다. 더 좋은 강의로 찾아 뵙겠습니다! ^^

  • foxball님의 프로필 이미지
    foxball

    수강평 33

    평균 평점 4.8

    5

    26% 수강 후 작성

    이강의를 듣고있다면, 당신은 이미 개발자 입니다. 이렇게 자세히 가르쳐주시는 강의는 어디에도 없습니다.

    • 이종운님의 프로필 이미지
      이종운

      수강평 35

      평균 평점 5.0

      5

      100% 수강 후 작성

      훌륭한 강의 감사합니다

      • LIZ.B
        지식공유자

        종운님 감사합니다. ^^ 도움이 되셔서 더 많이 발전하기실 기원할께요!

    LIZ.B님의 다른 강의

    지식공유자님의 다른 강의를 만나보세요!

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!