안녕하세요. 디자인베이스입니다. 웹 코딩 입문 강좌를 시작합니다 : )
“웹디자이너 하려면 웹코딩도 배워야한다는데 엄두가 안나요…”
“회사에서 갑자기 코딩하라고 압박이 와요.”
“카페24 템플릿 사서 쓰는 회사인데.. 갑자기 쇼핑몰을 일부 수정하래요…”
“개발자 분들이랑 소통하는데 어려움이 있어요..”
1. 웹코딩 강좌를 만든 이유
현재 실무에서 웹 디자이너로 활동하시는 분들이나 웹 디자이너가 되기를 희망하시는 분들의 가장 큰 고충은 사실 이렇죠. 주변에서 코딩은 해야된다고 말하는데 막상 하려니까 어디서부터 어떻게 해야할지 막막하죠. 온라인 강좌를 찾아보고 해보지만 대부분 개발자들을 위한 강좌뿐이고… 너무 어렵게만 느껴져서 빨리 포기하게 됩니다.
그게 우리가 코딩을 못하는 이유입니다. 흥미가 없기때문이죠.
그래서 디자인베이스에서 디자이너지만 코딩을 배우고 싶은 분들을 위한 강좌를 준비했습니다! 오직 디자이너를 위한 코딩 강좌… 최대한 디자이너입장에서 이해가도록 설명드리면서 당장 흥미를 느끼기에 장애물이 될만한 어려운 지식들은 다 빼고 핵심만 알려드립니다.
공감대를 형성하고 흥미를 느끼면 이 강좌가 끝나도 스스로 학습을 하게되고 그게 결국 우리의 실력으로 남습니다. 이 강좌를 완수한다면 최소한 어디가서 코딩? 할 줄 알아~
2. 웹코딩 입문 강좌 튜토리얼
- 강좌 소개 및 준비물
- 개발환경 설정
- 웹코딩 언어 소개 HTML, CSS, JS
- HTML 문법과 문서 구조 알고가기
- CSS 문법과 3가지 사용법
- 예제 – 버튼 Hover
- Class와 ID 개념 알고가기
- Display와 캐스캐이딩
- 부모와 자식 선택자란?
- Reset.css, Normalize.css
- 박스모델 – Border, Padding, Margin 개념
- 예제 – 포지션 활용
- 레이어 개념 Z-index
- 예제 – Float 활용
- 반응형을 위한 단위 – %, vh, vw
- Background 속성
- 구글 폰트 불러오기 및 스타일 적용하기
- CSS로 애니메이션 주기
- CSS로 그라데이션 적용하기
- 예제 – 로그인 UI
- 예제 – 카드 UI
- 반응형 웹을 위한 미디어 쿼리
- 예제 – 레이아웃
- 검색최적화를 위한 메타태그, SEO 이해하기
- 마우스 커서 이해하기
- 부트스트랩 살펴보기
- 제이쿼리 설치하기 + 기본문법
- 반응형 헤더 메뉴 만들기
- 라이브러리 사용 (Carousel)
- 도메인 및 호스팅 연결하기
- 구글 GA 연결하기
3. 필수 준비물
크롬 브라우저와 비주얼스튜디오코드를 사용할 예정입니다. Visual Studio Code는 주변 개발자분들도 많이 사용하시는 아주 괜찮은 에디터 툴입니다. 심지어 무료에요 🙂 자세한 설치 방법은 2. 개발환경 설정 강좌에서 보고 따라하시면 됩니다.
추가로 웹 디자인도 같이 공부하시고 싶다면 웹 디자인 입문 강좌도 같이 들으시면 도움 되실거에요~!
웹디자인 입문 강좌 – http://designbase.dothome.co.kr/start-webdesign-basic-course/
4. 자주하는 질문
Q. 코딩의 코 자로 모르는 입문자가 봐도 될까요?
A. 네, 그런 분들을 위한 만든 입문용 강좌입니다.
Q. 웹코딩을 배우면 웹 디자인에 도움이 되나요?
A. 개발자분들과 소통할때 도움이 되고, 효율적인 디자인을 할 때 큰 도움이 됩니다.
Q. 백앤드 강좌는 없나요?
A. 백앤드 강좌는 따로 없습니다. 다만 워드프레스와 같은 CMS를 이용해서 본인만의 사이트를 만드는 강좌를 준비중입니다. 최대한 개발 공부하는 시간은 줄이고 다양한 것을 만들어 볼 수 있도록 비 전공자를 위한 강좌들을 준비중입니다.
Q. 이 강좌를 들어서 코딩을 할줄 알면 구체적으로 뭘 할 수 있나요?
A. 본인만의 간단한 사이트를 만들거나 카페24 스킨을 본인 입맛에 맞게 디자인을 수정할 수도 있습니다. 티스토리 스킨도 마찬가지구요. 입문 강좌기 때문에 따로 공부하실 부분이 많겠지만, 흥미를 가지고 꾸준히 스스로 학습을 하신다면 자신감도 생기고 점점 더 할 수 있는게 많아집니다.
댓글 0
댓글을 남겨주시면 빠르게 확인 후 답변드리겠습니다.