만들면서 배우는 실전 퍼블리싱
-
코스 난이도
초급 -
사용 언어
# HTML5# CSS3# JavaScript -
모집 기간
~ 1월 15일(화) 까지
강의 소개
마크업을 설계할 때 자주 헷갈리는 Semantic 태그와 문서화 구조의 구성, 막연하게 느껴지는 Grid와 Flexbox, jQuery 없이는 만들 수 없는 JavaScript 코드, 등등...
웹 개발을 할 때 가장 기본이 되지만 늘 헷갈리는 퍼블리싱을 4주간 진행되는 온라인 세션에서 스터디 리더와 함께 매주 미션을 진행하며 관련 기술 학습하고 코드 리뷰를 통해 스터디에서 배운 기술을 손에 익힐 수 있습니다.
수강 후 기대 효과 및 추천 대상
👍🏻 수강 추천
스크립트는 자신 있으나 HTML, CSS 그리고 반응형 웹 경험이 부족하고
실무에서 바로 사용할 수 있는 다양한 UI를 웹 표준에 맞게 다루고 싶은 분께 추천합니다.
🎯 기대 효과
- 마크업 설계 및 적절한 Semantic 태그 사용 능력 향상
- Semantic 태그와 Heading 태그의 사용으로 SEO 최적화 능력 향상
- CSS Grid, Flexbox의 효율적인 활용 능력 향상
-
Figma 활용법
ㄴ Inspect에 나온 스타일은 전체 복붙? 🤔 Inspect 보는법
ㄴ SVG?, PNG?, 2배 이미지?, 😵💫 자원의 효율적인 Export 방법
수강 시 꼭 확인해 주세요.
✅ 준비물이 필요합니다.
- 개인 컴퓨터(노트북) : Mac OS, Windows 무관
- GitHub 계정 : 미션 제출 및 코드 리뷰를 위한 협업 플랫폼
- Figma 계정 : 미션 디자인 확인을 위한 디자인 툴
- Zoom : 주차별 화상 스터디 툴
- Slack : 실시간 채팅 및 Q&A
- Visual Studio Code (권장) : 스터디에 사용할 개발 에디터
- GitHub Desktop (권장) : GitHub를 좀 더 편하게 사용하기 위한 GUI 프로그램
🗓 스터디 일정을 확인해주세요.
- 스터디 기간 : 1월 19일(목) ~ 2월 9일(목), 4주간
-
온라인 세션 : 매주 목요일 오후 8시 (1~2시간)
Zoom을 통해 스터디 리더와 온라인 스터디를 진행합니다.
미션에 대한 설명과 관련 기술 소개 그리고 코드 리뷰가 진행됩니다.
강사소개
HTML, CSS는 우리가 웹 개발을 할 때 가장 처음 배우는 개발 언어입니다.
그런데 요즘 프론트엔드 커리큘럼은 HTML, CSS는 얕게 다루고 JavaScript를 중점으로 배우고 React, Vue 등 Front Framework를 공부하고 또 다른걸 학습하는 커리큘럼이 일반화되었습니다.
물론 위의 학습이 나쁘지 않지만, 많은 웹 개발자분들을 만나면서 마크업을 할 때 오히려 더 시간을 쓰고 더 고민하시는 모습을 많이 보다보니 프론트엔드 개발자로써 다른 개발에 더 집중하실 수 있게 빠르고 효율적으로 마크업을 하는 방법을 알려드리고 싶어서 스터디를 개설했습니다.
스터디를 통해 더 이상 마크업에 고민하지 않고 프론트엔드 개발에 날개를 다시면 좋겠습니다. 🙂
- 현) grepp(프로그래머스) 웹퍼블리셔
- 전) SJW International(시원스쿨) 웹퍼블리셔
- 전) P2P 크라우드펀딩 에이전시 웹퍼블리셔
커리큘럼
1주 차 - 들어가기
- 실제 서비스 중인 여러 사이트를 보며 마크업 구조 분석과 그에 따른 적절한 Semantic 태그 사용 설명
- Layout CSS인 Flexbox와 Grid에 대한 빠른 활용법 학습
2주 차 - Tab과 Accordion 그리고 비동기
3주 차 - Form과 Modal
- 반응형 Modal을 직접 구현하고 사용자 경험을 높이기 위한 방법 학습
- Validation API와 CSS 의사 클래스를 활용한 Form의 유효성 검사와 다양한 활용법 학습
4주 차 - 프로젝트가 시작됐다, 뭐부터 해야 할까?
- 시안을 보며 백지부터 구성하는 프로젝트 초기 세팅
- 자주 받은 질문에 대한 답변과 실시간 Q&A
