Cách tạo một trang web bằng HTML và CSS (từng bước) – các bước quy trình html css

Bạn sẽ học cách tiếp cận từng bước của tôi mà tôi làm theo khi tạo một trang web mới với HTML và CSS từ đầu!

Bạn đang xem : các bước quy trình html css

Cách tạo Trang web bằng HTML và CSS (từng bước)

Bạn có muốn học cách tạo toàn bộ trang web bằng HTML và CSS từ đầu không? Trong bài đăng này, chúng tôi sẽ tạo một trang web trước tiên bằng cách thiết lập cấu trúc của trang web bằng HTML và sau đó làm cho nó trông đẹp mắt bằng CSS. Bài đăng này sẽ không đưa ra lời giải thích chi tiết về từng kiểu dáng mà chúng tôi tạo ra, nhưng chúng tôi sẽ có một cái nhìn sâu hơn về phần anh hùng. Chúng ta sẽ tìm hiểu cách định vị các yếu tố và cách làm cho trang web đáp ứng!

Trang web chúng tôi sẽ tạo

Trong hướng dẫn từng bước này, chúng ta sẽ tìm hiểu cách tạo trang web sau bằng HTML và CSS:

Trang web có HTML và CSS: Xem trước cuối cùng

Trang web là một trong những mẫu cho Easy Portfolio , một Trình tạo danh mục đầu tư tự động mà tôi đã tạo vào tháng trước!

HTML là gì?

HTML là cơ sở của trang web của bạn. Nó xác định cấu trúc và các yếu tố khác nhau mà trang web có thể chứa. Để thực hiện điều này, HTML sử dụng các phần tử khác nhau. Ví dụ: bạn có thể sử dụng phần tử hình ảnh để tạo hình ảnh trên trang web của mình. Phần tử bao gồm thẻ mở, thẻ đóng và các thuộc tính khác nhau. Đối với hình ảnh, thuộc tính src được sử dụng để xác định vị trí của hình ảnh. Ví dụ: phần tử hình ảnh sau sẽ trỏ đến hình ảnh có tên “background.png” trong cùng thư mục với tệp HTML:

  & lt; img src = "./ background.png" & gt;  

Tất nhiên, đây không phải là mọi thứ bạn có thể làm với HTML. Để tìm hiểu thêm về các khái niệm cơ bản về HTML, hãy xem bài đăng này tại đây .

CSS là gì?

Mặt khác, CSS được sử dụng để tạo kiểu cho các phần tử khác nhau trong HTML của bạn. Để tạo kiểu cho các phần tử chính xác, bạn có thể sử dụng các bộ chọn khác nhau để nhắm mục tiêu các phần tử chính xác. Những cái phổ biến nhất là các lớp và id. Đây là những thuộc tính bạn có thể cung cấp cho mọi phần tử. Ví dụ: chúng tôi có thể đặt kích thước của hình ảnh trước đó bằng cách cung cấp một id và sau đó tạo một kiểu nhắm mục tiêu id đó:

  & lt; style & gt;
# target-img {
    chiều rộng: 100px;
    chiều cao: 100px;
}
& lt; / style & gt;

& lt; img id = "target-img" src = "./ background.png" & gt;  

Cũng như HTML, đây chỉ là một cái nhìn tổng quan siêu ngắn gọn. Để hiểu rõ hơn về CSS, hãy xem bài đăng này tại đây .

Thiết lập môi trường phát triển cho trang web

Đối với hướng dẫn sau, tôi sẽ sử dụng Visual Studio Code làm trình soạn thảo mã của mình. Trong đó, chúng tôi sẽ tạo các tệp HTML và CSS. Bạn có thể tìm thấy Mã VS tại đây . Ngoài ra, tôi khuyên bạn nên cài đặt tiện ích mở rộng VS Code Máy chủ Trực tiếp , cho phép cập nhật trực tiếp trang web của bạn! Có nghĩa là mỗi khi chúng tôi thay đổi HTML hoặc CSS, trang web sẽ tự động cập nhật và hiển thị các thay đổi.

Đối với chính cấu trúc dự án, chúng tôi sẽ tạo một thư mục mới với tên của dự án. Tôi sẽ gọi nó là portfolio . Trong thư mục mới, chúng tôi sẽ tạo tệp index.html chứa tất cả HTML mà chúng tôi sẽ viết. Ngoài index.html , chúng tôi cũng sẽ tạo thêm hai thư mục. Một cái được gọi là asset , chứa một hình ảnh bình phương khác có tên là avatar.png và cái kia được gọi là css , chứa một tệp có tên style.css điều đó sẽ chứa tất cả CSS mà chúng tôi viết.

Cuối cùng, cấu trúc dự án sẽ như thế này:

  danh mục đầu tư
├── tài sản
│ └── avatar.png
├── css
│ └── style.css
└── index.html  

Cuối cùng, trước khi chúng ta bắt đầu. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hỏi tôi qua cửa sổ trò chuyện ở góc dưới bên phải màn hình!

Tạo cấu trúc của trang web bằng HTML

Vì vậy, nếu chúng ta xem trang web mà chúng ta muốn tạo, chúng ta có thể thấy bốn phần. Đầu tiên là phần anh hùng, chứa tên, tên người dùng và ảnh đại diện của tôi. Thứ hai, chúng tôi có phần giới thiệu chứa một mô tả ngắn về bản thân tôi. Thứ ba, chúng tôi có một loạt các dự án khác nhau mà tôi đã thực hiện và cuối cùng, trong phần thứ tư, chúng tôi có các phương pháp liên hệ khác nhau.

Sau khi thấy điều này, chúng tôi có thể tạo cấu trúc cơ bản của trang web. Chúng tôi tạo bốn div chứa các phần khác nhau và sau đó là các phần tử khác nhau cụ thể cho mỗi phần. Ngoài các phần khác nhau, chúng tôi cũng bao gồm tệp css / style.css bên trong phần đầu HTML!

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
  & lt; đầu & gt;
    & lt; meta charset = "UTF-8" / & gt;
    & lt; link rel = "icon" type = "image / svg + xml" href = "./ asset / avatar.png" / & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" / & gt;
    & lt; title & gt; Portfolio & lt; / title & gt;
    & lt; link rel = "stylesheet" href = "./ css / style.css" / & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; div & gt;
      & lt; div & gt;
        & lt; img src = "./ asset / avatar.png" alt = "avatar" / & gt;
      & lt; / div & gt;
      & lt; div & gt;
        & lt; h1 & gt; Maximilian Kürschner & lt; / h1 & gt;
        & lt; h2 & gt; Chương trình & lt; / h2 & gt;
      & lt; / div & gt;
      & lt; div & gt;
        & lt; svg xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" stroke-width = "2" & gt;
          & lt; pathroke-linecap = "round" stroke-linejoin = "round" d = "M19 9l-7 7-7-7" / & gt;
        & lt; / svg & gt;
      & lt; / div & gt;
    & lt; / div & gt;

    & lt; div & gt;
      & lt; h2 & gt; GIỚI THIỆU & lt; / h2 & gt;
      & lt; div & gt;
        & lt; p & gt;
          & lt; strong & gt; Ngôn ngữ: & lt; / strong & gt; & lt; mã & gt; .c & lt; / mã & gt ;, & lt; mã & gt; .cs & lt; / mã & gt ;,
          & lt; code & gt; .py & lt; / code & gt ;, & lt; code & gt; .js & lt; / code & gt ;, & lt; code & gt; .dart & lt; / code & gt;
        & lt; / p & gt;
        & lt; p & gt;
          & lt; strong & gt; Các trường: & lt; / strong & gt; & lt; br / & gt;
          🎮 Trò chơi & lt; br / & gt;
          ☎️ Di động & lt; br / & gt;
          💻 Web toàn ngăn xếp & lt; br / & gt;
          🏠 IoT và Tự động hóa & lt; br / & gt;
          🖥️ Phần mềm khác…
        & lt; / p & gt;
        & lt; p & gt;
          & lt; strong & gt; Dự án: & lt; / strong & gt; & lt; br / & gt;
          🏐
          & lt; a
            href = "https://play.google.com/store/apps/details?id=com.Dished.Bralls"
            & gt; Bralls & lt; / a
          & gt;
          & lt; br / & gt;
          🎵 & lt; a href = "https://playlist.programonaut.com/" & gt; Nghệ sĩ vào danh sách phát & lt; / a & gt;
        & lt; / p & gt;
        & lt; p & gt;
          Kiểm tra của tôi
          & lt; a href = "https://programonaut.com" & gt; & lt; strong & gt; Trang web & lt; / strong & gt; & lt; / a
          & gt ;! & lt; br / & gt;
          Liên hệ với tôi qua & lt; a href = "mailto: //mail@programonaut.com" & gt; & lt; strong & gt; mail@programonaut.com< / strong & gt; & lt; / a & gt; hoặc
          & lt; a href = "mailto: //mail@maximilian-kuerschner.de" & gt; & lt; strong & gt; mail@maximilian-kuerschner.de< / strong & gt; & lt; / a & gt;
        & lt; / p & gt;
      & lt; / div & gt;
    & lt; / div & gt;

    & lt; div & gt;
      & lt; h2 & gt; DỰ ÁN & lt; / h2 & gt;
      & lt; div & gt;
        & lt; div & gt;
          & lt; h3 & gt; Bralls & lt; / h3 & gt;
          & lt; p & gt; Một trò chơi nhỏ. & lt; / p & gt;
        & lt; / div & gt;
        & lt; div & gt;
          & lt; h3 & gt; Slide for Four & lt; / h3 & gt;
          & lt; p & gt;
            Một câu đố trượt một so với một. Được tạo cho Flutter Puzzle Hack!
          & lt; / p & gt;
        & lt; / div & gt;
        & lt; div & gt;
          & lt; h3 & gt; Mẫu Latex & lt; / h3 & gt;
          & lt; p & gt; Mẫu cho luận án tại DHBW Mannheim. & lt; / p & gt;
        & lt; / div & gt;
      & lt; / div & gt;
    & lt; / div & gt;

    & lt; div & gt;
      & lt; h2 & gt; LIÊN HỆ & lt; / h2 & gt;
      & lt; div & gt;
        & lt; div & gt; Twitter & lt; / div & gt;
        & lt; div & gt; GitHub & lt; / div & gt;
        & lt; div & gt; Trang web & lt; / div & gt;
        & lt; div & gt; E-Mail & lt; / div & gt;
      & lt; / div & gt;
    & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;
 

Với điều đó, bây giờ chúng tôi có cấu trúc cơ bản của trang web. Tôi đã điền tất cả nội dung của hình ảnh xem trước. Bước tiếp theo là thêm id và lớp vào các phần tử khác nhau. Đối với các lớp, chúng tôi tìm kiếm các phần tử lặp lại để chúng tôi có thể cho chúng cùng một lớp. Một số ví dụ là tiêu đề phần, các yếu tố dự án, v.v.

 & lt; div id = "hero-container" & gt;
  & lt; div id = "avatar-container" & gt;
    & lt; img id = "avatar" src = "./ asset / avatar.png" alt = "avatar" / & gt;
  & lt; / div & gt;
  & lt; div id = "profile-container" & gt;
    & lt; h1 id = "profile-name" & gt; Maximilian Kürschner & lt; / h1 & gt;
    & lt; h2 id = "profile-username" & gt; Programonaut & lt; / h2 & gt;
  & lt; / div & gt;
  & lt; div id = "scroll-down" & gt;
    & lt; svg xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" stroke-width = "2" & gt;
      & lt; pathroke-linecap = "round" stroke-linejoin = "round" d = "M19 9l-7 7-7-7" / & gt;
    & lt; / svg & gt;
  & lt; / div & gt;
& lt; / div & gt;

& lt; div class = "content-section" & gt;
  & lt; h2 class = "content-title" & gt; GIỚI THIỆU & lt; / h2 & gt;
  & lt; div id = "about-text" & gt;
    & lt; p & gt;
      & lt; strong & gt; Ngôn ngữ: & lt; / strong & gt; & lt; mã & gt; .c & lt; / mã & gt ;, & lt; mã & gt; .cs & lt; / mã & gt ;,
      & lt; code & gt; .py & lt; / code & gt ;, & lt; code & gt; .js & lt; / code & gt ;, & lt; code & gt; .dart & lt; / code & gt;
    & lt; / p & gt;
    & lt; p & gt;
      & lt; strong & gt; Các trường: & lt; / strong & gt; & lt; br / & gt;
      🎮 Trò chơi & lt; br / & gt;
      ☎️ Di động & lt; br / & gt;
      💻 Web toàn ngăn xếp & lt; br / & gt;
      🏠 IoT và Tự động hóa & lt; br / & gt;
      🖥️ Phần mềm khác…
    & lt; / p & gt;
    & lt; p & gt;
      & lt; strong & gt; Dự án: & lt; / strong & gt; & lt; br / & gt;
      🏐
      & lt; a
        href = "https://play.google.com/store/apps/details?id=com.Dished.Bralls"
        & gt; Bralls & lt; / a
      & gt;
      & lt; br / & gt;
      🎵 & lt; a href = "https://playlist.programonaut.com/" & gt; Nghệ sĩ vào danh sách phát & lt; / a & gt;
    & lt; / p & gt;
    & lt; p & gt;
      Kiểm tra của tôi
      & lt; a href = "https://programonaut.com" & gt; & lt; strong & gt; Trang web & lt; / strong & gt; & lt; / a
      & gt ;! & lt; br / & gt;
      Liên hệ với tôi qua & lt; a href = "mailto: //mail@programonaut.com" & gt; & lt; strong & gt; mail@programonaut.com< / strong & gt; & lt; / a & gt; hoặc
      & lt; a href = "mailto: //mail@maximilian-kuerschner.de" & gt; & lt; strong & gt; mail@maximilian-kuerschner.de< / strong & gt; & lt; / a & gt;
    & lt; / p & gt;
  & lt; / div & gt;
& lt; / div & gt;

& lt; div class = "content-section" & gt;
  & lt; h2 class = "content-title" & gt; DỰ ÁN & lt; / h2 & gt;
  & lt; div id = "dự án" & gt;
    & lt; div class = "project-container" & gt;
      & lt; h3 class = "project-title" & gt; Bralls & lt; / h3 & gt;
      & lt; p class = "project-description" & gt; Một trò chơi nhỏ. & lt; / p & gt;
    & lt; / div & gt;
    & lt; div class = "project-container" & gt;
      & lt; h3 class = "project-title" & gt; Trang trình bày dành cho Bốn & lt; / h3 & gt;
      & lt; p class = "project-description" & gt;
        Một câu đố trượt một so với một. Được tạo cho Flutter Puzzle Hack!
      & lt; / p & gt;
    & lt; / div & gt;
    & lt; div class = "project-container" & gt;
      & lt; h3 class = "project-title" & gt; Mẫu Latex & lt; / h3 & gt;
      & lt; p class = "project-description" & gt; Mẫu cho luận án tại DHBW Mannheim. & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt;

& lt; div class = "content-section" & gt;
  & lt; h2 class = "content-title" & gt; LIÊN HỆ & lt; / h2 & gt;
  & lt; div id = "danh bạ" & gt;
    & lt; div class = "contact" & gt; Twitter & lt; / div & gt;
    & lt; div class = "contact" & gt; GitHub & lt; / div & gt;
    & lt; div class = "contact" & gt; Trang web & lt; / div & gt;
    & lt; div class = "contact" & gt; E-Mail & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt;  

Như vậy, chúng tôi đã hoàn tất quá trình làm việc với HTML của mình và chúng tôi có thể truy cập vào tệp css / style.css để làm cho trang web trông đẹp mắt!

Xem Thêm  Công cụ chuyển đổi Epoch - ngày utc thành mili giây

Tạo kiểu cho trang web bằng CSS

Bước tiếp theo là áp dụng kiểu cho tất cả các phần tử, lớp và id khác nhau mà chúng ta đã xác định ở bước trước. Tôi sẽ không đi vào chi tiết cho mọi phong cách. Chúng ta sẽ xem xét kỹ hơn một ví dụ. Đối với điều đó, chúng tôi sẽ chọn phần anh hùng. Trong đó, chúng ta phải sử dụng các bộ chọn sau để tạo kiểu:

  • # hero-container
  • # avatar-container
  • #avatar
  • # profile-container
  • #profile -name
  • # profile-username
  • # scroll-down

Đối với kiểu dáng, trước tiên chúng tôi nghĩ về những gì chúng tôi muốn trên thiết bị di động và những gì chúng tôi muốn trên máy tính để bàn. Trên thiết bị di động, chúng tôi muốn hình ảnh đại diện ở trên cùng của tên và tên người dùng. Vì vậy, kết quả sẽ giống như sau:

Trang web có HTML và CSS: Mobile View

Chúng tôi có thể đạt được điều đó với các phong cách sau. Phần quan trọng là bộ chọn # hero-container vì nó xác định nội dung của nó để chảy trong một cột. Điều này đạt được với flexbox!

 # hero-container {
    hiển thị: flex;
    flex-hướng: cột;
    justify-content: trung tâm;
    align-các mục: trung tâm;
    lề: 4rem 1rem;
}

# avatar-container {
    chiều rộng: 128px;
    chiều cao: 128px;
    object-fit: chứa;
}

#hình đại diện {
    chiều rộng: 100%;
    chiều cao: 100%;
}

# hồ sơ-vùng chứa {
    text-align: center;
}

#Tên hồ sơ {
    font-weight: bold;
    lề: 0px;
}

# hồ sơ-tên người dùng {
    font-weight: nhẹ hơn;
    lề: 0px;
}

#cuộn xuống {
    không trưng bày;
    vị trí: tuyệt đối;
    phía dưới: 1rem;
    chiều cao: 48px;
    chiều rộng: 48px;
    object-fit: chứa;
}  

Trên máy tính để bàn, chúng tôi muốn phần này lấp đầy toàn bộ màn hình và chúng tôi muốn tên và tên người dùng bên cạnh hình ảnh thay vì bên dưới nó. Vì vậy, kết quả trên màn hình sẽ giống như sau:

Xem Thêm  Cách sử dụng API Lịch sử trên JavaScript - lịch sử đi 0 javascript

Trang web có HTML và CSS: Desktop View

Do đó, chúng tôi cần thêm các kiểu sau nếu truy vấn phương tiện phù hợp. Ngoài ra, ở đây chúng ta phải xem xét lại bộ chọn # hero-container . Với nó, chúng tôi chuyển bố cục của nội dung từ chảy dưới dạng cột sang chảy dưới dạng hàng!

  @ media (min-width: 768px) {
    # hero-container {
        chức vụ: thân nhân;
        chiều cao: 100vh;
        lề: 0;
    
        flex-hướng: hàng;
    }
    
    #Tên hồ sơ {
        kích thước phông chữ: 3rem;
    }
    
    # hồ sơ-tên người dùng {
        kích thước phông chữ: 2rem;
        text-align: left;
    }
    
    #cuộn xuống {
        hiển thị: khối;
    }
}  

Với điều đó, chúng tôi đã tạo một phần anh hùng đáp ứng! Từ đó, chúng ta có thể tiếp tục tạo kiểu cho phần còn lại của trang web. CSS cuối cùng sẽ trông giống như sau:

  body {
    lề: 0;
    font-family: sans-serif;
    font-size: 16px;
}

một {
    font-weight: bold;
    văn bản-trang trí: không có;
    màu đen;
}

a: di chuột {
    text-decoration: gạch chân;
}

# hero-container {
    hiển thị: flex;
    flex-hướng: cột;
    justify-content: trung tâm;
    align-các mục: trung tâm;
    lề: 4rem 1rem;
}

# avatar-container {
    chiều rộng: 128px;
    chiều cao: 128px;
    object-fit: chứa;
}

#hình đại diện {
    chiều rộng: 100%;
    chiều cao: 100%;
}

# hồ sơ-vùng chứa {
    text-align: center;
}

#Tên hồ sơ {
    font-weight: bold;
    lề: 0px;
}

# hồ sơ-tên người dùng {
    font-weight: nhẹ hơn;
    lề: 0px;
}

#cuộn xuống {
    không trưng bày;
    vị trí: tuyệt đối;
    phía dưới: 1rem;
    chiều cao: 48px;
    chiều rộng: 48px;
    object-fit: chứa;
}

.content-section {
    lề: 4rem 1rem;
}

.content-title {
    margin-bottom: 0,5rem;
}

# about-text p: first-of-type {
    margin-top: 0;
}

# dự án {
    hiển thị: lưới;
    lưới-mẫu-cột: 1fr;
    lưới-tự động-hàng: 1fr;
    khoảng trống: 0,5rem;
}

.project-container {
    background-color: đen;
    bán kính biên giới: 0,5rem;
    màu trắng;

    đệm: 1rem;
}

.Tên dự án {
    font-weight: bold;
    lề: 0;
}

.project-container: di chuột .project-title {
    text-decoration: gạch chân;
}

.mô tả dự án {
    lề: 0;
}

#liên lạc {
    hiển thị: lưới;
    lưới-mẫu-cột: 1fr;
    lưới-tự động-hàng: 1fr;
    khoảng trống: 0,5rem;
}

.tiếp xúc {
    background-color: đen;
    bán kính biên giới: 0,5rem;
    màu trắng;
    font-weight: bold;
    kích thước phông chữ: 1,25rem;
    text-align: center;

    đệm: 0,5rem;
}

.contact: hover {
    text-decoration: gạch chân;
}

@media (chiều rộng tối thiểu: 768px) {
    # hero-container {
        chức vụ: thân nhân;
        chiều cao: 100vh;
        lề: 0;
    
        flex-hướng: hàng;
    }
    
    #Tên hồ sơ {
        kích thước phông chữ: 3rem;
    }
    
    # hồ sơ-tên người dùng {
        kích thước phông chữ: 2rem;
        text-align: left;
    }
    
    #cuộn xuống {
        hiển thị: khối;
    }
    
    .content-section {
        chiều rộng: 60%;
        margin-left: tự động;
        margin-right: tự động;
    }
    
    # dự án {
        lưới-mẫu-cột: 0,5fr 0,5fr;
    }
    
    #liên lạc {
        lưới-mẫu-cột: 0,25fr 0,25fr 0,25fr 0,25fr;
    }
}  

Như đã nói trước đây, nếu có bất kỳ câu hỏi nào liên quan đến HTML hoặc CSS, vui lòng gửi tin nhắn cho tôi và tôi sẽ trả lời sớm nhất có thể!

Xem Thêm  Chỉ định các giá trị mặc định cho các cột - SQL Server - tạo giá trị mặc định của bảng

Kết luận

Trong bài đăng này, chúng tôi đã tạo toàn bộ trang web bằng HTML và CSS từ đầu. Do đó, đầu tiên chúng tôi cấu trúc trang web với các phần tử HTML khác nhau và sau đó tạo kiểu cho chúng! Đối với bản thân kiểu dáng, chúng tôi đã xem xét kỹ hơn phần anh hùng thay vì từng bước.

Bạn có thể tìm thấy toàn bộ dự án trên GitHub .

Tôi hy vọng bài đăng này hữu ích cho bạn và bạn có thể sử dụng bài đăng này để tạo nội dung của riêng bạn trên trang web này! Ngoài ra, trong trường hợp bạn thích nó, hãy cân nhắc đăng ký nhận bản tin của tôi để nhận thông tin cập nhật hàng tháng về các bài đăng khác nhau mà tôi đã tạo cho bạn!


Xem thêm những thông tin liên quan đến chủ đề các bước quy trình html css

Học “xong” CSS trong 1 clip, code được cái web siêu đẹp

alt

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2021-09-14
  • Đánh giá: 4 ⭐ ( 6520 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Code HTML để luyện tập: https://bit.ly/codedao-css
    – Phần 1 – Học HTML trong 15 phút: https://www.youtube.com/watch?v=jSyH0HxKQPY

    Hế nhô các bạn, như đã hứa, mình đã quay lại với series “Học Full-Stack trong 3 tiếng”. Hôm nay bọn mình sẽ cùng tự học CSS Cơ Bản trong 25 phút nha :3.
    Học xong bài này, các bạn đã có đủ kiến thức để chỉnh sửa, mông má 1 trang web cho đẹp rồi đấy ahihi.

    Học xong các bạn có thể xem thêm các phần sau, toàn bộ series học Full Sờ Lắc trong 3 tiếng front-end:
    – Học HTML trong 15 phút: https://youtu.be/jSyH0HxKQPY
    – Học CSS trong 15 phút: https://youtu.be/DUwx3IdXupU
    – Học JS trong 15 phút https://youtu.be/watch?v=ZIgDYEZl1VE
    – Kết hợp HTML CSS JS https://youtu.be/watch?v=JL2o5qixOPI
    – Code 4 dự án HTML CSS JS https://youtu.be/watch?v=YtYcYRsODmI

    Timestamp
    00:00 Giới thiệu vlog
    01:04 CSS là gì, tại sao phải học và dùng?
    02:24 Cú pháp của 1 khối CSS
    03:55 Lấy code mẫu tại bit.ly/codedao-css
    04:33 1. CSS Selector: Chọn phần tử để apply CSS
    06:02 CSS Speciality: id, class, trọng số…
    07:32 2. Làm sao viết CSS, để CSS ở đâu?
    09:04 3. Màu sắc và kích cỡ trong CSS
    12:27 4. Hiển thị chữ trong CSS (font, căn lề)
    14:15 Bonus: Cách dùng Chrome Dev Tool
    15:20 5. Dùng CSS để sắp xếp giao diện (layout)
    16:34 Box model: margin, border, padding
    18:00 Set width, height và box-sizing
    19:43 Các CSS Position hay dùng
    20:51 7. Áp dụng kiến thức CSS để làm web đẹp hơn
    27:08 Kết thúc vlog

    – Các bạn nào thích nội dung Wibu thì qua ủng hộ thằng em @Wi Bu Code Dạo giúp mình tại https://bit.ly/codedaowibu nha
    – Nhớ subscribe cho mình nhe: https://bit.ly/codedaotube

    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer – lập trình viên thứ thiệt.
    Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 hàng tuần nha!

    Ghé thăm mình tại:
    Blog: https://toidicodedao.com/
    Fanpage: https://www.facebook.com/toidicodedao/

    css code_cung_code_dao hoc_full_so_nac

Cách sử dụng CSS trong HTML và thuộc của tính CSS – Blog

  • Tác giả: vn.got-it.ai
  • Đánh giá: 3 ⭐ ( 9401 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là gì? Những cách sử dụng CSS trong HTML là gì? Hãy tìm hiểu ở bài viết này.

Luận văn Xây dựng trang web cá nhân HTML và CSS

  • Tác giả: luanvan.co
  • Đánh giá: 4 ⭐ ( 5310 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Luận văn Xây dựng trang web cá nhân HTML và CSS – Qua quá trình xây dựng website cá nhân và làm báo cáo thực tập đã giúp em thu hoạch được khá nhiều k…

Lộ trình học lập trình Front-end từ đầu cho người mới

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 5672 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu lộ trình học lập trình Front-end từ đầu cho người mới, trong bài này bạn sẽ được hướng dẫn một lộ trình học front-end rất cụ thể, bạn chỉ cần follow.

Học HTML và CSS cơ bản

  • Tác giả: tuhoclaptrinh.edu.vn
  • Đánh giá: 3 ⭐ ( 3640 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học HTML và CSS là một trong những bước khởi đầu trong việc nghiên cứu, tìm hiểu về lập trình. Nó được xem như nền tảng cơ bản, cần thiết khi xây dựng website.

Hiểu biết quy trình thiết kế giao diện web – WEBLUXURY – Thiết kế website cao cấp

  • Tác giả: webluxury.vn
  • Đánh giá: 4 ⭐ ( 4643 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

HTML và CSS bước khởi đầu để lập trình một website

  • Tác giả: laovu.com
  • Đánh giá: 3 ⭐ ( 9959 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để tiết kiệm thời gian cho các bạn mình sẽ nói ngắn gọn và xúc tích nhất có thể cho các bạn dễ hiểu nhé! Nói một cách đơn giản HTML và CSS là phần giao diện cho website, chỉ là giao diện và hiệu ứng trên web thôi nhé, nó chưa phải là một […]

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình