Contents

Phím tắt.......................................................................................................................................................1
Thêm icon....................................................................................................................................................1
Click vào nd1 mới hiển thị thêm nd2...........................................................................................................2
Ảnh có ghi chú.............................................................................................................................................2
Model/popup/shadow................................................................................................................................2
display: flex..................................................................................................................................................3
wrap text around img..................................................................................................................................4
inline:...........................................................................................................................................................4
Đặt tên file:..................................................................................................................................................4
Đặt tên class:...............................................................................................................................................4
css selector:.................................................................................................................................................4
Semantic HTML:..........................................................................................................................................5
role attribute providing meaning to the asssistive techonologies;..............................................................5
form:............................................................................................................................................................6
display: grid.................................................................................................................................................6
string literal.................................................................................................................................................6
destructuring...............................................................................................................................................6

Phím tắt
Gõ dấu ! -> hiện ra gợi ý và chọn

Thêm icon
.btn{

padding: 4px 16px;

&:hover{

cursor: pointer;

opacity: 0.9;
}

Click vào nd1 mới hiển thị thêm nd2

<details>

<summary>nd1</summary>

<p>nd2</p>

</details>

Ảnh có ghi chú

<figure>

<img/>

<figcaption>

</figcaption>

</figure>

Model/popup/shadow
VD1: popup

.container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

z-index: 10;

background: rgba(0, 0, 0, 0.75);

}

.popupbg {

position: fixed;

top: 30vh;

left: 30.2%;

z-index: 100;

max-height: 20rem;

overflow: auto;}

VD2: shadow

box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25);

VD3: boxShadow: 0 2px 8px rgba(0, 0, 0, 0.26);

display: flex
flex-direction: row/column
justyfy-content (for main axis) + align-item (for cross axis)

flex-wrap: nowrap/wrap/wrap-reverse(if we want items that don't fit to go to the

top of the container instead of the bottom) + align-content(for cross axis)

flex-basis (to change the size of flex items across the main axis. What happends
when we use flex-basis and set flex-direction to column? Flex-basis sets the item's
height): auto (items are only as wide as their content)

flex-grow (to control how a flex item grows across its main axis): 0/1/2(bigger)/...

flex-shrink (designs that shrink are great for smaller devices, like phones. We'll
mimic a smaller screen with a smaller container width. Flex items shrink when
they can't expand to their flex-basis value~we say that a flex item shrinks when its
size is less than its initial flex-basis size):

when using flex shorthand (item): flex-grow flex-shrink flex-basis

wrap text around img

by using float left or right (img need to be first); and using clear if we don't want
the second element with text wrap around the img

inline:
height and width don't work on inline elements.

Đặt tên file:

To keep .html file names easy to read, we lowercase each word and place a
hyphen - in between

Đặt tên class:

.throne-successor
css selector:
instead of writing a new rule for each element, we can use a comma to style p
and button elements using the same rule, vd: <p>,<button>{} which is called a
grouping selector;

Semantic HTML:
<time>; <address>mail,tel; <header> to define content at the top of the pages;
unlike header and footer, which may contain similar elements across pages,
<main> defines content specific to the particular web page; we use the section
element to define a group of content with a single theme, like the contact
information on this page; <details> hides the text with a widget that must be
toggled to view/hide again, vd: <details><summary>...</summary><p>;

role attribute providing meaning to the asssistive techonologies;

Meaningful HTML tags like button or li help screen readers interpret content. But
we'll find code that uses generic elements like div. In these cases, we can improve
accessibility with the role attributes. Role attributes provide meaning to the
assistive technologies but don't change anything visually. They help attach
meaning to elements, like this "banner" role that tells the screen reader it is the
header of the page, vd: <div role="banner"><img

Role also helps assistive technologies to identify blocks that need to be

considered as a single block. If we want screen readers to identify these images as
a single image, we can assign the "img" role to the container, vd: <div
role="img"><img><img><img></div>

The "contentinfo" role indicates that there's a footer at the end of the page. It
contains copyright, contact, or privacy information.

The "alert" role warns users about events or changes in content, vd: <div
role="alert">Your session will expire in 60 seconds.</div>

Sometimes, we include visually attractive content that might distract screen

readers. In these cases, we can use the aria-hidden attribute. It'll hide content to
assistive technologies, but it will be visible on the page, vd <p aria-hidden>This
element needs to be hidden from screen readers.</p> We must not use it in
interactive elements, such as buttons or links, because users won't be able to
interact with them.

form:
<fieldsets> to group related inputs together. Name, mail, phone -> will display a
border around the related elements. Use <legend> inside fieldsets to caption the
entire field set. Vd: <legend>Personal Info</legend>, <legend>Login Info</legend>

display: grid
grid-template-columns: auto auto..../50px 50px 120px/ 1fr 2fr 1fr (short for
fractional unit, chia cột theo phân số)/dùng hàm repeat(3, 1fr) -> 3 columns/

grid-template-rows: 50px 50px 50px (if there are fewer grid items than rows, we'll
get empty rows)

grid-template (define grid rows and colums in one line): 50px 50px (rows)/ 80px
80px (col), can mix unit

row-gap/column-gap/gap (create spaces between grid items)

string literal
when calling function: functionName`string` = functionName("string")

destructuring
allows us to assign array items to variables to use like any other variable.

Vd: const cars = ["carName1", "carName2", "carName3"];

const [firstCar, secondCar] = cars;

console.log(firstCar) -> "carName1"

=> const [firstCar, secondCar] = ["carName1", "carName2", "carName3"];

If we don't want to destructure every element in the array:

const [firstCar, ...anyOtherVariable] = ["carName1", "carName2", "carName3"];

...anyOtherVariable sao chép hết toàn bộ các key value, dù nằm xen kẽ giữa key
value cần dùng

the , skips

const [, , thirdCar] = ["carName1", "carName2", "carName3"];

mở rộng: phía bên trái, có thể mở rộng thuộc tính mới (we can set default values
when we're unsure whether an unpacked element value exists, or is set to
undefined), vd: const [brand, model, enginesQty=1] = ["v1",v2"]

const {firstName = "Kori", lastName, age}

tham số của hàm, vd: function([ts1, ts2])

function(arrayName)