HTML+CSS+JQUERY 초중급 퍼블리싱으로 다양한 실전 예제 학습을 통해 퍼블리싱 중급 실력을 위한 퍼블리싱 기본기를 익히시게 됩니다. 특히, 다양한 실전 예제를 통해 충분한 설명과 실전 작업으로 경험하고 퍼블리싱에 자신감을 생깁니다. 41시간이 넘는 충분한 학습량을 제공하는 퍼블리싱 수업입니다. (코딩웍스 유튜브 퍼블리싱 채널에 CSS 중급이론 학습을 병행하시면 더욱 효과적입니다.)
HTML+CSS+JQUERY 핵심이론으로 퍼블리싱 기본기 향상
웹사이트 퍼블리싱 실력과 노하우 향상
블럭요소와 인라인요소에 대한 정확한 개념과 활용
position 속성에 대한 정확한 개념과 활용
hover before after checked active 가상클래스에 대한 이해와 활용
텍스트에디터 Brackets와 Emmet 사용법
텍스트에디터 Visual Studio Code와 Emmet 사용법
Flex 활용과 Transform 속성 개념과 활용
인접선택자,속성선택자,checked 가상클래스 이해와 활용
다양한 마우스 호버 이펙트
폰트어썸 이해하고 활용하기
CSS 탭 메뉴 콘텐츠, JQUERY 탭 메뉴 콘텐츠 제작 능력
자바스크립트(JavaScript) 변수(var)와 조건문(if) 이해와 활용
제이쿼리 플러그인 사용해서 역동적이고 화려하게 꾸미는 퍼블리싱은 진짜 퍼블리싱이 아닙니다.
진짜 퍼블리싱 실력은 HTML로 레이아웃 설계를 꼼꼼히 잘하고, CSS로 배치와 상세 디자인하고, 직접 작성한 제이쿼리(JQUERY)로 상호작용까지 만들 수 있는 것이 진짜 퍼블리싱 실력입니다.
당장의 화려함에 제이쿼리 플러그인 사용에 의존하고 기본기 학습을 충실히 하지 않으면 웹 퍼블리셔로 취업하기 쉽지 않습니다. 설령 취업해서 실무에서 일하게 되더라도 퍼블리셔로서 어려운 하루 하루가 될 가능성이 높습니다.
코드 한줄 한줄 직접 코딩하는 곧, 하드 코딩할 수 있는게 진짜 퍼블리싱 실력입니다.
1. 퍼블리싱! 너무 겁먹지 마세요. 자신감 갖고 시작하세요. 시작이 반입니다.
2. 퍼블리싱! 궤도에 오르는 게 쉽다고 말할 수는 없지만, 반드시 보상으로 돌아옵니다.
3. 퍼블리셔 취업을 위해 HTML+CSS+JQUERY 하드코딩 기본기가 중요합니다.
HTML+CSS+JQUERY 퍼블리싱을 시작하시는 분들께 드리고 싶은 말씀이 있습니다.
볼만한 웹사이트를 하드코딩으로 혼자서 잘 만드는 퍼블리싱 실력을 갖추는 건 쉬운 일은 아닙니다. 정확히는 어렵습니다.
알아야 할 이론도 많고 이론을 바탕으로 실전 제작해본 경험도 충분해야 합니다. 그리고 포토샵 UI 디자인 실력도 어느 정도 갖추고 있어야 합니다. 그러면 비로소 볼만한 웹사이트를 혼자서 잘 만드는 실력자가 될 수 있습니다.
다만, 위에서 말씀드린 충실한 이론 학습과 이론을 활용한 예제 제작을 통해 실력이 확장되지 않은 상태에서 '포트폴리오 웹사이트 제작 따라하기'를 하시면 안 됩니다.
물론 부지런히 따라 하면 '남의 것을 복사한 클론(clone) 포트폴리오'라는 결과물은 나오겠지만, 진짜 실력으로 이어지지 않습니다.
여러분이 웹 퍼블리셔 취업을 위해 또는 디자이너가 웹 퍼블리싱 능력을 갖춰서 경쟁력을 갖기 위해서는 반드시 개인 포트폴리오 웹사이트가 필요합니다. 앞서 말씀드린 충실한 이론학습과 실전 제작 경험을 갖추지 않고 따라 하기만으로 개인 홈페이지를 만들더라도, 하드코딩 실력이 받쳐주지 않으면 취업하셨더라도 실무에서 금세 부족한 기본기가 티가 납니다.
개인 포트폴리오 웹사이트 제작 전에 충분한 이론학습과 이론을 활용한 여러 퍼블리싱 예제 제작 경험을 쌓기 바랍니다.
제가 생각하는 '퍼블리싱 실력 키우기' 방법은...
실전 퍼블리싱 예제 제작할 때 처음에 어떻게 만드는지 부담없이 시청만 하시고, 두번째는 보면서 따라하면서 만드시고, 세번째는 안보고 스스로 하시다가 정말 생각 안날 때 영상 참고하셔서 제작하세요. 그래야만 진짜 자신의 실력으로 남습니다.
※ 퍼블리싱 실전예제 제작 공부하실 때 추천 학습방법(1회차에서 4회차 학습 및 결고물 만들기)
Q. 예제 제작하면서 나오는 중급 CSS 이론 설명 영상이 있나요?
A. '예제 제작하는데 기초이론에 나오지 않은 중급이론이 많이 나오는데 중급 이론 수업은 어디서 듣나요?' 이런 질문이 게시판에 자주 올라옵니다.
지금 과정은 초급 퍼블리싱 예제 제작을 하는 과정은 아닙니다. 초급~중급 퍼블리싱 예제를 제작하는 과정입니다. 그래서 CSS 초중급 이론은 어느 정도 알고 있으셔야 합니다. 그렇다고 꼭 잘 아실 필요는 없습니다. CSS 초중급 이론은 예제를 제작하면서 지속적으로 반복합니다. 그리고 코딩웍스 유튜브 퍼블리싱 채널에 [중급이론] CSS 중급이론 이라는 재생 목록에 예제 제작에 필요한 필수 중급 이론 영상이 자세히 있으니, 지금 과정을 들으시면서 중급 이론을 병행하시면 좋습니다.
Q. 이 과정 수강하면 실무에서 퍼블리셔로 일할 수 있을까요?
A. 이 과정에 있는 퍼블리싱 내용을 모두 이해하고 잘 활용할 수 있다면 가능합니다. 하지만 퍼블리싱이라는게 충분한 경험이 있어야 실무에서 일할 수 있습니다. 지금 과정과 같은 것들을 몇개 더 공부하시고 전체 웹사이트 제작 과정을 몇개 공부하시면 될 거라 생각됩니다. 물론 개인 포트폴리오 홈페이지 제작도 하셔야 됩니다. 퍼블리싱이 진입장벽이 생각보다 높은 편입니다. 영상 한번 보신다고 그 안에 내용과 노하우가 모두 학생에게 전해지는건 아니기 때문에 위에 설명한 학습방법을 통해서 내 것으로 만드는 과정을 하시기 바랍니다.
Q. 실전 예제 제작하면서 이론 파트에 설명이 안된 부분이 있는데요?
A. 입문 초급을 위한 기본 이론 영상을 올려놓은 것은 혹시 부족하다고 생각하시는 이론이 있으면 참고하라는 의미로 올린 영상들입니다. 실전 예제 제작 영상에서 이론 파트에 없는 내용이 나오는데 이론 파트에 없는 내용이 예제 제작에서 왜 나오냐고 질문글을 올리시면 제가 답변 드리기가 곤란합니다.
Q. 공부하다가 모르는게 있으면 질문은 어디에 하나요?
A. 질문이 있으시면 [질문&답변] 게시판에 글을 남기시면 바로는 아니어도 확인되면 답변을 드립니다. 그리고 질문은 최대한 구체적으로 해주세요. 질문이 구체적이지 않았을 때 충분한 답변이 좀처럼 쉽지 않습니다. 그래서 질문하실 때는 궁금하신 내용과 함께 작성 중이신 HTML, CSS, JQUERY 코딩 화면 캡처해서 첨부해 주시면 답변드리기가 훨씬 수월합니다.
Q. 반응형 웹사이트 제작 강의가 있던데 어떤 것을 먼저 들어야 하나요?
A. 반응형 웹사이트 전체를 제작하는 과정을 듣기 전에 지금 과정에서 충분히 이론과 실전 예제 제작에 대한 실력을 높이시고 반응형 웹사이트 전체 제작 과정으로 오시는 것을 추천드립니다. 반응형 웹사이트 전체 제작 과정이라 지금 과정처럼 부분 부분 상세하게 다루기가 어렵기 때문에 실전 퍼블리싱 과정에서 충분히 훈련되고 웹사이트 전체 제작과정으로 오시면 이해도가 훨씬 높을거라 생각됩니다.
Q. 강사님 수업 중에 퍼블리셔 취업 진짜 실전 가이드를 먼저 보면 좋을까요?
A. 퍼블리싱 스킬를 더 익히는 것도 중요하지만 먼저 퍼블리셔로서 기본기를 갖추는 것이 우선되어야 합니다. 퍼블리셔 취업 실전가이드 전자책(PDF)에서는 퍼블리싱 기본기란 바람직한 코딩습관과 원칙, 경력자 처럼 퍼블리싱 하기 등 퍼블리셔로서 반드시 알아야 하는 내용을 꼼꼼히 정리했습니다. 퍼블리셔 취업 실전가이드 전자책(PDF)을 먼저 보시고 퍼블리싱 기본기에 대한 이해도를 충분히 갖고 학습하시기를 권해드립니다. 아래 이미지를 클릭하시면 수업 소개 내용을 보실 수 있습니다.
[업데이트 안내, 학습방법 안내] HTML+CSS+JQUERY 포트폴리오 퍼블리싱 필수 이론 및 실전 예제 제작 강좌
코딩웍스, HTML+CSS+JQUERY 포트폴리오 퍼블리싱 필수 이론 및 실전 예제 제작 강좌를 수강해주셔 감사드립니다. 그리고 앞으로 수강하실 많은 분들께도 미리 감사드립니다..^^
본 강좌는 당분간 지속적으로 업데이트가 있을 예정입니다. 업데이트가 있으면 '인프런 새소식'을 통해 알림을 드립니다. 최종 업데이트 전까지 기존에 있는 이론과 실전 퍼블리싱을 잘 따라오시면 서 제작하시기 바랍니다.^^
실전 예제 제작에 꼭 필요한 이론 뿐만 아니라 퍼블리싱 Skill Up을 위해 필요한 핵심이론과 팁을 지속적으로 업데이트합니다. Skill Up을 위해 필요한 핵심이론과 팁 영상이 업데이트가 있으면 새소식을 통해서 알려드립니다.
Skill Up을 위해 필요한 핵심이론과 팁 영상은 섹션 7에 순차적으로 업데이트됩니다. 새소식을 받지 못하셨더라도 섹션 7에 오셔서 학습이 필요한 영상이 있는지 체크해주시기 바랍니다. 화이팅~^^
※ Jump Up 퍼블리싱 이론과 팁 영상에서 공부하시는 학습 예제 완성본은 해당 영상의 우측 상단에 수업자료를 누르시면 zip파일을 받으실 수 있습니다.
로그인 UI 디자인 실전 웹페이지 퍼블리싱 영상이 업데이트 되었습니다. 이번에 업데이트된 강의 영상은 섹션 7에 총 4개 파트로 되어 있습니다. 다운로드할 수 있도록 완성본도 업로드 되었습니다. 연습하실 때 완성본을 다운로드 하시고 index.html과 style.css를 삭제하시고 영상 처음부터 천천히 따라오시면 됩니다.
로그인 UI 디자인 퍼블리싱은 제이쿼리 상호작용은 없는 정적인 퍼블리싱이지만 CSS의 핵심 속성인 박스모델, 보더, 백그라운드 이미지, 색상, checkbox와 label 사용하기 등 전반에 걸친 모든 CSS 속성을 공부하시기에는 최적의 예제라고 생각됩니다.
▼ Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토타입)
▼ Pure CSS 콘텐츠 슬라이더 프로토타입 02 (풀스크린 탭 콘텐츠 슬라이더 응용)
▼ 탭 메뉴 콘텐츠 퍼블리싱 with JQUERY (스타일 01) (완료)
▼ 퍼블리셔라로서 꼭! 알아야 하는 자바스크립트, 변수(var)와 조건문(if) - 20세 성인 체크 (완료)
▼ 자바스크립트 변수와 조건문을 이용한 별점 주기 실전 퍼블리싱 with jQuery (완료)
▼ 비주얼 스튜디오 코드(Visual Studio Code)와 Emmet 사용법 (완료)
▼ 탭 메뉴 콘텐츠 퍼블리싱(스타일 02) with jQuery (완료)
▼ 마우스 올리면 배경이미지 변경되는 퍼블리싱 프로토타입 with jQuery (완료)
▼ 쇼핑몰 아이템 UI 호버 이펙트 with jQuery (완료)
▼ 코딩웍스 강의특징 어코디언 콘텐츠 슬라이드 with jQuery (완료)
▼ 제이쿼리 반응형 애니메이션 모달(Modal)
▼ 01. CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)
▼ 02. CSS 키프레임 애니메이션 활용한 실전 예제 제작 02(사각형 좌표 변경 로딩 애니메이션)
▼ 03. CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)
▼ 04. 가상클래스 hover 활용한 실전 퍼블리싱 01(오버하면 상세설명 나타나는 상품목록)
▼ 05. 가상클래스 hover 활용한 실전 퍼블리싱 02(마우스 오버되면 나타나는 툴팁 만들기)
▼ 06. 가상클래스 hover 활용한 실전 퍼블리싱 03(오버한 메뉴 외 나머지 흐려지는 네비게이션)
▼ 07. 가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션 이펙트)
▼ 08. 가상클래스 hover 활용한 실전 퍼블리싱 05(앱 UI 레이어 3D 호버 에니메이션)
▼ 09. 가상클래스 before after 활용한 실전 퍼블리싱 01(before after 기본 사용법)
▼ 10. 가상클래스 before after 활용한 실전 퍼블리싱 02(애니메이션 호버 네비게이션 이펙트)
▼ 11. 가상클래스 before after 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)
▼ 12. 가상클래스 before after 활용한 실전 퍼블리싱 04(content attr을 활용한 텍스트 네비게이션)
▼ 13. 입력 필드 디자인을 꾸미는 가상클래스 활용한 실전 퍼블리싱(폰트어썸 사용한 입력 필드)
▼ 14~15. 순서 체크 가상클래스 활용한 실전 퍼블리싱 01(애니메이션 스킬 프로그래스, delay)
▼ 16. 순서 체크 가상클래스 활용한 실전 퍼블리싱 03(Flexbox 활용한 갤러리 이미지 어코디언 네비게이션)
▼ 17. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 01(애니메이션 햄버거 버튼 만들기)
▼ 18. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 02(애니메이션 사이드메뉴 만들기)
▼ 19. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 03(탭 메뉴 콘텐츠 만들기)
▼ 20. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(탭 콘텐츠 - Opacity)
▼ 21. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 05(탭 콘텐츠 – Opacity 응용)
▼ 22. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide)
▼ 23. 확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(Testimonial 탭 슬라이더)
▼ 어코디언(Accordion)with jQuery
▼ 모달(Modal) with jQuery & :target
학습 전 CSS 필수이론 및 CSS 중급이론 먼저 학습이 필요합니다.
해당 강좌는 예제를 중심으로 학습하는 과정입니다. CSS 필수이론 및 CSS 중급이론 먼저 학습이 필요합니다. 그렇기 때문에 최소한 CSS 필수이론은 알고 예제 제작 학습을 하셔야 합니다. 예제를 계속 학습하시면 예제의 난이도가 지속적으로 올라갑니다. 그래서 모르는 이론이 계속 늘어나기 때문에 부담스러울 수 있습니다.
너무 기초적인 질문을 하시게 되면 앞으로 정말 많은 질문글을 올리시게 됩니다. 답변하는 사람으로서도 구글에서 검색하면 어렵지 않게 알 수 있는 내용을 질문하시면 답변 드릴 때도 흥이 나지 않습니다.
기초적인 질문을 하지 마시라는 말이 아닙니다. 저도 독학했지만 독학하는거 어려운 일입니다. 막힐 때 물어볼 사람도 없고 답답하죠. 하지만 막히고 궁금한 점이 있으면 먼저 구글링해서 알아보세요. 한국인 블로거가 잘 설명해 놓은 내용이 정말 많습니다. 검색해서 공부했는데 궁금한 내용이 풀리지 않는 부분을 질문하시면 언제라도 제가 알고 있는 선에서 자세히 말씀드릴거에요.
앞으로 실력 향상을 위해서 퍼블리싱 학습하시면서 정말 많은 것들을 알아가야 합니다.
스스로 알아가는 과정에서 실력이 많이 늘게 됩니다. 하지만 스스로 찾아보고 이해하려해도 어려운 부분이 있을 수 있습니다. 그런 부분을 제가 도와드리겠습니다. 그리고 해당 강좌의 예제 제작에서 나온 코드의 내용에 관한 궁금한 내용은 질문하셔도 됩니다.
혹시나해서 첨언하자면 지금 예제를 하시기 보다는 코딩웍스 유튜브 채널에서 CSS 필수이론 및 중급 이론을 먼저 학습하시고 예제를 하시기를 추천드립니다.
🌏 코딩웍스 유튜브 채널 재생목록 - CSS 필수이론
https://www.youtube.com/watch?v=-1_e38zLCXw&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99
🌏 코딩웍스 유튜브 채널 재생목록 - CSS 중급이론
https://www.youtube.com/watch?v=PLrDCRrXdRk&list=PLv_UUi9AVBVvr9gODWpz6aZUS6VNvdsYq
참고로 코딩웍스 강의 중에 [중상급 퍼블리싱을 위한 CSS3의 모든 것]이라는 강의가 있습니다. 해당 강의를 들으시면 완벽한 CSS 이론을 갖추실 수 있습니다. 이후 다른 예제 제작 및 웹사이트 제작 과정으로 오시면 학습 내용의 거의 대부분을 이해하시면서 학습하실 수 있기 때문에 학습 효율이 굉장히 좋을거라 생각됩니다.
▲ 국비지원 퍼블리싱 과정 저한테 4개월 반 정도 배운 학생인데, 취업했다고 카톡이 왔습니다.
▲ 코딩웍스 개인 포트폴리오 제작 오프라인 강의 수강생 면접 취업 결과 카톡을 받았습니다.(2023.4.24)
선생님 안녕하세요 :)
선생님 인프런 강의 듣던 학생 김O정입니다.
이번 여름 개인포트폴리오 관련해서 조언 얻고자 이메일 보냈던 학생입니다.
기억나실련지요?ㅎㅎ
다름이 아니라,
선생님께 조언 얻었던 포트폴리오로 퍼블리셔 취업 성공했다는 소식을 전하고자 메일 보내요!
심지어!!
사람인에 올려둔 포트폴리오를 보고 회사쪽에서 먼저 연락이 왔고, 줌으로 면접을 보고 합격했습니다!
회사쪽에선 희망연봉을 맞춰줬고 디자인, 개발 업무를 하지 않는 정말 퍼블리셔! 업무만 할 수 있는 회사에 들어오게 되었습니다.
경력직 퍼블리셔를 구하는 회사였는데, 신입인 저에게 연락이 와서 왜 저에게 연락을 주셨냐고 물어보니
다른 사람들 포트폴리오도 엄청 많이 봤는데, 제 포트폴리오에서 본 "기능정의서"가 눈에 띄어서 연락을 주셨다고합니다
이게 다 선생님의 강의 덕분이라고 생각합니다.
선생님 강의를 듣지않았다면 저 역시 그냥 평범한 포트폴리오가 되었을텐데 선생님께서 말씀해주신 꿀팁들로 취업에 성공 할 수 있었습니다!
비록 실제로 뵌적은 없지만,
포트폴리오를 만드는 내내 선생님 강의 보면서 엄청 의지하고 믿고 열심히 만들었습니다!
학원에서 긴 시간 수업을 들으면서 쌓았던 실력보다 선생님 강의를 듣고 포트폴리오를 만든 3달동안 실력이 엄청 상승했다는게 느껴집니다
간절히 원했고,
선생님이 말씀해주신대로 믿고 했더니 정말 좋은 결과가 나왔습니다.
정말 감사드립니다!
코로나 조심하시구요
또 좋은 강의로 만나고싶습니다 :)
감사 인사 전해드리려구요 ㅎㅎ
지금까지 선생님 강의 수강하고 2주 정도 이력서 내보면서 고생 좀 했는데요..
회사 한 곳 면접 합격하여 출근하기로 했습니다.. 정말 감사드립니다..ㅠㅠ
사실 제가 나이가 32살이라 걱정이 많았습니다 이력서를 많이 넣었는데 연락도 잘 안오고..
근데 이 회사 인사담당자가 본인은 학원 출신은 안좋아한다고 하더라구요 ㅎㅎ
제가 입사하기로 한 회사는 작지만 개발자도 있고 웹디자이너도 있습니다.
3개월동안 교육시키고 실무에 투입하는 식이더라구요.
거리도 좀 있고 연봉도 낮긴하지만.. 열심히 배워서 연봉을 올려보려구요~ ㅎㅎ
그 동안 정말 감사했습니다. 질문 답변도 잘해주시고 이렇게 온라인으로 강의를 들어서 취업이 되니까 너무 신기하네요..
앞으로도 선생님 강의 들으면서 실력 더 키우면서 공부하겠습니다. 화이팅~!
학습하시면서 궁금하신 사항이 있으시면 질문해주세요. 질문 주실 때는 안되는 내용과 코드 그리고 브라우저 결과 화면 캡쳐를 올려주셔야 합니다. 코드의 경우 HTML, CSS, JS 코드 모두 올려주셔야 정확한 답변을 드릴 수 있습니다.
질문글에 코드 없이 글로만 문제를 설명하시면 정말 간단한게 아니라면 정확한 답변을 드리기 어렵습니다. 그럼 제가 'HTML, CSS, JS 코드와 브라우저 캡쳐를 올려주세요~' 라고 다시 답변을 달 수 밖에 없고 결국 해결책을 얻는데 번거롭고 시간이 더 걸립니다.
코딩웍스 퍼블리싱 유튜브 채널에서 이론 영상 강의와 병행하시기 바랍니다. 물론 모든 이론 영상이 유튜브 채널에 있는건 아니지만 중요한 이론 영상은 거의 다 있습니다. 영상이 많으니까 영상을 찾는 방법은 아래 예시처럼 검색하시는게 좋습니다.
코딩웍스 퍼블리싱 유튜브 채널 : https://www.youtube.com/codingworks
※ 기본적인 퍼블리싱 이론을 알고 있으면 실전 퍼블리싱 제작을 학습하셔도 됩니다.
※ 실전 퍼블리싱 제작 학습하다가 필요할 때 필수 이론을 참고하시면 됩니다.
섹션 0. [미리보기] HTML+CSS 실전 퍼블리싱 예제 완성본 미리보기
섹션 1. 블라켓츠(Brackets) 및 비주얼 스튜디오 코드(Visual Studio Code) 사용법
섹션 2. 섹션01. HTML+CSS+JQUERY 퍼블리싱 필수 이론
섹션 3. HTML+CSS+JQUERY 실전 퍼블리싱 제작
섹션 4. HTML+CSS 실전 퍼블리싱 제작 with JQUERY
섹션 5. 비디오 백그라운드를 활용한 랜딩페이지 실전 퍼블리싱 with jQuery
섹션 6. 실전 웹페이지 퍼블리싱 - 로그인 화면 UI 디자인
섹션 7. 중고급 레벨 Jump Up 퍼블리싱 이론과 팁(Tip)
섹션 8. [다운로드] 예제 제작에 사용된 소스파일 및 완성본
면접과 취업을 부르는 퍼블리셔 개인 포트폴리오 홈페이지 제작, scss, sass, flex, grid, html, css, html/css, website, 웹 퍼블리셔, 퍼블리셔 취업, 웹사이트, 코딩, coding, jquery, javascript, 제이쿼리, 자바스크립트, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오, 퍼블리싱, 반응형 웹, 웹디자인기능사 실기시험, bootstrap, 부트스트랩, css frameworks, 프레임워크
학습 대상은
누구일까요?
웹 코딩을 처음 시작하시는 분
웹사이트 유지보수 수정보완을 자체적으로 하고자 하시는 분
웹디자인에서 웹퍼블리셔로 직업을 전환하거나 HTML+CSS+JQUERY 퍼블리싱 강화하려는 분
웹 퍼블리싱에 대한 이해도를 높이고 싶은 웹 기획자
프론트엔드 퍼블리싱에 대한 이해도를 높이고 싶은 개발자
웹디자인 기능사 실기시험을 준비하시는 분
선수 지식,
필요할까요?
기본적인 컴퓨터 활용능력과 인터넷 브라우저 사용능력
코딩(Coding)을 위한 기본적인 영어타자 능력
12,338
명
수강생
721
개
수강평
2,092
개
답변
4.9
점
강의 평점
23
개
강의
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
전체
142개 ∙ (41시간 42분)
해당 강의에서 제공:
전체
167개
4.9
167개의 수강평
수강평 2
∙
평균 평점 5.0
5
냉정하게 말해드립니다. 모학원 150만원내고 6개월 듣느니 이 강의 5만원내고 그냥 하루2시간씩 1달만 꾹꾹 참고 들어보세요. (2회독추천) 따분한 이론같은거 없이 진짜 알맹이,핵심만 알려줍니다. (F모 온라인강의에서 첫강의에 HTML 역사하는거보고 1초컷 환불함) 보통 온라인 강의하시다 강사분들이 실수하시는게 처음에 천천히하다가 뒤에 실전파트 어려운거나오면 설명하기 귀찮은건지, 페이스가 신나서 빨라지시는건지 모르겠지만 설명하지도 않은 코드쓰면서 속도는 4배속으로 빨라지는데 여기는 처음 페이스 그대로 초심자 맞춰서 끝까지 가줍니다. 난이도? 솔직히 중학교이상 졸업했는데 이 강의가 어려우면 퍼블리싱은 이번생에 인연이 아닌걸로 생각하셔도 될 정도로 친절하고 쉽습니다. 참고로 저는 문과에 C#만알고 HTML,CSS이라는 단어자체가 처음이였습니다. 바라는점 ? 1. 원페이지라도 웹페이지 하나 전체를 퍼블리싱하는 실무가 있었으면 좋겠습니다. (쇼핑몰처럼이라던지) 2. HTML,CSS 레이아웃을 보통 하나하나 만들기보다 어디선가 퍼오던데 그런꿀팁장소도 공유해주시면 감사하겠습니다. (설령 추가결제 강의로 나오더라도 구매의사있음)
안녕하세요. 코딩웍스입니다. 부족한 강의에 너무 과찬을 해주셔서 부끄럽습니다. 제가 지금 학원에서 강의를 하고 있지만 저의 철칙은 '모르는 코드 사용하고 학생들에게 외우세요' 라고 말하는건 절대 하지 않습니다. 모르는 코드를 쓰면서 결과를 내는건 결코 바람직하지 않다고 생각합니다. 저도 모르는게 많아서 학생들에게 이해시키려고 쉬운 방식을 항상 고민하고 있습니다. 지금 강의 들으시는 '실전 퍼블리싱 예제 제작 과정'에 이어서 말씀하신 원페이지로 반응형 웹사이트 전체 제작과정을 처음부터 끝까지 함께 만드는 강의는 레코딩 중 입니다. 웹사이트 전체를 퍼블리싱하는 강의이다 보니까 영상 제작 시간이 꽤 걸리더라구요. 원래 이거 먼저 오픈하려했는데 늦어지는 바람에 실전 퍼블리싱 강좌 먼저 오픈했습니다. 아시겠지만 퍼블리싱 중에서 가장 어려운 파트가 웹사이트 전체 레이아웃을 위한 HTML 와이어프레임 설계가 제일 중요한데 제가 특히 웹사이트 전체를 퍼블리싱하는 과정을 강의하는걸 잘하는 편이거든요. 열심히 준비하고 있으니 조금만 기다려주세요. 힘든 시기지만 퍼블리싱 열심히 공부하시는 만큼 반드시 충분한 보상으로 돌아갈거라 확신합니다. 좋은 후기 다시 한번 감사드립니다.^^
수강평 13
∙
평균 평점 5.0
5
신입 퍼블리셔로 회사에 다니면서 정말 막막하고 잘 몰랐던 부분을 해소 시켜주기 딱 좋은 강의였던 것 같습니다. 우선 무엇보다 이해가 너무너무 잘 됩니다. 코딩웍스님 강의는 대체적으로 눈높이에 맞는 그리고 실무경험이 풍부하신 덕에 회사에서 도움이 될 만한 부분들이 정말 많았습니다. 강의도 무제한이니 까먹고 헷갈릴때마다 찾아서 볼 수 있어서 너무 좋구요, 다른 강의도 들어 볼 예정입니다. 정말 감사합니다 :)
좋은 말씀 감사드립니다~^^
수강평 4
∙
평균 평점 5.0
5
현재 코딩웍스 열공중인 프론트엔드 개발자 지망생입니다. HTML,CSS를 다른 책이나 강의로 한번봤지만 제대로 된 화면 하나 만드는게 많이 어려웠었습니다. 정말 우연히도 유튜브 알고리즘에 의해 코딩웍스 강의를 두개쯤 본 후 바로 결제했습니다. 이 강의 듣기전에는 분명히 강의도 보고 책도 봤는데 마크업이 낯설어 하기 힘들었지만 지금은 오늘 할 분량의 예제를 미리 실행시켜보고 구현하는 재미에 빠져있습니다. 리액트 공부해야되는데 마크업 작업을 더 열심히 공부하는 중이네요 ㅎㅎㅎ 저의 경우는 제이쿼리보다는 바닐라 자바스크립트로 DOM 제어를 하는게 편해 제이쿼리 강의는 듣진 않았지만 코딩 입문자 분들은 제이쿼리로 동적인 화면 만드는 것을 한번 경험해보시면 좋을거 같습니다. 현재 중급자 CSS 강의까지 같이 샀고 시즌1 어느정도 진행되면 같이 들을 예정입니다. 일단 1월말까지 시즌2와 중급자 CSS이론 완강을 목표로하고 있습니다. 이런 강의 만들어주셔서 감사합니다.
구체적인 수강평이라 예비 수강생들에게 좋은 참고가 될 것 같습니다. 재밌게 공부하시고 궁금하신 내용 있으시면 질문주세요~!!
수강평 1
∙
평균 평점 5.0
5
다른 강의도 듣고 있는데 수강평 쓸수있는 있는 강의를 못찾아서 여기 씁니다! 정말 정말 퍼블리싱 강의로 강추 드려요! 선생님 강의로 공부해서신입 퍼블리셔로 취업하고 어느덧 1년차가 되었어요! 이 강의로 실제 포트폴리오작업하고 면접까지 봤던 때가 생각이 납니다!! 작업하다가 궁금한 부분은 지금도 틈틈히 신청해놨던 강의들 찾아보고, 업데이트 올라온 강의 있으면 또 찾아보고 선생님 유튜브도 찾아보고 있어요 기초부터 탄탄하게 정말 쉽게 가르쳐 주셔서 잘 믿고 따라가시면 됩니다 ! 선생님 정말 감사하다는 인사드리고싶어서 수강평 남겨요! ㅠㅠ 앞으로도 꾸준히 강의 많이 해주셨음 좋겠습니다 !! 지금은 연봉 협상을 앞두고 있는데 flex, grid, scss 등 안가르쳐주신 게 없어서 저의 자신감의 근본이 되어주시는 선생님 입니다.. ㅠㅠ 제가 습득이 느린 편이라 여러모로 부족한게 많지만 더 열심히 할 마음으로 잘 배우겠습니다 연봉 올라갈 수 있게 응원해주세요!! ㅎㅎ 감사합니다 선생님
강의에 대한 훌륭한 수강평 감사드립니다~^^
수강평 7
∙
평균 평점 5.0
5
최고의강의입니다 이거 듣고 독학으로 취업해서 2년차입니다 ㅎㅎ
늦은 수강평이지만 이런 수강평 보고 다른 수강생들이 힘 낼 수 있을 것 같습니다. 감사합니다~!!
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!
₩46,200
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?w=420)
![[2024]리베하얀의 HTML 기초 실무강의 썸네일](https://cdn.inflearn.com/public/courses/334082/cover/faaaa70e-cae8-4488-afb0-5a2d4e7c0905/334082.png?w=420)
