Home » 클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript | css 예제 사이트

클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript | css 예제 사이트

by Hanh Nguyen

클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript


นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูความรู้เพิ่มเติมที่นี่

유튜브 사이트를 반응형으로 만들어 볼꺼예요. 순수 HTML, CSS를 이용해서 (Javascript 약간) 만들어 보고, 다음에 Javascript를 배우면 동적으로 서버에서 데이터를 가져오는 연습을 더 해보도록 할께요. (↙ 자세한 내용)
___________________________
📚 전체적인 반응형 포트폴리오 웹사이트를 완성해서 배포까지 하고 싶다면:
https://academy.dreamcoding.com/courses/portfolio
💡 풀스택 개발 로드맵 ⇢ https://academy.dreamcoding.com/pages/912e50
🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
http://academy.dreamcoding.com/
……………………………………………..
⭐️ Font Awesome Icons
(죄송, 태그는 여기 정보란에 입력이 금지되어져있어요)
fab fayoutube
fas fasearch
fas faellipsisv
fas facaretdown
fas fathumbsup
fas fathumbsdown
fas fashare
fas faplus
fab fafontawesomeflag
⭐️ Useful Sites
MDN Html Elements Reference:
https://developer.mozilla.org/enUS/docs/Web/HTML/Element
Color Tool:
https://material.io/resources/color
Font Awesome:
https://fontawesome.com/start
Google Fonts:
https://fonts.google.com/
……………………………………………..
☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 🙂
❝Don’t forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️
……………………………………………..
☀️ 연락
채널 문의 ⇢ ellie@dreamcoding.com
아카데미 문의 ⇢ info@dreamcoding.com
……………………………………………..

READ  당신의 하드디스크가 열리지 않을 때, 해결방법은?..(RAW 파티션) | usb 디스크를 넣으십시오

🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y
📒 자바스크립트 기초 강의 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h2
💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
https://www.youtube.com/playlist?list=PLv2d7VI9OotSn1ThdDeqvBx8QuRSd01qv
💰 개발자 경력 관리 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotSyQ6RPdytiHID5Cmnv_sA3
📄 이력서 작성 방법
https://www.youtube.com/playlist?list=PLv2d7VI9OotTZfvF0s8Vs0gpRtodlTsgg
📈 IT 트렌드
https://www.youtube.com/playlist?list=PLv2d7VI9OotRTfM1zJLQMCLriBpLFg8r
📷 개발자 브이로그
https://www.youtube.com/playlist?list=PLv2d7VI9OotR1tALnxov7sAUshyBmfYfU
🤗 생산력 향상 팁
https://www.youtube.com/playlist?list=PLv2d7VI9OotQB9p29xrAnARhuE1Vf88I
……………………………………………..
⭐️ 강의 영상 즐겨찾기
0:0 ① 프로젝트 소개
2:08 ② 강의 활용 방법
2:53 ③ 활용한 드림코더(구독자분) 사례
3:24 ④힌트 및 반응형 구조 팁
7:06 ⑤ HTML 마크업 파트
18:57 ⑥ CSS로 이쁘게 스타일링
19:25 ✓CSS변수 활용법
25:57 ✓CSS 전처리기 깨알섦명
30:25 ✓ 모를때 검색하자!
34:03 ✓calc() 설명
44:34 ⑦ 미디어 쿼리 반응형
46:35 ⑧ 버튼을 클릭하면 빙글 돌아가기
49:15 ⑨ 엘리의 말말말
……………………………………………..

READ  Review bộ cứu hộ Ampe MỚI TOANH | usb-b

🎵Music
Joakim Karud Dreams
https://soundcloud.com/joakimkarud

클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

플렉스(Flex) 유형별 UI 응용 예제 : [웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(1)


■ 코딩웍스와 함께 하는 퍼블리셔 취업, 인프런 퍼블리싱 강의 목록
중상급 퍼블리싱을 위한 CSS3의 모든 것
https://www.inflearn.com/course/%EC%A4%91%EC%83%81%EA%B8%89%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1css3%EC%BD%94%EB%94%A9%EC%9B%8D%EC%8A%A4?inst=6fb06010

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱(영상 강좌)
https://www.inflearn.com/course/%EC%82%AC%EC%8A%A4%EA%B7%B8%EB%A6%AC%EB%93%9C%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4?inst=0c5ed509

SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재 및 활용예제
https://www.inflearn.com/course/%EC%82%AC%EC%8A%A4%ED%94%8C%EB%A0%89%EC%8A%A4%EA%B7%B8%EB%A6%AC%EB%93%9C%ED%95%B5%EC%8B%AC%EC%9D%B4%EB%A1%A0?inst=064b34da

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
https://www.inflearn.com/course/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1%EC%8B%A4%EC%A0%84%EC%8B%9C%EC%A6%8C2?inst=a7b0b383

면접과 취업을 부르는 퍼블리셔 ‘개인 포트폴리오 홈페이지’ 제작
https://www.inflearn.com/course/%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94%EA%B0%9C%EC%9D%B8%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80?inst=23e1174a

HTML+CSS+JQUERY 반응형 웹사이트 포트폴리오(App Official Landing Website) 인프런 제작 과정
https://www.inflearn.com/course/%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1?inst=fe8f6858

코딩웍스와 함께 하는 퍼블리셔 취업 진짜 실전 가이드
https://www.inflearn.com/course/%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94%EC%B7%A8%EC%97%85%EA%B0%80%EC%9D%B4%EB%93%9C?inst=fe6611a2

그리드(Grid) 핵심이론 및 실전 활용 예제 강의
https://www.inflearn.com/course/css%EA%B7%B8%EB%A6%AC%EB%93%9C%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9?inst=552b6398

READ  사진잘찍는법 HDR 사진보정 포토샵 사진리터칭 High Dynamic Range (사진가를위한 포토샵) | hdr 사진

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World’s Best Cities)
https://www.inflearn.com/course/%ED%94%8C%EB%A0%89%EC%8A%A4%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4?inst=36c6643c

HTML+CSS+JQUERY 반응형 웹사이트 포트폴리오(Architecture Agency) 인프런 제작 과정
https://www.inflearn.com/course/%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1?inst=97bb8322

HTML+CSS+JQUERY 포트폴리오 중급 실전 퍼블리싱
https://www.inflearn.com/course/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1%EC%9D%B4%EB%A1%A0%EC%8B%A4%EC%A0%84?inst=25effb38

[2020년 출제기준] 웹디자인 기능사 실기시험 완벽 가이드 온라인 강좌
https://www.inflearn.com/course/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8%EA%B8%B0%EB%8A%A5%EC%82%AC2020?inst=5b7adebb

[코딩웍스] HTML+CSS+FLEX+JQUERY 핵심이론 PDF 교재 다운로드
https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9B%8D%EC%8A%A4%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1%EA%B5%90%EC%9E%AC?inst=3929ec4e

플렉스(Flex) 유형별 UI 응용 예제 : [웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(1)

(Ep.6) 요즘은 복붙만 잘하면 HTML/CSS 디자인 끝 (Bootstrap 4)


(Ep.5) 요즘은 복붙만 잘하면 HTML/CSS 디자인 끝 (Bootstrap 4)
우리 사이트 메인페이지의 대문, 상단메뉴 이런거 만들어볼건데
직접 쌩코딩하기 싫으니 Bootstrap을 설치하고 이걸 이용해서 만들어봅시다.
이거 쓰시면 이제 복붙만 하시면 모든 웹UI들 생성가능 ㅅㄱ
HTML CSS 안짜도됨

전체 강의, 예제코드는 http:/codingapple.com 에서 이용가능합니다.
구독자용 10% 할인 코드 YT123

(Ep.6) 요즘은 복붙만 잘하면 HTML/CSS 디자인 끝 (Bootstrap 4)

[타모디자인] 30분만에 html/css 기초 적응하기 [1/2]


기획(?)에 일주일이 넘게 걸렸네요. 최단시간에 적응할수 있도록 준비해봤어요.
이번 강좌가 끝나면 바로 웹사이트 만들기를 할 예정이에요.

[타모디자인] 30분만에 html/css 기초 적응하기 [1/2]

포트폴리오 웹사이트 코딩 #5. CSS 기본 구조와 셀렉터 알아보기


포트폴리오 웹사이트 코딩 #5. CSS 기본 구조와 셀렉터 알아보기

นอกจากการดูหัวข้อนี้แล้ว คุณยังสามารถเข้าถึงบทวิจารณ์ดีๆ อื่นๆ อีกมากมายได้ที่นี่: ดูบทความเพิ่มเติมในหมวดหมู่Technology

related posts

Leave a Comment