Thumbnail
개발 · 프로그래밍 프론트엔드

UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오 대시보드

(5)
2개의 수강평 ∙  26명의 수강생

60,500원

지식공유자: LIZ.B
총 76개 수업 (9시간 32분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 퍼블리싱] 강의입니다.

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

✍️
이런 걸
배워요!
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
개발 능력의 업그레이드

안녕하세요
LIZ.B 입니다.
LIZ.B의 썸네일

지식공유자의 오프라인 국기과정의 수강평 보기

"반응형 웹디자인 양성 과정" 수강후기 바로가기
(2022.03-2022.07)

3월부터 현재까지 길다면 길고 짧다면 짧은 시간이었겠지만 제 인생에선 정말 중요하고 값진 기간이었던 것 같습니다. 사전에 지식은 어느정도 있긴 했지만, 어떻게 해야할지, 어떤 방향으로 가야할지, 뭘 해야할지 아무것도 모르고 막막했는데 선생님께서 성심성의껏 가르쳐주셔서 기술면에서도, 취업면에서도 확고하게 큰 성장을 이룰 수 있었던 것 같습니다.덕분에 자신감도 많이 늘고, 취업 이후에도 잘 할 수 있을 것 같다는 생각이 들어요! 수업 진행해주신 방미정 선생님, 그 외 취업 당담 선생님들께 너무 감사합니다! :) 취업 잘 하고 갑니당! 이후 기수분들도 힘내시고 좋은 경험 얻어가시길 바랄게요! 화이팅 :)

3월부터 7월까지 웹 퍼블리셔 양성과정을 수강했습니다 :) 디자인 외에 아무것도 모르고 도전 했던 건데, 선생님과 동료들의 응원과 지지로 많은 걸 얻고 가는 거 같습니다. 학원에서 배운거 토대로 앞으로도 공부 열심히 해보겠습니당~~ 항상 친절히 알려주셨던 방미정 선생님, 그 외 취업 담당 선생님들께 너무 감사합니다!

"프론트앤드 개발자 양성과정" 수강후기 바로가기
(2020.11.17-2021.05.11)

6개월이라는 시간이 짧게 느껴질 정도로 훈련과정이 흥미로웠습니다. 아이디어를 내고 디자인을 하는 작업은 시간이 오래 걸렸었지만 훈련과정을 통해 요령도 생기고, 작업 시간을 많이 단축시켜가는 제 모습을 보며 실력이 점점 발전한 것 같아 뿌듯하였습니다. 직업의 방향성을 잘 잡지 못하던 저에게는 이 훈련과정을 통해 배운 학습들은 나만의 지식이자, 직업의 방향성을 잡아준 이정표였고, 6개월간 함께 공부했던 프론트앤드 개발자 양성과정 3강의실 언니 오빠 동생들과 방미정 강사님은 좋은 인연이자 버팀목이었습니다. 방미정 강사님과 취업 지원팀 분들, 행정직원분들께서 열심히 도와주셨기에 훈련과정을 수료하기 전에 취업을 하게 된 것 같아 너무 감사드립니다. 이 과정 이외에 다른 좋은 과정들 또한 많이 있어 대우직업능력개발원 이란 학원을 저처럼 취업에 대한 두려움이 있거나, 직업의 방향성을 잘 잡지 못하는 후배와 동생들에게 추천해주고 싶습니다.

처음 왔을 때 디자인도, 코딩도 한 번도 배우지 못한 제가 과연 이 과정을 듣고 취업을 할 수 있을까? 라는 걱정을 많이 했던 것 같습니다. 하지만 다니면 다닐수록 그런 걱정이 사라졌던 것 같아요. 일러스트, 포토샵, html, css, js, vue등 많은 것을 배웠습니다. 새로 배우는 게 많아서 초반에는 어려울 수도 있겠지만 열정 가득한 방미정 선생님께서 정말 잘 알려주셔서 걱정 안 해도 될 것 같아요.ㅎㅎ 다른 학원 후기를 보면 매년 같은 레파토리의 수업, 심지어 선생님께 질문해도 잘 모르는 경우가 있는데 선생님께서는 항상 열정을 가지고 새로운 것도 알려주려고 하시고 아는 것도 많으셔서 도움을 많이 받았습니다! 웹퍼블리셔, 웹디자이너가 되길 원하신다면 강추드립니다.~~

작년 2020년 11월 우연한 기회로 대우직업능력개발원이라는 훌륭한 기관을 알게되고 ,이곳에서 훌륭한 선생님을 만나 좋은교육을 수강할수있게된것에 정말 감사드립니다 만일 제가 이 교육훈련과정을 듣지 않았더라면 아마 지금과 같은 취업기회는 생기기 어려웠을것입니다. 대학졸업후, 취업의 갈림길에서 갈피를 못잡고 방황하던시기에 어디서도 교육받기 어려운 선생님의 실제 실무경험과 노하우가 담긴 5~6개월간의 교육과정은 웹개발이라고는 전혀 알지못했던 제게 큰 배움과 성장의 기간이 되었습니다. 이를 기반으로 다양한 디자인과 웹개발을배웠고 저만의 포트폴리오 또한 만들수있었습니다. 제게는 너무나 생소한 코딩언어들을 배우는 일이 어려워 중도포기하고 싶은 순간들이 여러번 있었지만 포기하지않고 열번이고 다시 가르쳐주시는 선생님의 열정과 이끄심 덕분에 6개월과정을 모두 수료하기 이전(80%이상 수강)에 조기취업이되며 교육과정을 잘 마무리 할 수 있었습니다. 이렇게 첫 직장을 구하고 새출발 하는것이 가능하도록 만들어주신 선생님과, 대우직업능력개발원 기관에 깊은 감사를드립니다.

비전공자도 이해하기 쉽게 알려주셨고 덕분에 취업도 잘했습니다. 이 과정을 듣게 되어 너무 기쁩니다.

디자인, 코딩 툴을 실무에서 사용할 수 있는 커리큘럼에 맞추어 차근차근 기초에 맞추어서 설명해 줍니다. 본인 스스로 작업할 수 있도록 선생님이 최선을 다해서 도와주셔서 많은 도움이 되었습니다. 국비로 하는 수업은 퀄리티가 떨어진다는 편견을 깰 수 있는 교육이었고 , 담임선생님도 매우 진취적이어서 늘 새로운 걸 가르쳐 주려고 하셔서 많이 배울 수 있었습니다.

비전공자도 이해하기 쉽게 알려주셨고 덕분에 취업도 잘했습니다. 이 과정을 듣게 되어 너무 기쁩니다.

기존에 알고 있던 왠만한 지식 플러스로 학원에서 교육을 받으며 다양한걸 알고 배웠습니다. 자격증도 딸 수 있도록 연습도 해주면서 저에게는 어려웠지만 코딩이란 단어도 왠만하면 알아들을 정도로 배웠습니다. 이곳을 수강하면서 취업도 같이 하게되어 마음이 놓이고 기쁩니다.


건축학을 전공했고 웹디자인과 인연을 맺은건 언 20여년이 넘었습니다. 실무와 강의를 병행하며  많은 희노애락 끝에 현재는 이 일을 많이 애정하게 되었고,  흥미와 성취감으로 더 매진하게 되었습니다. 제가 알고 있는 지식들을 공유하여, 좀더 많은 비전공자들이 쉽게 입문하기를 바라며, 그대가 원하는 모든 일들이 이루어 지길 기원합니다.

Lucete!

강의관련 문의 email : loo4love90@gmail.com 

 

 

강의경력  

  • 2018.3 -현재. 웹 디자인/멀티미디어/프론트엔드 전문가과정 진행

  • 엘리스 아카데미 `클래스가 다른 HTML / CSS` 오픈 준비중

  • 엘리스 아카데미 `클래스가 다른 javascript` 오픈 준비중

□ 現 대우직업능력개발원 프론트엔드 / 멀티미디어 / 웹콘텐츠 과정 강의
□ 하이미디어 UI/UX 웹퍼블리싱 강의

□ 이젠컴퓨터 UI/UX 웹퍼블리싱 강의
□ 더조은컴퓨터학원 종로캠퍼스 웹디자인 강의
□ 더조은컴퓨터학원 강남캠퍼스 웹디자인/그래픽 강의
□ 영재직업전문학교 웹디자인 강의

 

  자격증  

□ 웹디자인기능사 자격증
□ 그래픽스운용기능사 자격증 

□ KPC 자격지도자(GTQ,GTQi,GTQid) 자격증

직업능력개발훈련교사3급(정보기술, 디자인,문화컨텐츠,정보기술전략·계획

정보기술운영) 
□ 컴퓨터활용능력 1급

 

커리큘럼 총 76 개 ˙ 9시간 32분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 3. 전체 수업 내용 다운로드
리소스 다운로드
섹션 4. header - scroll event
섹션 5. mobile navigation
navigation - sub menu - HTML/CSS 07:09
navigation - sub menu - JS 03:48
섹션 7. mobile - section1
section1 - HTML 10:26
section1 - CSS 10:19
section1 - CSS / JS 05:41
섹션 8. mobile - section2
section2 - HTML 07:40
section2 - CSS 06:09
section2 - CSS / JS 04:01
섹션 9. mobile - section3
진행폴더 보는 방법 미리보기 01:25
section3 - HTML 09:19
section3 - CSS_1 09:28
section3 - CSS_2 11:14
section3 - CSS_3 04:00
section3 - JS - animation 02:16
section3-JS - slider 19:28
섹션 10. mobile - section4
section4 - HTML 08:53
section4 - CSS 10:26
section4 - JS 01:47
섹션 11. mobile - section5
section5 - HTML 01:17
section5 - CSS 09:03
section5 - JS 01:17
섹션 12. mobile - section6
section6 - HTML 02:24
section6 - CSS / section5 CSS - 수정 13:37
section6 - CSS / JS 01:50
섹션 13. mobile - section7
section7 - HTML 04:36
section7 - CSS 11:09
section7 - JS 01:26
섹션 14. mobile - footer
footer HTML / CSS / section7 - CSS 수정 07:12
섹션 15. scroll animation / section1 counting
진행폴더 설명 미리보기 01:10
scrollTop button HTML / CSS / JS 07:04
scrollTop btn window 이동 - JS 01:40
scroll event - JS 09:16
section1 counting - JS 08:24
섹션 16. mobile navigation
sub nav - HTML 09:05
sub nav - CSS 18:15
sub nav - JS - slideDown / Up 12:40
sub nav - JS - resize 07:39
섹션 17. tablet - layout
min-width :400 ~ 768 - 13:23
min-width 768 - 999 08:29
섹션 18. desktop - header
desktop - header - HTML 04:19
desktop - header - CSS 10:29
desktop-header-CSS -2 04:39
desktop - submenu - HTML - banner wrap 추가 03:30
desktop - submenu - CSS -1 09:11
desktop - submenu - CSS - 2 07:40
desktop - header mouseover / dOpen - CSS 07:46
desktop - search_wrap - HTML 03:35
desktop - search_wrap - CSS 11:34
desktop - search_wrap / sOpen - CSS 03:15
desktop - header - subNav / search_wrap - JS 14:47
desktop - submenu /search - resize load 03:15
section 5 / 6 CSS 수정 04:26
섹션 19. desktop - section 0 / 1 / 2 / 3
section font-size 수정 05:05
section 0 / 1 / 2 - CSS 07:54
section3 - CSS 15:49
섹션 20. desktop - section 4 / 5 / 6 / 7 / footer
section4 / 5 / 6 / 7 - CSS - 1 07:56
section 4 / 5 / 6 / 7- CSS - 2 06:25
footer - HTML 07:15
footer - CSS - 1 15:02
footer - CSS - 2 10:37
footer - CSS / JS 06:06
강의 게시일 : 2023년 11월 29일 (마지막 업데이트일 : 2023년 11월 29일)
수강평 총 2개
수강생분들이 직접 작성하신 수강평입니다.
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
이종운 thumbnail
5
훌륭한 강의 감사합니다
2024-01-22
지식공유자 LIZ.B
종운님 감사합니다. ^^ 도움이 되셔서 더 많이 발전하기실 기원할께요!
2024-01-22
kwanggony thumbnail
5
파트2를 듣고 강의가 많은 도움이 되어서 파트3도 듣게 되었습니다. 왠만큼 알고 있는 내용이지만 그래두 혹시 모르는 부분이 있을까 싶어서 열심히 들었구요, 좋은 강의였고 아 이런 방법도 있구나 하고 생각이 드는 도움이 많이 되었던 강의였습니다. 좋은 강의 잘 들었습니다. 감사합니다^^
2024-04-20
지식공유자 LIZ.B
시리즈 강의를 다 들으셨다니, 정말 감사합니다. 또한 도움이 되셨다니, 저도 너무 기쁩니다. 더 좋은 강의로 찾아 뵙겠습니다! ^^
2024-04-20