Nó được sử dụng khá rộng rãi và vô cùng hữu ích trong việc viết CSS dễ đọc, dễ hiểu và chia tỷ lệ hơn... Tại sao lại phải sử dụng BEM?● BEM giúp team làm việc với nhau dễ dàng: Khi làm
Trang 1HTML
Trang 2Giới thiệu HTML
HTML không phải là ngôn ngữ lập trình mà là ngôn ngữ đánh dấu siêu văn bản, nhằm tạo ra trang web để hiển thị lên trình duyệt, cùng với css và javascript.
Trang 3Các thẻ HTML thông dụng
<html>, <head>,
<title>, <meta>,
<link>, <script>,
<style>, <body>,
<div>, <section>,
<header>, <nav>
<main>, <aside>,
<footer>, <article>
<h1> - <h6>, <p>
<span>, <i>, <a>,
<ul><li>, <ol><li>,
<sub>, <sup>,
<caption>,
<strong>,<b>, <br>,
<table>
<form>, <input>,
<textarea>, <button>,
<label>,
<select><option>
<img>, <picture>
<video>, <audio>,
<iframe>,
<svg>, <canvas>
Trang 4BEM là gì?
BEM (Block-Element-Modifier) là một tiêu chuẩn quy ước đặt tên cho các tên lớp CSS
Nó được sử dụng khá rộng rãi và vô cùng hữu ích trong việc viết CSS dễ đọc, dễ hiểu
và chia tỷ lệ hơn.
Trang 5Tại sao lại phải sử dụng BEM?
● BEM giúp team làm việc với nhau dễ dàng: Khi làm team, mỗi người sẽ có một cách đặt tên class riêng và sẽ bị conflict với nhau
● Tính modules: Các class của mỗi khối sẽ không bị ảnh hưởng bởi các yếu tố khác, nên bạn sẽ không lo CSS của class này sẽ gây ảnh hưởng lên class khác.
● Khả năng sử dụng lại: chúng là các khối độc lập và sử dụng lại chúng một cách thuận tiện.
● Cấu trúc: BEM giúp cung cấp cho CSS của bạn một cấu trúc vững chắc, đơn giản và
dễ hiểu.
Trang 6Cách viết
HTML:
<div class="block">
<span class="block elem green small"></span>
<span class="block elem block elem highlight"></span>
</div>
SCSS:
.block{
& elem{}
& highlight{}
}
Trang 7SEO là gì?
❖ Search Engine Optimization - Tối ưu hóa công cụ tìm kiếm (SEO) là quá trình tăng
chất lượng và lưu lượng truy cập website bằng cách tăng khả năng hiển thị của website cho người dùng trên các máy truy tìm dữ liệu như Google, Bing.
❖ SEO Offpage: là tập hợp các thủ thuật tối ưu hóa các yếu tố bên ngoài website, bao
gồm xây dựng liên kết (link building), marketing trên các kênh social media, social media bookmarking, … giúp website lên top Google, kéo về hàng nghìn traffic.
❖ SEO Onpage: là việc tối ưu hóa website, được thực hiện trong phạm vi web đó
nhằm mục đích đưa website lên top Google.
Trang 8Viết HTML tối ưu cho SEO?
❖ Title và thẻ Meta description
➢ Title: đây là dòng đầu tiên được hiện lên trong kết quả tìm kiếm của Google,
title cần phải chứa từ khóa và không được dài quá 60 kí tự.
➢ Description: mô tả nội dung chính của trang hoặc bài viết, cần đặt từ khóa
trọng tâm vào nhằm để giúp boot tìm kiếm của Google nhanh hơn.
❖ Heading: Phân chia cụ thể thành các thẻ từ <h1> đến <h6> phù hợp
❖ Alt: nhằm giúp cho bài viết của bạn có thể tìm kiếm bằng hình ảnh, tăng
mức độ liên quan mật thiết của hình ảnh với bài viết của bạn.
Ví dụ <img src=”./hinh-anh-demo.jpg” alt=”hinh-anh-demo”>
Trang 9Viết HTML tối ưu cho SEO?
❖ Bold: in đậm những nội dung quan trọng, những điều mà bạn muốn nhấn mạnh
trong bài viết
❖ Internal link: liên kết các bài viết có liên quan lại với nhau nhằm giúp người dùng
có thể đọc nhiều bài viết hơn, kéo dài thời gian trải nghiệm trang web đối với người dùng , qua đó sẽ được Google đánh giá cao về chất lượng.
❖ Nội dung: có ích cho người đọc, các bài viết không được trùng lặp, copy từ những
bài viết khác, được viết với văn phong dễ đọc, dễ hiểu có giá trị.
Trang 10Thực hành
Viết HTML sử dụng quy tắc đặt tên BEM và chuẩn SEO cho giao diện website
Trang 11CSS & CSS3
Trang 12Nhóm CSS/CSS3 thông dụng
text-align,
text-decoration,
text-overflow,
text-shadow,
text-transform,
width, height, max/min-width/height
sticky, fixed, absolute, relative
columns, column-count, column-fill, column-gap
Transform: translate, scale,
rotate, skew, transform-origin, matrix
:hover, :focus, [attribute="value"], :after, :before, pointer-events, cursor,
Combinators: >, ~
opacity, visibility, mix-blend-mode, Object-fit, variables, calc(), attr
margin, padding, overflow
top, bottom, left, right
Flexbox: align-items,
align-content, justify-content, flex-wrap, flex-shrink, flex-direction, flex-basis
Transition: transition-delay,
transition-duration, transition-property, transition-timing-function
resize, scroll-behavior, content
font-size, font-family,
font-style, font-weight,
font-display
border, border-radius, border-collapse
background-image, background-position, background-repeat, background-size
Float, clear, Initial, inherit, vertical-align
color, list-style-type,
letter-spacing,
-webkit-text-stroke
box-shadow, drop-shadow, box-sizing, outline
Grid: grid-gap,
grid-template-columns, grid-template-rows, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-area
keyframes, animation, perspective, @media
-webkit-scrollbar, -webkit-scrollbar-track, -webkit-scrollbar-thumb
white-space
writing-mode
word-break, word-wrap
Display: block, inline,
inline-block, none,grid, table, flex, inline-flex,
Units: px, rem, em, vw, vh,
vmin, max, %
Filter image: blur,
brightness, contrast, drop-shadow
Trang 13Thực hành
Viết CSS cho giao diện đã viết bằng HTML trước đó.
Trang 14SCSS
Trang 15SASS/SCSS là gì?
❖ SASS/SCSS là ngôn ngữ kịch bản tiền xử lý được diễn giải hoặc biên dịch thành CSS -
theo Wikipedia
❖ SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết , SCSS cải tiến từ SASS nhằm giúp cú pháp gần với CSS hơn.
❖ Các trình biên dịch SASS/SCSS phổ biến: Koala và Laravel mix.
Tham khảo thêm: https://topdev.vn/blog/sass-scss-la-gi/
Trang 16So sánh SASS, SCSS, CSS
Trang 17Tại sao nên viết SCSS?
❖ Tiết kiệm thời gian viết code và số dòng code.
❖ Code rõ ràng, dễ đọc, dễ quản lý và tái sử dụng.
❖ Dễ dàng nâng cấp và mở rộng.
Trang 18Các tính năng của SCSS
❖ Xếp chồng – Nested Rules
❖ Biến – variable
❖ Quy tắc Mixin
❖ Kế thừa – Extends
❖ Vòng lặp - Loop
❖ Mệnh đề điều kiện IF
Trang 19Thực hành
Viết giao diện một website sử dụng HTML & SCSS