Bài 1: Học HTML cơ bản

Bài đầu tiên của series học HTML, css, Flatsome và Elemtor sẽ hướng dẫn cho các bạn kiến thức html cơ bản để các bạn có thể hiểu được bố cục và cấu trúc code của 1 website như thế nào nhé.

• Cài đặt trình soạn code visual studio code cho máy tính: https://code.visualstudio.com/
• Cài đặt 1 số extension để code html nhanh hơn: HTML snippet, HTML and CSS Support, Intelicense html, Boilerplate html
• Các thẻ (tags) HTML

<h1> -> <h6>: heading text
<p> : đoạn văn
<strong> : thẻ im đậm text
<em>: thẻ in nghiêng
<small>: thẻ subtext
<ul> thẻ format danh sách bất trình tự, <li>: Thẻ danh sách(list)
<ol> thẻ format danh sách có trình tự, <li>: Thẻ danh sách(list)
<div> : thẻ block hay còn gọi là hàng
<br/> : viết tắt từ break, thẻ ngắt dòng
<span>: text mở rộng
<hr> : thẻ gạch ngang
<img>: thẻ hình ảnh
<a>: Thẻ liên kết URL
<blockquote> : Thẻ trích dẫn

Link Github

Bài 2: HTML Form và Class trong CSS

Bài này chúng ta sẽ học về cách tạo form bằng HTML và tìm hiểu các thuộc tính về input và form trong HTML. Ngoài ra các bạn sẽ được hướng dẫn về CSS cơ bản cũng như cách ứng dụng class vào trong các thẻ HTML để tránh được các trường hợp trùng class sau này khi các bạn style css cho WordPress. Đồng thời class ứng dụng để các bạn có thể style css riêng cho từng thẻ HTML.

• Cách tạo Form bằng HTML:

form -> action
input -> type:text 
input -> type:email
input -> type:checkbox
input -> type:submit
input -> type:radio
select box -> option

Css là gì ?

• CSS dùng để trang trí cho website nhìn đẹp hơn
• Hướng dẫn về thuộc tính Class trong CSS:
• Định nghĩa class cho các thẻ html riêng lẻ để style

Link source code

Bài 3:

Phần 1: Học lập trình CSS qua dự án thực tế 

Video hôm nay các bạn sẽ được hướng dẫn cách sữ dụng các thuộc tính CSS để làm 1 dự án landingpage thực tế. Các bạn nhớ theo dõi đến hết video nha. Chúc các bạn thực hành thành công.

Làm quen các thuộc tính CSS + làm trang landingpage

• Sematic Tag HTML: https://www.w3schools.com/html/html5_semantic_elements.asp
• Các thuộc tính cơ bản:
  • background
  • font, color
  • position
  • display: flex

Dàn trang HTML cho landingpage:

<header></header>
<section>Banner</section>
<nav></nav>
<main>Article + 2 column hình ảnh</main>
<section></section>
<footer>Copy right</footer>

Sự khác biệt giữa margin và padding:

• Margin là khoảng cách giữ 2 khối khác nhau
• Padding là khoảng của nội dung của khối đó so với khối đó

Tài liệu tham khảo CSS

File hình ảnh

Link Github

Phần 2: Tùy chỉnh website truyện tranh WordPress

Ở phần này mình sẽ hướng dẫn các bạn các nội dung sau đây:

1. Tìm hiểu về cách tùy chỉnh thanh right sidebar theo yêu cầu
2. Tìm hiểu và vọc phá các layout cho trang xem truyện chi tiết
3. Tìm hiểu và vọc phá các layout của trang chủ

Chúc cả nhà thực hành thành công.

Nội dung của bài giảng: Bài 2: Phần 1 – Custom theme cho web truyện tranh

1. Navigation (menu bar)
2. Site identity
3. Color Schema

Source hình ảnh + child theme

Bài 4: Học lập trình CSS qua dự án thực tế (Phần cuối)

Nối tiếp Series học làm web HTML, CSS, Flatsome và Elementor thì video hôm nay chúng ta sẽ tìm hiểu về Position trong Css và Pseudo-class, cũng như Pseudo-Element để mình ứng dụng vào trong dự án thực tế.

Position và Pseudo-class trong css

• Bước 1: Set div cha chứa phần tử mà mình cần thao tác là position: relative
• Bước 2: Set div con (phần tử cần thao tác) có postion: absolute
• Bước 3: Các bạn có thể di chuyển phần tử cần thao tác bên trong div cha bằng các thuộc tính sau:

top -> khoảng cách bên trên phần tử so với div cha
left -> khoảng cách bên trái phần tử con so với div cha
right -> khoảng cách bên phải phần tử so với div cha
bottom -> khoảng cách bên dưới phần tử so với div cha

Pseudo-classes và Pseudo-element các bạn có thể tham khảo tại website của W3schools:

1. Pseudo-classes: https://www.w3schools.com/css/css_pseudo_classes.asp
2. Pseudo-elements: https://www.w3schools.com/css/css_pseudo_elements.asp

Link Github

Bài 5: Hướng dẫn Elementor toàn tập

Ở phần này mình sẽ tập làm quen với Elementor để xây dựng 1 trang landingpage theo mẫu: https://www.garderieaujardindesmerveilles2.com/  có sẵn nhé. Video hôm nay sẽ gồm 3 phần:

1. Cài đặt Elementor Pro cho dự án Website
2. Hướng dẫn tạo header và footer bằng Elementor
3. Làm quen với slides trong Elementor cũng như cách thêm hình ảnh và chữ

Bài 6: Phần 2 – Hướng dẫn Elementor toàn tập

Mình sẽ tiếp tục tập làm quen với Elementor để xây dựng 1 trang landingpage theo mẫu: https://www.garderieaujardindesmerveilles2.com/ có sẵn nhé

Website mẫu

File hình ảnh + Elementor Pro

Hướng dẫn cài đặt WordPress bằng Laragon

File hình ảnh + Elementor Pro

gsap.registerPlugin(ScrollTrigger);  

 gsap.from(".ht-ct", { 
 	scrollTrigger: { 
        trigger: ".ht-ct", 
        start : "top center",
        end : "bottom center",
        toggleActions: "restart none none none",
    }, 
    x: 750, 
    opacity: 0,
    duration: 0.8
 })