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

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

수강기간
2개월

전문강사
알지오 R&D [IT]

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

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

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

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

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

단기 습득!

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

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

단기 습득할 강의

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

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

책갈피[00:00] 기본기 로딩시 파싱이론/[03:21] 프론트단 메인 과 랜딩/[05:50] 취업을 대비하고 강의방식 알림
02.28분 프론트 엔드 개발자 목표 - 로딩 렌더링 최적화 해야하는 이유
브라우져가 사용자에게 어떻게 열리는지 우리가 무엇을 해야 하는지와 개발환경 실제 작업

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

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

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

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

책갈피[00:00] 일반적인 요소/[06:34] CSS가 반영된 테이블/[12:37] 또 다른 테이블 요소들/[20:50] 일반적 태그들/[29:35] 정식 레이아웃 간단한 반응형웹
07.27분 HTML 누구나 따라할 웹문서의 기본개념 5
나머지 태그 확실히 총정리 합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

책갈피[00:00] container/[03:07] header jumbotron/[06:31] marketing footer/[09:31] 네비게이션/[12:02] container navber-header 토글
26.30분 맞춤 콤포넌트
커버 캐러셀 자동 반응형되는 웹 반영 가능하도록 분석합니다.

책갈피[00:00] 필요한 소스반영/[03:52] site-wrapper site-wrapper-inner cover-container/[06:13] masthead clearfix masthead-brand/[12:10] 캐러셀 가져오기/[16:46] 토글되는 메뉴와 슬라이드 배너
27.23분 캐러셀 블로그
캐러셀 변경할 부분과 블로그형 분석

책갈피[00:00] 가로3단의 반응형/[04:09] 내 이미지로 svg사용변경/[06:53] 가로 2단의 500*500 이미지변경/[15:03] 블로그형의 분석하기
28.22분 대시보드
필요한 스타일과 js연결 후 변경할 부분과 모바일 부분 모두 분석

책갈피[00:00] 필요한 파일과 변경이미지/[05:11] 토글메뉴/[12:02] 좌메뉴와 숨김/[16:52] 중간메뉴 모바일변경/[20:32] 테이블 pc와 모바일
포트폴리오에 반영할 수 있는 수준올리기
29.33분 일반과정 종료 후 공개된 포트폴리오 실습 1
Freelancer 프리랜서 포트폴리오 실습

책갈피[00:00] 로그인창/[02:56] 일반 웹사이트/[11:08] Freelancer반영 body/[15:06] 네비게이션/[00:00] js 메뉴선택원리/[25:52] 로고와 배경변경
30.24분 공개된 포트폴리오 실습 2
Freelancer 프리랜서 포트폴리오 실습

책갈피[00:00] 네비와 버튼의 모든것/[10:40] 상단 원형 이미지바/[15:04] 6개의 배너와 오버시 아이콘/[21:09] 어바웃 관련 본문수정

강의목록 다운로드

Since 2003 IT전문교육!

강좌설명

강의목록

수강생 리얼후기!

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

강좌설명

강의목록

수강생 리얼후기!

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