로드맵 썸네일

비전공자를 위한 웹개발 필수코스 [ 부트스트랩을 활용한 반응형 웹 제작 ] 프론트엔드 취업 포폴 로드맵

작성자 프로필 이미지

영코디 킴쌤

HTML/CSS
반응형 웹
Bootstrap

초급 대상

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

24명 참여중

40% 할인

5개 남음전체 구매 적용
쿠폰 받기

로드맵 코스


'요즘엔 다들 코딩을 필수로 기본은 한다는데 무엇부터 공부해야 하지....?' 

CODING STUDY
START!
👩🏻‍💻

첫 코딩공부로 어떤 언어를 접해야 할지 고민중에 있다면 개발자들이 가장 첫번째 Basic 필수코스로 권장하는 웹개발로 시작해 보세요. 프로그래밍 언어 중 가장 배우기 쉬운 언어이면서 내가 짠 코드가 바로바로 눈 앞에서 결과를 보여주며 멋진 웹페이지를 제작해주므로 가장 재미있게 코딩공부를 시작하실 수 있습니다.


사실, 코딩 공부를 막 시작했다면 html, css, js도
외계어
👽로 보이는 것이 사실😭입니다.



"트위터 개발자들이 mobile first! 를 슬로건으로 다양한 디바이스에서 레이아웃이 바뀌도록 만들어 오픈소스로 공개한 부트스트랩을 활용하면 코딩 완전 초보자도 일주일만에 완벽하게 반응하는 [반응형 웹]을 아주 손쉽게 제작할 수 있습니다."

이거 혹시 내 이야기?
이런 분들께 추천할게요 🙋‍♂

코딩을 처음 시작하는 학생부터 시작해서, 남녀노소 다양한 계층에게 코딩 입문으로 가장 좋은 강의입니다.
또한, 본인의 웹페이지를 만들고 싶으신 사업자 분들도 차근차근 따라하다 보면 어느새 원하는 웹페이지가 만들어집니다.

프론트엔드 웹 개발자로 취업을 준비하는 분들에게는 직접 작업한 반응형 웹 프로젝트가 꼭 필요합니다.
웹 프론트엔드 역량을 키우고 싶거나 프론트 업무까지 소화해야 하는 상황에 있으신 백엔드 개발자 분들에게도 추천하는 강의입니다.

부트스트랩을 사용해보니 이제는 나만의 유니크한 디자인도 제작하고 싶다면
PART3까지 정주행해 보세요.
프레임워크를 사용해서 간단하고 손쉽게 반응형 웹을 만들 뿐 아니라 프레임워크를 사용하지 않고도 본인이 원하는 기획안대로 반응형 웹을 만드는 실전 테크닉을 자연스럽게 익힐 수 있습니다.

"반응형 웹" 로드맵
파트별 포인트 🎯

각 파트별 강의의 포인트를 알아볼까요?

PART1
반응형을 손쉽게 제작
할 수 있는 프레임워크인
부트스트랩 개념 익히기

반응형 웹을 가장 손쉽게 만들 수 있는 첫번째 방법으로 부트스트랩(BOOTSTRAP) 프레임 워크의 개념을 이해하고 간단하게 예제를 실습할 수 있는 부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 강의를 통해 반응형 웹을 가장 손쉽게 제작할 수 있는 이론과 기본개념을 튼튼히 다집니다. 이 강의는 이미 인프런에서 구독자 약 10만 달성을 앞두고 있는 강의로 많은 구독자분의 수강평을 통해 검증되었으며 "기존의 Bootstrap3 에서 한단계 업그레이드된 킴쌤의 Bootstrap4 강의"를 만나보실 수 있습니다.

PART2
부트스트랩을 이용하여
반응형 웹 실전 제작

이론을 튼튼히 다졌다면 부트스트랩을 활용한 반응형 웹페이지 만들기 실전편[2024년 최신판] 강의를 통해 실전 제작수업으로 "디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작"해 봅니다. 이 강의에서는 부트스트랩을 활용하면서 초보자가 가장 어려워 하는 부분인 개발자 입맛에 맞게 커스터마이징 하는 부분에 대한 내용도 다수 포함되어 부트스트랩의 가장 단점이라고 할 수 있는 동일한 스타일의 판박이처럼 찍어낸 웹페이지가 아닌 기존의 부트스트랩의 정형화된 스타일 틀을 벗어나 재구성하는 부분도 디테일하게 학습할 수 있습니다.

PART3
"판박이같은 웹페이지
말고 나만의 유니크한
반응형 웹"을 만들어보자

부트스트랩의 틀에서 벗어나 나만의 유니크한 반응형 웹을 만들고 싶다면 @mediaquery를 이용해 나만의 개성있는 반응형 웹페이지를 제작해보는 "부트스트랩 도움없이 css만을 활용한 반응형 웹페이지 만들기 실전편[2024년 최신판] 강의"를 통해 여러분은 프레임워크의 도움을 받지 않고도 100% 본인의 코드를 통해 완벽하게 반응하는 반응형 인터렉티브 웹페이지를 제작할 수 있게 됩니다.

이 로드맵에서 배우는 내용 

  1. html : 웹페이지를 만들기 위한 구조를 다양한 정보들을 담아 작성합니다.

  2. CSS

    : 정보의 구조를 보기 쉽게 시각화하기 위해 스타일을 만듭니다.

  3. JS :

    사용자가 마우스를 클릭하거나 휠을 스크롤하는 등의 이벤트가 발생하였을 때 동적으로 동작하는 요소들을 추가합니다.

  4. 부트스트랩의 이해 :

    데스크탑, 타블렛, 스마트폰에서 레이아웃이 다양하게 반응하는 반응형 웹을 손쉽게 제작할 수 있는 프레임워크인 부트스트랩에 대한 개념과 어떠한 구성요소들로 이루어져 있는지 파악하며 간단한 실습을 통해 사용방법을 이해합니다.

  5. 부트스트랩을 활용한 실전 반응형 페이지 제작: 실제로 부트스트랩을 활용하여 실제 실무형 싱글 웹페이지를 만들어보면서 부트스트랩 구성요소들을 활용하는 방법들을 반복적으로 실습하며 익숙해지는 동시에, 부트스트랩의 스타일에서 수정, 변경하고 싶은 부분을 직접 커스터마이징하는 방법과 동적인 요소들을 제이쿼리 플러그인이나 JS를 통해 추가하는 방법을 익힙니다.

  6. 부트스트랩을 활용하지 않고 순수하게 코딩으로만 실전 반응형 UIUX 페이지 제작 :

    프레임워크의 정해져있는 스타일과 레이아웃의 틀에 얽매이지 않기 위해 부트스트랩을 전혀 사용하지 않고도 html, css, js만을 100% 이용하여 완벽하게 반응하는 반응형 실무 웹을 실제로 제작해보면서 프론트엔드의 실무감각을 익히는 동시에 본인만의 유니크한 반응형 웹을 만들 수 있도록 마스터합니다.

수강생 분들의 후기를 확인하세요 😎

선임 개발자분이 영코디 킴쌤님의 강의를 추천해주셔서 수강했는데 주말동안 편한 마음으로 들으면서 완강했습니다.

부트스트랩의 이론도 핵심내용을 잘 짚어주시고 각 실습예제들을 활용한 예시를 보여주셔서 어떻게 사용해야 할지 금방 감을 잡을 수 있었습니다.


시작한 김에 부트스트랩 실전수업까지 정주행하러 갑니다!!

coding****

토 일 이틀동안 이론수업에 이어서 실전수업까지 재미있게 완강하고 갑니다. 어렵게만 생각했던 프론트엔드가 부트스트랩을 활용하니 이렇게 간단하면서도 빠르고 쉽게 반응형 웹이 만들어진다니 너무 신기하고 이렇게 짧은 시간에 마스터할 줄 알았으면 진작 들을걸 하는 생각도 들었습니다.
부트스트랩은 부트스트랩 스타일로만 사용할 수 있는줄 알았는데 디자인을 사용자가 원하는대로 변경해서 쓸 수 있다는 점과 커스터마이징하는 부분이 실습내용에 많아서 그 부분도 좋았습니다. 저처럼 백엔드 개발자 뿐만 아니라 코딩공부를 처음 입문하시는 분들에게도 필요한 좋은 강의인 것 같습니다. 강추합니다.
영코디 킴쌤님, 감사합니다. 다음 강의도 기다리고 있겠습니다.

******frog

👩 [영코디 킴쌤]을 소개합니다.

  • [ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 15년 넘게 풀스택(백엔드, 프론트엔드) 빅데이터 및 영상, 코딩, 디자인을 강의하며 개발자 인력양성에 진심인 현직 직업훈련교사

  • [컴퓨터 1도 모르는 사람이 부업으로 월100만원 수입내보기 첫걸음]의 저자

  • NCS 국가직무능력강의 고용노동부 평가 2018, 2019 2년연속 A등급 강사선정

  • 수원그린컴퓨터아카데미 우수강사선정(2017, 2018, 2019 3년연속 최우수1등상 수상)

  • 전) 삼성ODD 기획 개발 마케팅 담당

  • 전) SF필름스쿨 강의

  • 가톨릭대학교 컴퓨터공학부 특강

  • 용인송담대학 멀티미디어학부 특강

  • 인프런의 부트스트랩3(BOOTSTRAP)를 활용한 반응형 웹페이지 만들기 약 10만명 구독을 기념으로 그동안 [BOOTSTRAP4 강의]와 [부트스트랩을 활용한 실무 웹페이지 만들기 실습강의]에 대한 많은 요청을 DM으로 받아 기존 강의에서 부족했던 실습예제를 더욱 보강하여 부트스트랩 강의 최신버전으로 업그레이드하여 제작하게 되었습니다.

로드맵 상세보기

3개 코스

로드맵에 포함된 강의 썸네일
디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

29,700

39,600

40% 할인

5개 남음전체 구매 적용
쿠폰 받기

로드맵 코스 3