강의

N
챌린지

멘토링

N
클립

커뮤니티

개발 · 프로그래밍

/

프론트엔드

Colini 웹개발 가이드

웹 개발 처음 시작하시는 분들을 위한 완전 기초 강의! HTML, CSS, Javascript, React 등 웹개발 기초를 쌓아보자!

13명 이 수강하고 있어요.

  • 싸플
이론 실습 모두
웹개발
HTML/CSSJavaScriptReact

이런 걸 배울 수 있어요

  • HTML

  • CSS

  • Javascript

  • React

001
002
003
004
005
006
007

Node FullStack 개발 가이드 시리즈

순서대로 따라오면 어느덧 풀스택 개발자!

웹 개발을 위한 기초 개념부터 최신 라이브러리까지, 꼭 필요한 내용을 학습해 볼 수 있습니다.

수강 전 참고해주세요! 📢

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 코딩을 처음 시작하는 사람

  • 단계별 학습을 원하시는 분

  • 웹 개발을 기초부터 시작하고 싶으신 분

  • 5분 이상 강의 듣는 게 어려우신 분

  • 불필요한 말 없이 강의만 깔끔하게 듣고 싶은 분

안녕하세요
입니다.

낮에는 평범한 회사원이지만, 밤에는 열정을 가진 개발자 입니다

커리큘럼

전체

76개 ∙ (5시간 34분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

인터랙티브 웹 개발 제대로 시작하기강의 썸네일

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

초급

초급

HTML/CSS, JavaScript, 인터랙티브 웹

인터랙티브 웹 개발 제대로 시작하기강의 썸네일

인터랙티브 웹 개발 제대로 시작하기

1분코딩

웹 애니메이션을 위한 GSAP 가이드 Part.03강의 썸네일

웹 애니메이션을 위한 GSAP 가이드 Part.03

범쌤

웹 애니메이션의 꽃, 스크롤 애니메이션! GSAP을 보다 강력하게 사용할 수 있는 ScrollTrigger에 대해 학습합니다.

초급

초급

scrolltrigger, gsap, 인터랙티브 웹

웹 애니메이션을 위한 GSAP 가이드 Part.03강의 썸네일

웹 애니메이션을 위한 GSAP 가이드 Part.03

범쌤

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지강의 썸네일

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

효빈 Hyobin

기본 문법부터 심화 개념까지 학습하면서, 바닐라 자바스크립트로 SPA를 개발해 봅시다🔥

초급

초급

JavaScript, SPA, DOM

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지강의 썸네일

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

효빈 Hyobin

따라하며 배우는 타입스크립트 A-Z강의 썸네일

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

초급

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z강의 썸네일

따라하며 배우는 타입스크립트 A-Z

John Ahn

웹 애니메이션을 위한 GSAP 가이드 Part.01강의 썸네일

웹 애니메이션을 위한 GSAP 가이드 Part.01

범쌤

GSAP을 통해 인터랙티브 웹 개발에 한 단계 다가갈 수 있으며, 애니메이션을 보는 관점이 달라질 겁니다.

초급

초급

gsap, 인터랙티브 웹, JavaScript

웹 애니메이션을 위한 GSAP 가이드 Part.01강의 썸네일

웹 애니메이션을 위한 GSAP 가이드 Part.01

범쌤

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의강의 썸네일

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

그린코딩

꽉 찬 40시간 스프링 기반 풀스택 웹 개발 전면 무료 강의

입문

입문

HTML/CSS, JavaScript, JSP

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의강의 썸네일

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

그린코딩

Javascript ES6+ 제대로 알아보기 - 중급강의 썸네일

Javascript ES6+ 제대로 알아보기 - 중급

정재남

ES6+ 제대로 알아보기 강좌는 Javascript의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 살펴봅니다.

중급이상

중급이상

JavaScript, ES6

Javascript ES6+ 제대로 알아보기 - 중급강의 썸네일

Javascript ES6+ 제대로 알아보기 - 중급

정재남

[웹 개발 풀스택 코스] HTML&CSS 기초강의 썸네일

[웹 개발 풀스택 코스] HTML&CSS 기초

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 HTML&CSS에 대한 강의입니다. 이 강의를 통해 웹 개발의 뼈대인 HTML과 웹을 아름답게 만드는 CSS에 대해서 이해하게 됩니다.

입문

입문

HTML/CSS

[웹 개발 풀스택 코스] HTML&CSS 기초강의 썸네일

[웹 개발 풀스택 코스] HTML&CSS 기초

개발자의 품격

누구보다 빠르게 배우는 풀스택 게시판 만들기강의 썸네일

누구보다 빠르게 배우는 풀스택 게시판 만들기

Neo

이 강의에 서버(Java+Springboot) 와 프론트(React, ReactNative, Flutter, Android, iOS)를 모두 담았습니다. 이 강의로 풀스택 게시판 만드는 경험을 진행해보세요

입문

입문

React, React Native, iOS

누구보다 빠르게 배우는 풀스택 게시판 만들기강의 썸네일

누구보다 빠르게 배우는 풀스택 게시판 만들기

Neo

CSS GRID 마스터: FIGMA 디자인 웹구현 실전강의 썸네일

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

이지웹

CSS Grid는 복잡한 레이아웃도 간단하고 직관적으로 구현할 수 있는 강력한 도구입니다. 이번 강의에서는 CSS Grid의 핵심 개념부터 실전 활용법까지 단계별로 쉽게 배울 수 있도록 구성했습니다. 이제 복잡한 float과 flexbox에 얽매이지 말고, 효율적인 레이아웃 설계의 정석을 배워보세요! 지금 바로 시작하세요!

초급

초급

HTML/CSS, jQuery, Figma

CSS GRID 마스터: FIGMA 디자인 웹구현 실전강의 썸네일

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

이지웹

Node.js로 웹 크롤링하기강의 썸네일

Node.js로 웹 크롤링하기

제로초(조현영)

네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

중급이상

중급이상

JavaScript, Node.js, 웹 크롤링

Node.js로 웹 크롤링하기강의 썸네일

Node.js로 웹 크롤링하기

제로초(조현영)

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]강의 썸네일

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

입문

입문

HTML/CSS, 웹 디자인, 클론코딩

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]강의 썸네일

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

초급

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

초급

HTML/CSS, JavaScript, REST API

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

바이브 코딩 With Claude Code로 웹 서비스 만들기강의 썸네일

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

입문

입문

HTML/CSS, JavaScript, Next.js

바이브 코딩 With Claude Code로 웹 서비스 만들기강의 썸네일

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

초급

초급

NestJS, REST API, backend

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

Javascript ES6+ 제대로 알아보기 - 보너스강의 썸네일

Javascript ES6+ 제대로 알아보기 - 보너스

정재남

ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

초급

초급

ES6, JavaScript

Javascript ES6+ 제대로 알아보기 - 보너스강의 썸네일

Javascript ES6+ 제대로 알아보기 - 보너스

정재남

React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

초급

React, React Native, 하이브리드 앱

React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기강의 썸네일

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

Neo

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 ReactNative로 나만의 게시판을 만들어보세요!

초급

초급

JavaScript, React Native, Kotlin

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기강의 썸네일

누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

Neo

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인기능사 출제기준(2025.1.1~2025.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

입문

HTML/CSS, jQuery, 웹 디자인

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

Node FullStack 개발 로드맵, A~Z 까지 로드맵 썸네일

Node FullStack 개발 로드맵, A~Z 까지

싸플