Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드

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)의 기초는 있지만 종합적으로 적용하기에 막막하다면 본 강의를 확인해보세요. 

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

많은 관심부탁드립니다.