Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

Khái niệm cơ bản về HTML5 CSS3 và tạo mẫu web đáp ứng!

Bài giảng trên web đáp ứng dành cho người mới bắt đầu được tạo ra chỉ với những phần trích xuất thiết yếu cần thiết để sử dụng thực tế cho người mới bắt đầu tìm hiểu các tiêu chuẩn web!

(5.0) 8 đánh giá

215 học viên

  • lizb
집에서도 학원처럼
포폴+1
HTML/CSS
Responsive Web

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • html5

  • css3

  • tiêu chuẩn web

  • Cách sử dụng vscode

  • web đáp ứng

  • Tạo một trang web đáp ứng bằng truy vấn phương tiện

  • Tạo điều hướng đáp ứng

  • Bất cứ ai muốn biết cách thiết kế thông tin HTML

Bao gồm bí quyết chạy đường đua cờ quốc gia!
Tạo các mẫu web đáp ứng sẵn sàng để sử dụng thực tế.

HTML5 + CSS3

Những điều cơ bản về HTML5 và CSS
Tìm hiểu về web đáp ứng
Cuối cùng, một mẫu web đáp ứng
Đây là hướng dẫn thực hiện!

Trước khi bắt đầu bài giảng

Với bài giảng này
Tôi có thể học được gì?

Khóa học này được thiết kế dành cho những người mới làm quen với các tiêu chuẩn web. Khóa học bắt đầu với những kiến thức cơ bản nhất về HTML/CSS, hướng dẫn về kiến trúc thông tin HTML và bố cục CSS, và cuối cùng là xây dựng một mẫu web đáp ứng .
Khóa học này bao gồm quy trình tạo mẫu web đáp ứng, dựa trên kiến thức chuyên môn bạn sẽ tích lũy được khi áp dụng ngay vào công việc. Tìm hiểu các nguyên tắc cơ bản của HTML, cách sử dụng CSS, cách tạo bố cục CSS thường được sử dụng trong thực tế, và thậm chí cả Flex, từng bước một, để trở thành một nhà xuất bản web.

Trong bài giảng này
Có những tính năng gì?

Từ kiến thức cơ bản đến kiến thức nâng cao cần thiết cho công việc thực tế. Hãy xem các bài tập thực hành và ghi chú bài giảng cho từng phần!
Cuối mỗi phần đều có bài tập thực hành cho từng phần. Chúng tôi khuyến nghị bạn nên giải bài tập trước, kiểm tra kết quả rồi mới chuyển sang bài giảng cho phần tiếp theo.
Để giúp sinh viên hiểu và học tập dễ dàng hơn, chúng tôi cung cấp các ghi chú bài giảng ở định dạng PDF. Những ghi chú này được biên soạn dựa trên kinh nghiệm giảng dạy trực tuyến và ngoại tuyến của chúng tôi, và sẽ là một trợ giúp hữu ích cho việc học tập của bạn.

Ghi chú bài giảng chứa đựng bản chất của giáo dục trực tuyến và ngoại tuyến

Bài giảng này
Ai cần nó?

Mã một lần
Bạn có muốn học không?

Tôi muốn bắt đầu với việc viết mã
Người mới bắt đầu viết mã

Nhà xuất bản web
Tôi muốn trở thành

Tôi không biết gì về lập trình
Những người muốn thay đổi công việc

Kiến trúc thông tin là
Tôi nên làm gì?

Dành cho thiết kế UI
Những người cần thiết kế thông tin

Đối với danh mục đầu tư
Không có mẫu nào sao?

trang web đáp ứng
Bất kỳ ai cần mẫu

Cho dù bạn đang muốn bắt đầu với lập trình web, chuyển đổi từ nền tảng lập trình hoàn chỉnh sang nhà xuất bản web, cần kiến trúc thông tin cho thiết kế UI, hay là một nhà thiết kế đang học xuất bản... chúng tôi đã biên soạn một hướng dẫn có hệ thống và thiết yếu để hỗ trợ bạn. Nếu việc tự học khiến bạn cảm thấy quá sức hoặc đáng sợ, chúng tôi luôn sẵn sàng hỗ trợ!
Ngoài ra, các nhà thiết kế đang học xuất bản hoặc những người có nguyện vọng trở thành nhà xuất bản web sẽ có thể sử dụng các mẫu được tạo trong khóa học này để tạo danh mục đầu tư của mình.


Bài giảng này sẽ diễn ra như sau:

Phần 1. Cơ bản về HTML/CSS
Tìm hiểu về ngữ pháp HTML cơ bản và đặc điểm của các thẻ được sử dụng để tạo tài liệu bằng vscode.

Phần 2. Cơ bản về CSS
Chúng ta sẽ nghiên cứu ngữ pháp cơ bản và cách sử dụng CSS, cũng như nhiều bộ chọn khác nhau.

Phần 3. HTML / Ngữ nghĩa / Danh sách / Thẻ nhập của người dùng / Nhóm
Tìm hiểu về các thẻ và cách sử dụng các thẻ khác nhau chủ yếu được dùng trong HTML, chẳng hạn như thẻ ngữ nghĩa / danh sách / thẻ nhập liệu của người dùng / nhóm.

phần 4. phông chữ / đơn vị
Tìm hiểu về các kiểu chữ in hoa, căn chỉnh đoạn văn, phông chữ và đơn vị trong CSS.

phần 5. css / nền / hiển thị / đường viền / mô hình hộp
Chúng ta sẽ nghiên cứu chuyên sâu về display và boxmodel như một trong những thành phần cốt lõi của CSS.

phần 6. css / flex / vị trí / chuyển tiếp / hoạt ảnh / biến đổi
Chúng ta sẽ tìm hiểu về flex, position và transition/animation/transform, những thành phần chủ yếu được sử dụng trong bố cục CSS.

Phần 7. CSS / Media Query / Web đáp ứng
Tìm hiểu về truy vấn phương tiện cho thiết kế web đáp ứng.

Học thông qua các ví dụ toàn diện
Quy trình phát triển web đáp ứng

Hãy xem bản thảo công việc đang được thực hiện với người chia sẻ kiến thức! Chúng ta hãy cùng nhau làm việc từng bước một nhé!
Xin lưu ý rằng khóa học này không bao gồm quá trình tạo bản thiết kế hoặc công việc thiết kế .

Xem ví dụ toàn diện

màn hình máy tính để bàn

màn hình máy tính bảng

điều hướng

phản ứng nhanh

màn hình di động


Câu hỏi dự kiến Hỏi & Đáp

H. Người không học chuyên ngành có thấy khó học không?

Vâng, chúng tôi đã chuẩn bị sẵn các ghi chú giải thích để ngay cả những người không chuyên cũng có thể dễ dàng hiểu được tài liệu. Nếu bạn gặp bất kỳ khó khăn nào trong bài giảng, xin vui lòng đặt câu hỏi. Tôi sẽ phản hồi sớm nhất có thể.

H. Tôi có thể trở thành nhà xuất bản bằng cách tham gia lớp học này không?

Bắt đầu là đã thành công một nửa rồi. Sau khi học kỹ khóa học này, tôi tin rằng bạn có thể trở thành một nhà xuất bản thành công, tùy thuộc vào nỗ lực bạn bỏ ra cho việc học. Đây không phải là lời nói suông; cá nhân tôi đã trải nghiệm điều này trong các lớp học trực tiếp.

H. Nội dung bài học được trình bày ở mức độ nào?

Chúng tôi tập trung vào phương pháp thiết kế thông tin và sản xuất web đáp ứng bằng HTML5/CSS3, đặc biệt là tính linh hoạt trong quá trình sản xuất bố cục.


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất cứ ai mới làm quen với mã hóa

  • Những người chỉ cần học nhanh nội dung chính

  • Bất kỳ ai tạo danh mục web đáp ứng

  • Những người bối rối về cách thiết kế thông tin sau khi xem thiết kế giao diện người dùng

Cần biết trước khi bắt đầu?

  • Sẽ thuận tiện hơn nếu bạn ghi nhớ cách bố trí bàn phím tiếng Anh!

Xin chào
Đây là

770

Học viên

41

Đánh giá

91

Trả lời

4.7

Xếp hạng

7

Các khóa học

지식공유자의 오프라인 국기과정의 수강평 보기

"반응형 웹디자인 양성 과정" 수강후기 바로가기
(2022.03-2022.07)

3월부터 현재까지 길다면 길고 짧다면 짧은 시간이었겠지만 제 인생에선 정말 중요하고 값진 기간이었던 것 같습니다. 사전에 지식은 어느정도 있긴 했지만, 어떻게 해야할지, 어떤 방향으로 가야할지, 뭘 해야할지 아무것도 모르고 막막했는데 선생님께서 성심성의껏 가르쳐주셔서 기술면에서도, 취업면에서도 확고하게 큰 성장을 이룰 수 있었던 것 같습니다.덕분에 자신감도 많이 늘고, 취업 이후에도 잘 할 수 있을 것 같다는 생각이 들어요! 수업 진행해주신 방미정 선생님, 그 외 취업 당담 선생님들께 너무 감사합니다! :) 취업 잘 하고 갑니당! 이후 기수분들도 힘내시고 좋은 경험 얻어가시길 바랄게요! 화이팅 :)

3월부터 7월까지 웹 퍼블리셔 양성과정을 수강했습니다 :) 디자인 외에 아무것도 모르고 도전 했던 건데, 선생님과 동료들의 응원과 지지로 많은 걸 얻고 가는 거 같습니다. 학원에서 배운거 토대로 앞으로도 공부 열심히 해보겠습니당~~ 항상 친절히 알려주셨던 방미정 선생님, 그 외 취업 담당 선생님들께 너무 감사합니다!

"프론트앤드 개발자 양성과정" 수강후기 바로가기
(2020.11.17-2021.05.11)

6개월이라는 시간이 짧게 느껴질 정도로 훈련과정이 흥미로웠습니다. 아이디어를 내고 디자인을 하는 작업은 시간이 오래 걸렸었지만 훈련과정을 통해 요령도 생기고, 작업 시간을 많이 단축시켜가는 제 모습을 보며 실력이 점점 발전한 것 같아 뿌듯하였습니다. 직업의 방향성을 잘 잡지 못하던 저에게는 이 훈련과정을 통해 배운 학습들은 나만의 지식이자, 직업의 방향성을 잡아준 이정표였고, 6개월간 함께 공부했던 프론트앤드 개발자 양성과정 3강의실 언니 오빠 동생들과 방미정 강사님은 좋은 인연이자 버팀목이었습니다. 방미정 강사님과 취업 지원팀 분들, 행정직원분들께서 열심히 도와주셨기에 훈련과정을 수료하기 전에 취업을 하게 된 것 같아 너무 감사드립니다. 이 과정 이외에 다른 좋은 과정들 또한 많이 있어 대우직업능력개발원 이란 학원을 저처럼 취업에 대한 두려움이 있거나, 직업의 방향성을 잘 잡지 못하는 후배와 동생들에게 추천해주고 싶습니다.

처음 왔을 때 디자인도, 코딩도 한 번도 배우지 못한 제가 과연 이 과정을 듣고 취업을 할 수 있을까? 라는 걱정을 많이 했던 것 같습니다. 하지만 다니면 다닐수록 그런 걱정이 사라졌던 것 같아요. 일러스트, 포토샵, html, css, js, vue등 많은 것을 배웠습니다. 새로 배우는 게 많아서 초반에는 어려울 수도 있겠지만 열정 가득한 방미정 선생님께서 정말 잘 알려주셔서 걱정 안 해도 될 것 같아요.ㅎㅎ 다른 학원 후기를 보면 매년 같은 레파토리의 수업, 심지어 선생님께 질문해도 잘 모르는 경우가 있는데 선생님께서는 항상 열정을 가지고 새로운 것도 알려주려고 하시고 아는 것도 많으셔서 도움을 많이 받았습니다! 웹퍼블리셔, 웹디자이너가 되길 원하신다면 강추드립니다.~~

작년 2020년 11월 우연한 기회로 대우직업능력개발원이라는 훌륭한 기관을 알게되고 ,이곳에서 훌륭한 선생님을 만나 좋은교육을 수강할수있게된것에 정말 감사드립니다 만일 제가 이 교육훈련과정을 듣지 않았더라면 아마 지금과 같은 취업기회는 생기기 어려웠을것입니다. 대학졸업후, 취업의 갈림길에서 갈피를 못잡고 방황하던시기에 어디서도 교육받기 어려운 선생님의 실제 실무경험과 노하우가 담긴 5~6개월간의 교육과정은 웹개발이라고는 전혀 알지못했던 제게 큰 배움과 성장의 기간이 되었습니다. 이를 기반으로 다양한 디자인과 웹개발을배웠고 저만의 포트폴리오 또한 만들수있었습니다. 제게는 너무나 생소한 코딩언어들을 배우는 일이 어려워 중도포기하고 싶은 순간들이 여러번 있었지만 포기하지않고 열번이고 다시 가르쳐주시는 선생님의 열정과 이끄심 덕분에 6개월과정을 모두 수료하기 이전(80%이상 수강)에 조기취업이되며 교육과정을 잘 마무리 할 수 있었습니다. 이렇게 첫 직장을 구하고 새출발 하는것이 가능하도록 만들어주신 선생님과, 대우직업능력개발원 기관에 깊은 감사를드립니다.

비전공자도 이해하기 쉽게 알려주셨고 덕분에 취업도 잘했습니다. 이 과정을 듣게 되어 너무 기쁩니다.

디자인, 코딩 툴을 실무에서 사용할 수 있는 커리큘럼에 맞추어 차근차근 기초에 맞추어서 설명해 줍니다. 본인 스스로 작업할 수 있도록 선생님이 최선을 다해서 도와주셔서 많은 도움이 되었습니다. 국비로 하는 수업은 퀄리티가 떨어진다는 편견을 깰 수 있는 교육이었고 , 담임선생님도 매우 진취적이어서 늘 새로운 걸 가르쳐 주려고 하셔서 많이 배울 수 있었습니다.

비전공자도 이해하기 쉽게 알려주셨고 덕분에 취업도 잘했습니다. 이 과정을 듣게 되어 너무 기쁩니다.

기존에 알고 있던 왠만한 지식 플러스로 학원에서 교육을 받으며 다양한걸 알고 배웠습니다. 자격증도 딸 수 있도록 연습도 해주면서 저에게는 어려웠지만 코딩이란 단어도 왠만하면 알아들을 정도로 배웠습니다. 이곳을 수강하면서 취업도 같이 하게되어 마음이 놓이고 기쁩니다.


건축학을 전공했고 웹디자인과 인연을 맺은건 언 20여년이 넘었습니다. 실무와 강의를 병행하며  많은 희노애락 끝에 현재는 이 일을 많이 애정하게 되었고,  흥미와 성취감으로 더 매진하게 되었습니다. 제가 알고 있는 지식들을 공유하여, 좀더 많은 비전공자들이 쉽게 입문하기를 바라며, 그대가 원하는 모든 일들이 이루어 지길 기원합니다.

Lucete!

강의관련 문의 email : loo4love90@gmail.com 

 

 

강의경력  

  • 2018.3 -현재. 웹 디자인/멀티미디어/프론트엔드 전문가과정 진행

  • 엘리스 아카데미 `클래스가 다른 HTML / CSS` 오픈 준비중

  • 엘리스 아카데미 `클래스가 다른 javascript` 오픈 준비중

□ 現 대우직업능력개발원 프론트엔드 / 멀티미디어 / 웹콘텐츠 과정 강의
□ 하이미디어 UI/UX 웹퍼블리싱 강의

□ 이젠컴퓨터 UI/UX 웹퍼블리싱 강의
□ 더조은컴퓨터학원 종로캠퍼스 웹디자인 강의
□ 더조은컴퓨터학원 강남캠퍼스 웹디자인/그래픽 강의
□ 영재직업전문학교 웹디자인 강의

 

  자격증  

□ 웹디자인기능사 자격증
□ 그래픽스운용기능사 자격증 

□ KPC 자격지도자(GTQ,GTQi,GTQid) 자격증

직업능력개발훈련교사3급(정보기술, 디자인,문화컨텐츠,정보기술전략·계획

정보기술운영) 
□ 컴퓨터활용능력 1급

 

Chương trình giảng dạy

Tất cả

77 bài giảng ∙ (10giờ 0phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

8 đánh giá

5.0

8 đánh giá

  • inrina9921님의 프로필 이미지
    inrina9921

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    9% đã tham gia

    • eldeach님의 프로필 이미지
      eldeach

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      58% đã tham gia

      • roykean19930688님의 프로필 이미지
        roykean19930688

        Đánh giá 34

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        It helped me a lot in studying layout and responsiveness.

        • lizb
          Giảng viên

          I'm glad that it was helpful. I'll be launching an intermediate course on responsiveness soon, so please show a lot of interest! Thank you~

      • kcm9010230725님의 프로필 이미지
        kcm9010230725

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        8% đã tham gia

        I am preparing for employment as a publisher, so I took the course. When I got stuck during the lecture and asked questions, the instructor answered kindly and well. The lecture content was well organized, so it was very helpful in creating a portfolio.

        • lizb
          Giảng viên

          Oh, I just saw the course review. Thank you, Doran! I hope you study hard and that it helps your career!

      • gtgyujung4745님의 프로필 이미지
        gtgyujung4745

        Đánh giá 27

        Đánh giá trung bình 4.7

        5

        100% đã tham gia

        Thank you for the great lecture.

        • lizb
          Giảng viên

          thank you!

      776.071 ₫

      Khóa học khác của lizb

      Hãy khám phá các khóa học khác của giảng viên!

      Khóa học tương tự

      Khám phá các khóa học khác trong cùng lĩnh vực!