프론트엔드 개발자 [입문자용 총정리] 강의 기초 부터 실무 인강 알지오 강좌

기초부터 차근차근 실무까지.
마지막 학습 보장!

프론트엔드 개발자 [입문자용 총정리]

강의구성
(30강) 전체 : 15시간 31분|평균 : 31분2초

이용기간 / 강사
2개월 / 알지오 R&D [IT]

1:1 수강생 전용
GPT 및 최신 AI 기술을 활용한 맞춤형 답변 제공

증빙가능
수료증, 수강증, 학습진도

수강료
370,000원
185,000원

"5개월" 혜택!

수강 전 자주 묻는 질문

교재 없이? 초보자도 가능 한가요?

본 강의는 교재 없이도 동영상 강의만을 통해 충분히 학습할 수 있도록 구성되어 있습니다. 제공되는 실습 자료를 활용해 따라 하면서 학습하시면, 초보자도 이해하고 따라올 수 있게 설계된 강의입니다.

알지오의 강의특징은 무엇인가요?

저희 강의는 단순한 전문가 촬영본을 넘어섭니다. 전문 편집을 통해 필수 내용만을 선별하고, 불필요한 부분을 제거함으로써 학습 효율을 극대화합니다.

프론트엔드
초보자도
끝까지 쉽게 배울 수 있는 강의? 바로여기!

현업의 실무강의로 진행합니다!

코딩 개발자로 성공하기 위한 조건

(강사의 TIP)
배우는 건 기본적인 실습입니다.
정말 잘 하려면 기본을 확실히 해서 오직! 자신만이 구현할 수 있는
창의적인 포트폴리오를 제출해야합니다.
그러기 위해서는,
구글링을 통해서 공개된 여러 부분들을 직접 일일히 알아보고 실습해야 합니다.
자신있는건!! 그 기본이 되는 기본기를 더 이상 공부하지 않아도 되게 알려드립니다.

프론트엔드 개발자 인강 평생교육원 교육 안내
알지오 프론트엔드 개발자 [입문자용 총정리] 강좌에서는 15년 코딩 경력 실무 개발자가 생각하는 반드시 알아야 할 프론트엔드 과정을 기본부터 완벽하게 마스터 할 수 있게 설명합니다. 프론트엔드에서 가장 중요한 부분이 기초와 기본입니다. 구구단을 알아야 방정식, 미분, 적분을 배우듯이 기본 개념없이는 아무것도 할 수 없기 때문입니다. 그래서 가장 기본이 되는 HTML, CSS, Javascript, SCSS, VanillaJS 학과들을 집중적으로 강의합니다.

단기 습득!

2년 연속 IT교육 인강부분 1위 알지오 (근거자료)

2003년부터 운영해온 수많은 데이터베이스를 기반으로

단기 습득할 강의

로 제공합니다!
늦지 않았습니다. 알지오에서 지금부터 시작하세요!

01.13분 오리엔테이션
프론트엔드 백엔드 그리고 취업할 수 있게 무엇을 배워야 하는지 총정리합니다.

프론트엔드 기본기/웹사이트 로딩시 파싱되는 이론/프론트단 카테고리/취업을 대비하고 강의방식 알림
02.28분 프론트 엔드 개발자 목표 - 로딩 렌더링 최적화 해야하는 이유
브라우져가 사용자에게 어떻게 열리는지 우리가 무엇을 해야 하는지와 개발환경 실제 작업

네트웍 이후 우리가 해야할 일/프로세싱 DOM Content Loaded, LOAD/랜더링 dom cssom 레이아웃/빈화면 의 시간 ASYNC 사례분석 자바스크립 최적화 TIP/css내부 및 백엔드 뭐배워?/개발환경 알고 정의하기
HTML 총정리
03.27분 HTML 누구나 따라할 웹문서의 기본개념 1
엘리먼트 및 수월한 작업 누구나 아주 쉬운 총정리!

html 기본 쉽게, 정적 동적/문서 와 중요 요소들 한번에 쉽게알기/한번에 목록과 숫자 및 링크들 알아야 할 부분
04.32분 HTML 누구나 따라할 웹문서의 기본개념 2
웹페이지 구조를 먼저 알고 불필요한 부분과 미디어 서비스의 실제 경험설명

웹 페이지 구조/HTML 유효성 검사/검색엔진 브라우져가 좋아할 콘텐츠/이미미지 설정시 크롤링 될수 있는 사항/실제 반영시 실제 경험 TIP
05.38분 HTML 누구나 따라할 웹문서의 기본개념 3
객체 - 임베딩 기술 미디어 및 맵, 깃허브 공개된 반응형 웹페이지 분석 후 나만의 페이지로 실습 합니다.

유튜브 및 구글지도/반응형 페이지와 이미지 실제 페이지 분석 후 실습/css와 실제 페이지 분석하는 개발자 실제방법/좀더 진화된 방법으로 뷰포트 해상도별 이미지 다르게 처리
06.33분 HTML 누구나 따라할 웹문서의 기본개념 4
반드시 사용할 곳의 테이블구조 완벽히 마스터하고 CSS반영된 실습과 그외 요소들

일반적인 요소/CSS가 반영된 테이블/또 다른 테이블 요소들/일반적 태그들/정식 레이아웃 간단한 반응형웹
07.27분 HTML 누구나 따라할 웹문서의 기본개념 5
나머지 태그 확실히 총정리 합니다.

백엔드 전송할 태그들/전송방식 셀렉트/입력 태그들 총정리
CSS 현업 총정리
08.30분 CSS 시작과 동시에 전문적인 선언 1
실무자 직접! 기본 요소를 빠르게 실습하면서 실무에서 사용하는 방식으로 선언합니다.

몰랐던 링크/일반요소 스타일/공통 및 타겟 선언과 엘리먼트/실무자만 알 수 있는 선언방법
09.35분 CSS 시작과 동시에 전문적인 선언 2
실무자 직접! 기본 요소를 빠르게 실습하면서 실무에서 사용하는 방식으로 선언합니다.

일반구조 및 배경조절/회전과 배경이미지 기술/우선순위와 상속관계 알아야 효과적 선언
10.41분 CSS 시작과 동시에 전문적인 선언 3
일치하는 선택과 요소들을 설정해서 벨류값을 변경한 결과를 필요한 사항 모두 실습합니다.

class선언은 무조건 ok/가상요소 실제반영/부등호와 플러스 물결모양 선언/디스플레이와 박스관련/실제 강의자료 열고 보면서 실습
11.33분 무조건 반응형? 반응형 웹 한번에 해결
필요한 부분과 그렇지 않은 곳 구분하고 미디어 쿼리 확실한 개념 총정리

현직 실무자의 경험! 노하우 알림/브라우져 사이즈 완벽마스터/width max-width min-width 숨김까지 총정리/잘리지 않게와 페이지 분석실습
12.34분 레이아웃 총정리!
이 강의 하나로 핵심적인 기본기 완성 제작방법을 알려드립니다.

전체 box-sizing과 row:after 확인/깨지지않는 넓이와 미디어쿼리 간단한 반응형 웹/그리드 레이아웃 쉽게 마스터하기
SCSS 총정리
13.33분 설치부터 변수 모듈화까지 완벽정리
누구나 쉽게 접근하도록 SCSS의 기능을 아주 쉽게 설명합니다.

설치 및 css와 map컴파일과 자동반영/계층별 반영하고 쉽게 변수선언/모듈화 및 인쿠르드
14.44분 실제 사용되기 위한 실습 작업들
함수까지 누구나 쉽게 접근하도록 SCSS의 기능을 아주 쉽게 설명합니다.

변수 중 골라쓰기, 중첩선언의 트릭/함수사용과 기존변수 쉽게, 반응형웹 /SCSS의 개념알기 총정리 /쉬운 함수이해
쉽게 알려주는 JavaScript -> VanillaJS 순수스크립트
15.42분 완전 초보대상 쉽게 강의합니다.
클릭시 반응부터 팝업메세지와 연산자 완벽히 알기

호출과 반응 사용자 함수/내부 외부 위치 write alert log 객체/print 문자열과 넘버 변수 연산순서/상수와 연산자 종류 부울실습과 배열 튜플
16.39분 자바스크립트 중반으로 진행됩니다. 1
함수실무 객체와 개체 변수에서 함수 및 문자열 길이 계산 값과 유형을 비교하고 문자열의 여러종류 정규식까지 알게 됩니다.

함수호출 방법들 전역과 지역/객체 개체 함수실행 변수 내장함수 length/object 데이터 유형과 값 slice substring substr replace
17.34분 자바스크립트 중반으로 진행됩니다. 2
메소드와 문자열 모든 내용, HTML소스 단시간에 태그확장 및 숫자 및 문자열 끝내기

concat trim padStart padEnd charAt charCodeAt indexOf/search match 정규식 includes startsWith endsWith 문자열에 변수 보간/for 반복문 HTML 템플릿 넘버 한번에 이해 isNaN Infinity
18.45분 자바스크립트를 이제 알게되다.
배열의 모든것 ECMAScript

배열 추가와 엑세스 길이와 반복문 Array.forEach 사용자 함수/배열과 객체 새로운 배열과 확인 반환, 추가 삭제/배열의 병합 슬라이스 및 역순정렬 및 랜덤/줄바꿈 포이치 배열에 함수와 연산
19.39분 자바스크립트 실무로 할 수 있는 기초 마무리
메소드 종류별 알기 쉬운 실습과 조건문과 루프를 총정리합니다.

날짜 시간 총정리/랜덤 if else switch/유형별 for문 완성
20.37분 자바스크립트의 기본 총정리
do while 차이점 for와 if 지역 전역 자동 전역 명쾌하게 알려주는 클래스

한번을 돌아가게, 필요한 부분만 루프 Set map 변수사용/ES6 편한 방법 화살표 함수의 선언종류 this 키워드 함수/클래스
21.9분 뭐?! 지금 배운게 Vanilla JS 라고?
바닐라 자바스크립트의 실체 왜 사용해야 하는지 누가 사용 할 수 있는지 한방에 알려드립니다.
부트스트랩 완벽히 알기
22.28분 부트스트랩과 제이쿼리
자바스크립트 기본을 배웠으니 쉽게 습득가능

설치 말고 CDN/예제1선택/자동 반응형/스크립트에 의한 출력과 감춤/웹소켓과 개발자에게 반드시 필요한 사항
23.31분 테마e 페이지를 분석합니다.
기본 메뉴들부터 편리하게 표현하는 것과 슬라이드 롤링배너 실습

메뉴출력 확실히 이해하기/테마e 메뉴실습/버튼 테이블 기본사항/슬라이드메뉴 이해
24.26분 그리드 및 점보트론
모바일과 태블릿 데스크탑에 대한 반영을 클래스별 선언으로만 가능합니다.

그리드 모바일과 PC다중선언/점보트론 반영과 상단메뉴/상단소개 바/3단 그리드 배너
25.21분 좁은 점보트론 동적 네비게이션
기본소개된 사항을 기준으로 반응형과 토글메뉴 기능을 구체적으로 실습합니다.

container/header jumbotron/marketing footer/네비게이션/container navber-header 토글
26.30분 맞춤 콤포넌트
커버 캐러셀 자동 반응형되는 웹 반영 가능하도록 분석합니다.

필요한 소스반영/site-wrapper site-wrapper-inner cover-container/masthead clearfix masthead-brand/캐러셀 가져오기/토글되는 메뉴와 슬라이드 배너
27.23분 캐러셀 블로그
캐러셀 변경할 부분과 블로그형 분석

가로3단의 반응형/내 이미지로 svg사용변경/가로 2단의 500*500 이미지변경/블로그형의 분석하기
28.22분 대시보드
필요한 스타일과 js연결 후 변경할 부분과 모바일 부분 모두 분석

필요한 파일과 변경이미지/토글메뉴/좌메뉴와 숨김/중간메뉴 모바일변경/테이블 pc와 모바일
포트폴리오에 반영할 수 있는 수준올리기
29.33분 일반과정 종료 후 공개된 포트폴리오 실습 1
Freelancer 프리랜서 포트폴리오 실습

로그인창/일반 웹사이트/Freelancer반영 body/네비게이션/js 메뉴선택원리/로고와 배경변경
30.24분 공개된 포트폴리오 실습 2
Freelancer 프리랜서 포트폴리오 실습

네비와 버튼의 모든것/상단 원형 이미지바/6개의 배너와 오버시 아이콘/어바웃 관련 본문수정

강의목록 다운로드 1:1 강의 질문&답변

강좌설명

강의목록

수강생 리얼후기!

프론트엔드 개발자 [입문자용 총정리] 연관학과

강좌설명

강의목록

수강생 리얼후기!

연관학과 (프론트엔드 개발자 [입문자용 총정리])