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/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

https://youtu.be/Rvv_X2mAcDI

LookBook P1/8 Download(파트1의 예제만 제공합니다. 순서대로 학습 바랍니다.) https://drive.google.com/file/d/1FMFeQpHlGFxDTQ5Yh4RjYtq-p4JucXqz/view?usp=sharing

예제 이미지 다운로드

https://drive.google.com/file/d/10lwzYg9yFkjzhR6rByXiM-l9Fb9lojay/view?usp=sharing

https://youtu.be/SSY64PtRxa8

TABLE RESPONSIVE
반응형 예제 1 (Responsive table example #1)
- https://codepen.io/alikerock/pen/YbdYKN

반응형 예제 2(Responsive table example #2)
-https://codepen.io/alikerock/pen/gJZoOG

페이지네이션 예제3 ( Pagenation Table )
- https://codepen.io/alikerock/pen/zQypjq

테이블 정렬 소팅하기 ( Table Sorting )
- https://codepen.io/alikerock/pen/zQyRqz

https://github.com/tristen/tablesort


에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: eztoweb

#table #responsive #sorting

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

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

https://youtu.be/U_r7IawXn3A

Sample LINK : http://bitly.kr/KMHTYd

http://detectmobilebrowsers.com/


에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

 #웹퍼블리셔, #프론트엔드

수료일: 2019.04.03 
과정시간: 1000시간  

1차 과제명 : CJES RENEWAL
과제 주소: http://sumini1st.dothome.co.kr
과제 특징: 주요 페이지 구현

2차 과제명 : 신세계 리뉴얼
과제 주소: http://sumini2st.dothome.co.kr/
과제 특징: 피그마 디자인 > 코딩, 주요 페이지 구현, 반응형, 웹표준 검사, 스크립트 작성

3차 과제명 : SLOW PHARMACY
과제 주소: http://sumini3st.dothome.co.kr/
과제 특징: 피그마 디자인 > 코딩, 반응형

https://youtu.be/OI58zRqsCUQ

예제 다운로드: http://bitly.kr/6Wbqt8

FLEX Layout Part 2 
- justify content
- align-items
- order
- flex

에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#css, #flex, #layout

https://youtu.be/on_G6adE_1w

예제 다운로드: http://bitly.kr/TrrhqB

- justify-content
- 비율지정하기
- align-content
- flex-wrap

에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#css, #flex, #layout