Rock's Ezweb

html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.

인프런에서 만나보세요 : https://inf.run/CZ1az

초급자를 위해 준비한 [웹 개발, UX/UI] 강의입니다.

이런 걸 배워요!

• Figma 디자인 해석과 이미지 추출하기
• HTML/CSS 파일 초기 세팅하기
• CSS 변수 및 글로벌 스타일 작성하기
• 웹폰트 사용 설정하기
• 레이아웃 설계: Grid와 Flexbox 활용하기
• 미디어쿼리 활용 반응형 CSS 구현하기
• 컨테이너 쿼리 활용 반응형 CSS 구현하기
• Swiper.js를 활용한 리뷰 슬라이드 제작하기
• jQuery활용 모바일 메뉴, 장바구니 토글 슬라이드 제작하기
• GitHub Pages 활용 웹사이트 배포하기

본 과정은 HTML, CSS, Javascript, jQuery 기초가 있어야 원할하게 학습하실 수 있습니다.

각 파트별 학습은 아래 링크를 확인해주세요.

• HTML 기초: https://inf.run/DL3EM
• CSS 기초: https://inf.run/h8H9G
• Flexible 레이아웃: https://youtu.be/_PSy66fkQ7U,
• https://youtu.be/N27SvfJMXMs
• Javascript 기초: https://bit.ly/4gXtRnN
• JQUERY 기초: https://bit.ly/49TUGHb

html, css, javascript(jQuery)의 기초는 있지만 종합적으로 적용하기에 막막하다면 본 강의를 확인해보세요. 

디자인에서 레이아웃 및 스타일을 확인하고 반응형까지 구현하는 종합 강의가 되겠습니다. 

많은 관심부탁드립니다. 

https://youtu.be/BF7Wszaa2vE

sample link https://codepen.io/alikerock/pen/gObQwoz

- 별점 표시하기 html, css, script - 폰트어썸 별표

#jquery #rating #별점

완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/

https://youtu.be/KaKFE2r57fE

sample link (90번 영상예제에서 이어서 학습 바랍니다.) https://drive.google.com/file/d/1JN-aYgGxzJff-DTzX_KLEmLWYZYNmpv3/view?usp=sharing

- 체크박스라디오

- 진행률 표시

- jQuery UI widget : Checkboxradio, progressbar

#jquery #jqueryui #checkboxradio

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

https://youtu.be/6xZAnbHzvPk

sample link (90번 영상예제에서 이어서 학습 바랍니다.) https://drive.google.com/file/d/1JN-aYgGxzJff-DTzX_KLEmLWYZYNmpv3/view?usp=sharing

- 숫자

- 달력

- 버튼 위젯

#jquery #jqueryui #spinner #datepicker

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

https://youtu.be/95iNG7pbWBs

sample link https://drive.google.com/file/d/1JN-aYgGxzJff-DTzX_KLEmLWYZYNmpv3/view?usp=sharing

- 셀렉트 메뉴

- 자동완성

#jquery #jqueryui #selectmenu #autocomplete

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

https://youtu.be/LDfMeCyhyAs

sample link https://codepen.io/alikerock/pen/NyWPjq

- display:flex 활용 모달 구현하기

#jquery #modal #flex

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

https://youtu.be/4igca0mIjz4

모달 팝업창1 - sample link 1 https://codepen.io/alikerock/pen/vmjVGz

모달 팝업창2 - sample download 2 https://drive.google.com/file/d/1fxvGmiNpwxGKOF2Gz-0rOJJ0m1kW8mfn/view?usp=sharing

- bootstrap modal

- lightbox library jQuery

모달 https://youtu.be/NFhaLV2I830

javascript 모달 https://youtu.be/r8mea8qrEoQ

#jquery #modal #bootstrap

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

https://youtu.be/G9gOBRjnAkc

예제 링크 (sample link) https://codepen.io/alikerock/pen/jmxpVG -

html5 dialog tag - jQuery Modal jQuery

모달 https://youtu.be/NFhaLV2I830 javascript

모달 https://youtu.be/r8mea8qrEoQ https://caniuse.com/#search=dialog

#dialog #jquery #modal #html5

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

https://youtu.be/XELoCdaeXls

자간조절하기 kerning js http://codepen.io/alikerock/pen/PGjaVm

Text animation - Lettering.js http://codepen.io/alikerock/pen/KgqBZL

Text animation - Textillate.js part1 http://codepen.io/alikerock/pen/xELgbv

Text animation - Textillate.js part2 http://codepen.io/alikerock/pen/KgvWaK

#jquery #animation #kerning #lettering

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

https://youtu.be/slDCMJKs9QA

반응형 텍스트 구현 방법 1 - vw http://codepen.io/alikerock/pen/vXmqxZ

반응형 텍스트 구현 방법 2 – fittext plugin http://codepen.io/alikerock/pen/bwWPJy

반응형 텍스트 구현 방법 3 – flowtype http://codepen.io/alikerock/pen/JRNgZm

#jquery #반응형 #fittext

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub