‘코딩 30일 챌린지’ 주인공과 함께하는
비전공자·디자이너를 위한
새로운 코딩 입문서

HTML·CSS는 작성한 결과가 눈에 보여 코딩 입문자에게 적합한 언어다. 『비전공자를 위한 첫 코딩 챌린지 with HTML&CSS』는 HTML·CSS 언어로 ‘나만의 웹 사이트’를 만들 수 있게 이끌어준다. 비전공자인 저자가 30일간의 코딩 도전으로 깨닫게 된 코딩 입문 방법을 알려주 코딩 초보자도 쉽고 명확하게 이해할 수 있도록 학습 목표를 일목요연하게 제시하고 핵심 내용을 정리해 보여준다. 단계별로 프로젝트를 구현하며 코딩을 직접 체험할 수 있게 했다. 또한 멋진 프로젝트를 만들고 결과물을 웹에 배포하는 방법도 알려준다. 개발자와 협업하고 개발에 필요한 기획과 디자인을 하는 배경 지식을 갖추고 싶은 분이라면 지금 당장 코딩 챌린지에 도전하자.

영상, 디자인, 개발 등 다양한 분야에 관심을 가지고 있다. 유튜버이자 프리랜서로 일하고 있다. 비전공자를 위한 코딩 30일 챌린지 영상으로 50만 조회수를 기록했으며, 개발자와 협업하여 웹 사이트 제작을 담당했다. 현재는 웹 프론트엔드 개발자의 꿈을 더 키워 가고 있다.

00장 개발 환경 구축

[1단계 첫 코딩에 입문하기]

01장 나만의 코딩 목표 세우기
_1.1 이 책의 범위 안내
_1.2 목표와 일정 정하기
_1.3 프로젝트 기획하기

02장 웹, HTML이 뭐지?
_2.1 웹이 뭐지?
_2.2 웹 페이지는 뭘까?
_2.3 웹은 어떻게 동작하지?
_2.4 HTML은 또 뭐야?
_2.5 나도 안다! 코딩 상식!
학습 마무리

03장 첫 코딩 도전하기
_3.1 비주얼 스튜디오 코드 뜯어보기
_3.2 VSCode 확장 프로그램 설치하기
_3.3 Hello world : 새 파일을 생성해 코드 작성하기
_3.4 나도 안다 코딩 상식
학습 마무리

04장 태그로 웹 페이지 만들기
_4.1 태그 이해하기
_4.2 대표적인 태그 알아보기
학습 마무리

05장 HTML 특징 정복하기
_5.1 태그의 부모 자식 관계
_5.2 HTML과 검색되는 텍스트
_5.3 검색 엔진이 뭐야?
_5.4 검색 엔진 최적화가 뭐야?
학습 마무리

06장 코딩 맛보기 : 3가지 미니 코딩 챌린지
_6.1 사전 지식
_6.2 코딩 맛보기 : Hello World 출력하기 ☆☆☆☆
_6.3 코딩 맛보기 : 나만의 폼 만들기 ★☆☆☆
_6.4 코딩 맛보기 : 메뉴판 만들기 ★☆☆☆
학습 마무리

[2단계 CSS로 웹 꾸미기 113]

07장 CSS가 뭐지?
_7.1 CSS가 왜 필요해?
_7.2 CSS 적용하기
_7.3 외부 CSS 파일 적용하기
_7.4 글씨 크기, 정렬
_7.5 CSS 선택자
학습 마무리

08장 CSS 배치 속성과 반응형 웹
_8.1 배치 속성이 뭐야?
_8.2 박스 모델 : 마진, 테두리, 패딩
_8.3 실습 : 반응형 웹 페이지 만들기
학습 마무리

09장 CSS 레이아웃 : 플렉스박스
_9.1 플렉스박스의 등장
_9.2 플렉스가 필요한 순간 확인하기
_9.3 플렉스박스로 정렬하기
_9.4 플렉스 축 방향 바꾸기 : flex-direction
학습 마무리

10장 CSS 레이아웃 : 위치 지정
_10.1 자식이 부모가 될 수 있다?
_10.2 위치 지정하기
학습 마무리

11장 가상 선택자와 클래스
_11.1 가상 선택자 사용법
_11.2 동적 가상 클래스
_11.3 구조적 가상 클래스
_11.4 미니 퀴즈 풀어보기
학습 마무리

12장 CSS 애니메이션 만들기
_12.1 전환
_12.2 변형
_12.3 애니메이션 동시에 적용하기
_12.4 키프레임
학습 마무리

13장 깃/깃허브 배우기
_13.1 깃 입문하기
_13.2 깃허브 입문하기
_13.3 깃/깃허브 핵심 개념 알아보기
_13.4 [실습] 깃허브 사용하기
학습 마무리

14장 박스 레이아웃 만들기
_14.1 힌트
_14.2 풀이 보기
_14.3 STEP 1 : HTML 레이아웃 구성하기
_14.4 STEP 2 : 스타일링
_14.5 STEP 3 : 화면 중앙으로 위치시키기
학습 마무리

15장 햄버거 만들기
_15.1 사전 지식
_15.2 힌트
_15.3 풀이 보기
_15.4 STEP 1 : HTML 레이아웃 구성하기
_15.5 STEP 2 : 햄버거 스타일링
학습 마무리

16장 프로필 UI 구현하기
_16.1 사전 지식
_16.2 힌트
_16.3 풀이 보기
_16.4 STEP 1 : 배경과 HTML 구성하기
_16.5 STEP 2 : 배너와 프로필 사진 만들기
_16.6 STEP 3 : 텍스트와 버튼 만들기
학습 마무리

[3단계 도전, 영상 서비스 앱 UI 클론 코딩]

17장 〈Project #1〉 로그인 페이지 만들기
_17.1 뜯어보기
_17.2 사전 지식
_17.3 STEP 1 : 파일 정리하기
_17.4 STEP 2 : 헤더 만들기
_17.5 STEP 3 : 로그인 폼 만들기 - 로그인 폼
_17.6 STEP 4 : 로그인 폼 만들기 - 스타일링 준비
_17.7 STEP 5 : 로그인 폼 만들기 - 배경과 폰트 스타일링
_17.8 STEP 6 : 로그인 폼 만들기 - 로그인 폼 스타일
학습 마무리

18장 〈Project #2〉 콘텐츠 추천 페이지 만들기
_18.1 뜯어보기
_18.2 사전 준비
_18.3 STEP 1 : 검색바 만들기
_18.4 STEP 2 : 추천 작품 만들기
_18.5 STEP 3 : 다른 작품 추천 기능 만들기
_18.6 STEP 4 : 네비게이션바 만들기
학습 마무리

19장 〈Project #3〉 마이 페이지 만들기
_19.1 뜯어보기
_19.2 사전 준비
_19.3 STEP 1 : 프로필 만들기
_19.4 STEP 2 : 이어보기 만들기
_19.5 STEP 3 : 내가 찜한 목록 만들기
_19.6 STEP 4 : 네비게이션 만들기
_19.7 STEP 5 : 미디어 쿼리로 화면 간격주기
학습 마무리

20장 〈Project #4〉 웹에 배포하기
_20.1 웹 호스팅이 뭐지?
_20.2 깃허브로 웹 호스팅하기
학습 마무리

부록. 리플잇 : 온라인 에디터