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

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작) 대시보드

(5)
4개의 수강평 ∙  64명의 수강생

30,800원

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

초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.

실전! 웹사이트제작 Step By Step! 크루알라모드(https://crewalamode.com/) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다.

✍️
이런 걸
배워요!
실무에 적합한 레이아웃 제작 방법!
풀사이즈 동영상이 들어간 반응형 웹사이트 제작 방법!
스크롤 애니메이션 적용 방법!
스크롤시 디자인이 변경되는 헤더와 이미지 애니메이션!
글자별 텍스트 애니메이션!
GNB 오픈메뉴 제작 방법!

직접 따라 만들며 배우는 웹 사이트!
J.영과 함께 클론 코딩에 도전해보세요.

HTML/CSS만 알아도
인터랙티브 웹 제작 OK!

이 강의는 HTML과 CSS에 대한 기본 지식을 갖춘 분들을 대상으로 실제 웹페이지를 그대로 구현하며 진행됩니다. 


Step By Step!
지금 바로 시작하세요.

웹페이지 제작에 필요한 jQuery의 기초부터 활용까지 배울 수 있으며, 다양한 라이브러리와 플러그인을 활용하여 단시간에 멋있고 화려한 웹페이지를 제작할 수 있도록 여러분을 도와드립니다.

 

실무에서 꼭 필요로 하는 인터렉티브 요소들로 구성된 웹페이지 강의를 통해 업무 스킬과 실무 핵심 노하우를 한번에 얻을 수 있습니다.

실무는! 속도전이며, 확장성입니다.
작업시간 내에 빠르게, 고퀄리티의 프로젝트를 완료하시는 분만이 실력있는 디자이너, 퍼블리셔로 인정받고 대우받을 수 있습니다.

포메인 사이트를 함께 만들어 보면서, 화려한 웹사이트도 빠르게 제작해나갈 수 있는 노하우를 익혀보세요!


 

  1. HTML/CSS를 통한 초간단 레이아웃 작성법
  2. Transform을 활용한 다양한 호버(Hover) 효과
  3. 스크롤에 따라 디자인이 변경되는 헤더
  4. 플러그인을 활용한 텍스트 애니메이션
  5. 스크롤에 따라 진행되는 애니메이션
PC/Tablet/Mobile 기기별 반응형 페이지뷰
개발자도구 활용법


20년 경력의 실무+강의 노하우
J.young

안녕하세요? J.young입니다.

20여년간 웹 디자인 & 앱 개발 회사에서 디자인팀 총괄로 팀을 운영하며, 틈틈히 대학과 학교 및 직업훈련기관에서 UIUX디자인, 웹디자인, 웹퍼블리셔, 프론트엔드 개발 강의를 하고 있습니다. 디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로 웹디자이너/퍼블리셔 등 전문가 양성을 위해

  • 기초부터 실무까지!
  • 실무에서 원하는!
  • 실무에서 바로 써 먹을 수 있는 포트폴리오 제작!

강의를 진행하며 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다. 그런 만큼 많은 제자들이 현직 디자이너로, 퍼블리셔로 그 역량을 발휘하고 있습니다.

  • 웹디자이너나 퍼블리셔가 되고 싶어도 어디서부터 어떻게 시작할지 막막하신 분들
  • 이직을 위한 정규코스 학원을 다니고 싶어도 직장생활로 인해 엄두도 못 내시는 분들
  • 코딩의 ‘코’자도 모르시는 분들
  • 학원이나 유튜브 등으로 HTML/CSS 기초는 배웠지만 도통 웹사이트제작이 남의 이야기이신 분들

J.young이 도와드리겠습니다!

또한, 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면 도움이 되드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

실무 경력

  • 2015~2017 (주)엘리에셀 총괄이사
  • 2003~2015 (주)어뮤징웨어 총괄이사
  • ~2003 서우씨앤디 디자인실장

강의 및 기타 경력

  • 잘난웹디 유튜브 운영 중
  • 인천문예전문학교 (멀티미디어 웹 강의) 
  • 서울현대직업전문학교 (스마트 웹/앱 강의) 
  • 폴리텍대학 (디자인강의)
  • 한국IT전문학교 (멀티미디어 디자인 강의)
  • 두드림직업전문학교 (디자인 강의)
  • 광명시여성비전센터 (웹디자인 강의) 
  • 이젠컴퓨터학원강의 분당점 (디자인 강의)
  • 더조은컴퓨터아카데미 서초점 ([웹디자인기능사]디지털 웹 & 앱 디자인 - 과정평가형자격-A)
  • 하이미디어컴퓨터학원 서초점 (영상을 활용한 UI/UX 웹 디자인 & 웹 퍼블리싱)  

 

 

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
HTML/CSS 기초는 있으나 웹페이지 제작이 두려우신 분
웹디자이너, 퍼블리셔로 취업을 위해 빠르게 포트폴리오를 제작하고 싶으신 분
웹에서 필요로 하는 jQuery 소스를 익히고 싶으신 분
JavaScript 기초 없이 실무에서 필요로 하는 인터랙티브 웹을 손쉽게 구현하고 싶으신 분
현재 그래픽 디자이너로 프론트엔드 개발자나 퍼블리셔로 전향하고 싶으신 분
웹디자이너로서 업무 스킬을 향상시키고 싶으신 분
확장성을 고려한 인터랙티브 웹을 빠르게 구현하고 싶으신 분
📚
선수 지식,
필요할까요?
HTML / CSS 기초

안녕하세요
J.영 입니다.
J.영의 썸네일

 안녕하세요? J.young 임자영입니다.

20여년간의 웹디자인 & 앱개발회사를 운영하며, 대학과 전문학교 및 직업훈련기관에서 UI.UX디자인,웹디자인,웹퍼블리셔, 프론트엔드개발강의를 하고 있습니다.

디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로, 전문가(UI.UX디자이너/ 퍼블리셔/프론트엔드개발자) 양성을 위해!!
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오 제작! 강의로 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.

그런 만큼... 많은 제자들이 실무자로써의 그 역량을 발휘하고 있습니다.

-UI/UX디자이너, 퍼블리셔, 프론트엔드개발자가 되고 싶어도 어디서 부터
어떻게 시작할지 막막하신 분들..
- 이직을 위한 정규 코스 학원을 다니고 싶어도 직장 생활로 인해 엄두도 못 내시는 분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 HTML/CSS기초는 배웠지만 -
도통...웹 퍼블리싱 개발 구현이란 남의 이야기이신 분들....

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

 

실무경력

- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- ~2003년: 서우씨앤디 디자인실장

강의경력
- 인천문예전문학교
- 서울현대직업전문학교
- 폴리텍대학
- 한국IT전문학교
- 이젠아카데미 (서초점) (프론트엔드/ UI.UX/ 포트폴리오제작 강의)
- 더조은컴퓨터아카데미 서초점 (UI/UX /프론트엔드개발)
- 현)이젠DX교육센터 강남점(프론트엔드/ UI.UX/포트폴리오제작 강의)

 

감사합니다^^ 


운영중인유튜브

잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ

커리큘럼 총 19 개 ˙ 3시간 5분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro
Intro 미리보기 01:36
브라켓 설치 방법 & 결과 파일 첨부 02:17
섹션 1. header 영역 제작하기
header 영역 제작 14:08
섹션 2. visual 영역 제작하기
visual 영역 제작 07:39
섹션 3. contents 영역 제작하기
contents 영역(section.about) 09:11
contents 영역(section.approach) 21:53
contents 영역(section.sectore) 12:07
contents 영역(section.service) 03:55
contents 영역(section.journal) 09:13
섹션 4. footer 영역 제작하기
footer 영역 제작 06:59
섹션 5. fixed header (픽스헤더 제작)
스크롤시 디자인이 변경되는 fixed header 제작 07:02
섹션 6. Scroll animation,Text animation
스크롤/텍스트 애니메이션 제작_1 11:04
스크롤/텍스트 애니메이션 제작_2 15:18
스크롤/텍스트 애니메이션 제작_3 09:08
섹션 7. GNB 네비게이션 제작하기
GNB 제작 07:03
섹션 8. Responsive (반응형 웹 제작)
반응형 웹 제작_(max-width:1400px) 04:59
반응형 웹 제작_(max-width:1024px) 15:59
반응형 웹 제작_(max-width:768px) 08:04
반응형 웹 제작_(max-width:500px) 17:44
강의 게시일 : 2021년 08월 03일 (마지막 업데이트일 : 2023년 09월 07일)
수강평 총 4개
수강생분들이 직접 작성하신 수강평입니다.
5
4개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
초록 thumbnail
5
깔끔한 진행과 자세한 설명으로 따라가기 수월했습니다. 좋은 강의 잘 듣고 갑니다!
2023-11-22
지식공유자 J.영
chfhdvlcl님 높은 수강평 감사드립니다. 본강의를 활용하여 웹사이트제작에 많은 도움이 되셨으면 합니다. 대방사이트와 뮤자인사이트 강의도 실무 활용에 많은 도움이 되리라 생각됩니다. 다시한번 응원드립니다. 감사합니다. J.young드림
2023-11-28
_한예리 thumbnail
5
j영님 강의만 두개들었는데 두개 전부 매우 만족했습니다! 강사님이 차분하게 알려주셔서 쉽게 따라할 수 있고 배운걸 바탕으로 바로 실전에 응용할 수 있어서 좋았습니다! 덕분에 실력이 정말 많이 늘었어요.
2023-05-10
지식공유자 J.영
예리님 수강평 감사드립니다. 제 강의를 2개나 들어주셨는데 실력향상에 많은 도움이 되었으면 합니다. 정말 감사드리구요~~ 항상 좋은강의로 찾아뵙도록 하겠습니다. 감사합니다^^ J.young드림
2023-08-04
ciel0727 thumbnail
5
천천히 잘 알려주십니다!!
2021-08-31
지식공유자 J.영
ciel0727님 수강평 감사드립니다~~ 더 좋은 강의로 찾아뵙도록 하겠습니다~ 감사합니다^^ 지속적 열공 부탁드려요~ J.young드림
2021-09-01
루피 thumbnail
5
설명도 꼼꼼하게 해주시고 알기 쉽게 설명해주셔서 넘 좋아요 ~
2021-08-09
지식공유자 J.영
루피님~ 제가 더 감사드립니다. 지속적으로 좋은 강의로 찾아뵙도록 하겠습니다 감사합니다^^
2021-08-10