Hướng dẫn page css - trang css

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook

Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là:

• Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ

  @import "demo.css";

  3. – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ

  @import "demo.css";

  3.
• External Styles – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ

  @import "demo.css";

  4. – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ

  @import "demo.css";

  4.

Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó.

Inline Styles

• Thích hợp với việc chèn một vài đoạn CSS ngắn.
• Trình duyệt không mất thời gian tải tập tin CSS.

External Styles

• Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
• Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.

Và trong các bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Anyway, bạn có thể sử dụng kiểu bạn thích.

Cách nhúng CSS với Inline Styles

Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ

@import "demo.css";

5 vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ

@import "demo.css";

6) như sau.

[html]

[/html]

Và trong cặp thẻ

@import "demo.css";

5 đó bạn có thể viết CSS vào, ví dụ đơn giản:

Cách nhúng CSS với External Styles

Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ, bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo. Sau đó dán một đoạn CSS đơn giản vào như thế này:

 p {

 color: blue;

 font-family: Arial;

 }

Và cuối cùng là chèn vào tập tin HTML bằng thẻ

@import "demo.css";

4 và thẻ này phải đặt bên trong cặp thẻ

@import "demo.css";

6. Ví dụ:

[html][/html]

Trong đó, thuộc tính

  
  
  
  
  
  
  
  


  
  

    
  

  

    

      

        
 Đặng Thanh Long 
        
 Đà Nẵng - Việt Nam - 
        
Chào mừng bạn đến với CV của mình!!
        
          
“Stay Hungry, Stay foolish”
        
        

          
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
            mình còn làm bên mảng BE(NodeJS). Anh em nào làm website hay thiết kế web thì liên hệ mình nha :))
            
Blog của tui: https://www.thanhlongdev.tk
          

        
      
      

        
          
        
        
          
        
         
      
    
    

      
SKILLS
      
PROGRAMMING LANGUAGES & TOOLS
      

        

          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
        
      
      

        
Kiến Thức Là Vô Tận
        

          

            Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
            được học và làm việc với chúng trong quá trình làm web.

          
          
Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
          
Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
          
Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng. 
          
Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
        
      
    
    

      
PROJECT & INTERESTS
      

        
PROJECT OF ME
        

          

            

              Building website Vingologo  này cho khách hàng.
            
            

              Building shopping cart
              bằng NodeJS, Express và MongoDB
              (mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS).
            
            

              
              Building books-librarys bằng NodeJS,
              Express và
              MongoDB (Project mà mình làm sau khi học NodeJS).
            
            

              
              Building landing page VyTea cho khách
              hàng.
            
            

              
              Viết Tech Blog kể từ tháng 11/2019 https://www.thanhlongdev.tk/
            
          
        
      
      

        
INTEREST OF ME
        

          
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
            có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
            luôn đá hết mình :)). Và đặc biệt mình có một đam mê khác là chế cháo.

            Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
          
          

            

              

            
            

              

            
            

              

            
          
        
      
    
    
    
  
  

  
  

0 là khai báo loại tập tin nhúng và

  
  
  
  
  
  
  
  


  
  

    
  

  

    

      

        
 Đặng Thanh Long 
        
 Đà Nẵng - Việt Nam - 
        
Chào mừng bạn đến với CV của mình!!
        
          
“Stay Hungry, Stay foolish”
        
        

          
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
            mình còn làm bên mảng BE(NodeJS). Anh em nào làm website hay thiết kế web thì liên hệ mình nha :))
            
Blog của tui: https://www.thanhlongdev.tk
          

        
      
      

        
          
        
        
          
        
         
      
    
    

      
SKILLS
      
PROGRAMMING LANGUAGES & TOOLS
      

        

          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
        
      
      

        
Kiến Thức Là Vô Tận
        

          

            Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
            được học và làm việc với chúng trong quá trình làm web.

          
          
Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
          
Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
          
Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng. 
          
Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
        
      
    
    

      
PROJECT & INTERESTS
      

        
PROJECT OF ME
        

          

            

              Building website Vingologo  này cho khách hàng.
            
            

              Building shopping cart
              bằng NodeJS, Express và MongoDB
              (mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS).
            
            

              
              Building books-librarys bằng NodeJS,
              Express và
              MongoDB (Project mà mình làm sau khi học NodeJS).
            
            

              
              Building landing page VyTea cho khách
              hàng.
            
            

              
              Viết Tech Blog kể từ tháng 11/2019 https://www.thanhlongdev.tk/
            
          
        
      
      

        
INTEREST OF ME
        

          
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
            có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
            luôn đá hết mình :)). Và đặc biệt mình có một đam mê khác là chế cháo.

            Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
          
          

            

              

            
            

              

            
            

              

            
          
        
      
    
    
    
  
  

  
  

1 là đường dẫn khai báo tên tập tin .css cần nhúng vào.

Đơn giản phải không nào?

Nhúng tập tin CSS vào bên trong một tập tin CSS

Chẳng hạn bây giờ bạn có 3 tập tin CSS mà bạn không muốn thêm tất cả tụi nó vào website mà chỉ muốn thêm một tập tin CSS thôi, thì bạn có thể sử dụng cách nhúng các tập tin CSS vào bên trong một tập tin CSS với từ khóa

  
  
  
  
  
  
  
  


  
  

    
  

  

    

      

        
 Đặng Thanh Long 
        
 Đà Nẵng - Việt Nam - 
        
Chào mừng bạn đến với CV của mình!!
        
          
“Stay Hungry, Stay foolish”
        
        

          
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
            mình còn làm bên mảng BE(NodeJS). Anh em nào làm website hay thiết kế web thì liên hệ mình nha :))
            
Blog của tui: https://www.thanhlongdev.tk
          

        
      
      

        
          
        
        
          
        
         
      
    
    

      
SKILLS
      
PROGRAMMING LANGUAGES & TOOLS
      

        

          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
        
      
      

        
Kiến Thức Là Vô Tận
        

          

            Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
            được học và làm việc với chúng trong quá trình làm web.

          
          
Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
          
Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
          
Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng. 
          
Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
        
      
    
    

      
PROJECT & INTERESTS
      

        
PROJECT OF ME
        

          

            

              Building website Vingologo  này cho khách hàng.
            
            

              Building shopping cart
              bằng NodeJS, Express và MongoDB
              (mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS).
            
            

              
              Building books-librarys bằng NodeJS,
              Express và
              MongoDB (Project mà mình làm sau khi học NodeJS).
            
            

              
              Building landing page VyTea cho khách
              hàng.
            
            

              
              Viết Tech Blog kể từ tháng 11/2019 https://www.thanhlongdev.tk/
            
          
        
      
      

        
INTEREST OF ME
        

          
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
            có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
            luôn đá hết mình :)). Và đặc biệt mình có một đam mê khác là chế cháo.

            Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
          
          

            

              

            
            

              

            
            

              

            
          
        
      
    
    
    
  
  

  
  

2, và các từ khóa

  
  
  
  
  
  
  
  


  
  

    
  

  

    

      

        
 Đặng Thanh Long 
        
 Đà Nẵng - Việt Nam - 
        
Chào mừng bạn đến với CV của mình!!
        
          
“Stay Hungry, Stay foolish”
        
        

          
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
            mình còn làm bên mảng BE(NodeJS). Anh em nào làm website hay thiết kế web thì liên hệ mình nha :))
            
Blog của tui: https://www.thanhlongdev.tk
          

        
      
      

        
          
        
        
          
        
         
      
    
    

      
SKILLS
      
PROGRAMMING LANGUAGES & TOOLS
      

        

          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
        
      
      

        
Kiến Thức Là Vô Tận
        

          

            Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
            được học và làm việc với chúng trong quá trình làm web.

          
          
Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
          
Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
          
Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng. 
          
Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
        
      
    
    

      
PROJECT & INTERESTS
      

        
PROJECT OF ME
        

          

            

              Building website Vingologo  này cho khách hàng.
            
            

              Building shopping cart
              bằng NodeJS, Express và MongoDB
              (mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS).
            
            

              
              Building books-librarys bằng NodeJS,
              Express và
              MongoDB (Project mà mình làm sau khi học NodeJS).
            
            

              
              Building landing page VyTea cho khách
              hàng.
            
            

              
              Viết Tech Blog kể từ tháng 11/2019 https://www.thanhlongdev.tk/
            
          
        
      
      

        
INTEREST OF ME
        

          
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
            có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
            luôn đá hết mình :)). Và đặc biệt mình có một đam mê khác là chế cháo.

            Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
          
          

            

              

            
            

              

            
            

              

            
          
        
      
    
    
    
  
  

  
  

2 này phải được đặt ở đầu tập tin .css (không bao gồm các đoạn comment).

Ví dụ bạn có thể nhúng một tập tin demo.css vào trong tập tin style.css bằng cách chèn đoạn này vào tập tin style.css:

@import "demo.css";

Lời kết

Việc nhúng CSS vào website của bạn bây giờ đã hoàn tất rồi, mọi thứ vẫn còn rất đơn giản phải không nào? Cũng đúng thôi vì CSS cũng khá đơn giản mà. Và bắt đầu từ bài sau là chúng ta có thể đi sâu vào việc vận dụng một số thuộc tính CSS để trang trí website rồi.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.

Giới Thiệu Chung

Hôm nay mình sẽ hướng dẫn các bạn reponsive một trang CV-online do mình tự code nha. Reponsive là thuật ngữ không còn quá xa lạ với chúng ta nữa rồi đúng không ạ.
Reponsive là thuật ngữ không còn quá xa lạ với chúng ta nữa rồi đúng không ạ.

Vậy reponsive là gì? Reponsive web design viết tắt là RWD giúp website chúng ta hiển thị giao diện phù hợp với từng thiết bị và kích thước màn hình khác nhau.
Reponsive web design viết tắt là RWD giúp website chúng ta hiển thị giao diện phù hợp với từng thiết bị và kích thước màn hình khác nhau.

Mục Đích Bài Viết

Hướng dẫn các bạn có thể tự tạo cho mình được một CV-online viết bằng html,css và js không sử dụng framwork như bootstrap để chia layout mà sử dụng float để chia layout. Và sử dụng media query để reponsive cho page.

Bài viết này mình làm khá chuyên sâu để giúp các bạn hiểu rõ hơn về reponsive. Mong các bạn xem kĩ.

Bắt Đầu Thôi Nào

Chúng ta muốn reponsive một website hay một trang page nào đó chúng ta phải code giao diện desktop cho nó. Vậy ý tưởng để tạo một CV-online là gì nhỉ?? Và đây là ý tưởng của mình.
Và đây là ý tưởng của mình.

Thiết Lập Chương Trình

Mình sẽ thiết lập tí cho chương trình nha. Các bạn tạo cho mình một thư mục với bất kì tên gì đó mà bạn thích.

Ví dụ: Mình sẽ tạo một folder với tên là reponsive. Trong folder reponsive các bạn tạo cho mình 1 folder css và 1 folder JS và file index.html Trong folder css các bạn tạo cho mình 2 file đó là style.css và reponsive.css và trong folder JS thì các bạn cũng tạo cho mình file script.js nha.
Trong folder css các bạn tạo cho mình 2 file đó là style.css và reponsive.css và trong folder JS thì các bạn cũng tạo cho mình file script.js nha.

Bắt Đầu Code Thôi Lào

Giao Diện Desktop

Code HTML

Trong file index.html các bạn chèn cho mình các link css và javascript nha. Thì trong file index.html mình sẽ code hai phần là navbar và content. Mình sẽ chia 2 thằng này theo tỉ lệ 2:8 Bên phần nav các bạn có thể thay đổi logo cũng như nội dung nav theo ý muốn của mình nha. Còn bên phần content mình sẽ code 3 phần. Phần 1 là giới thiệu về bản thân. Phần 2 là các kĩ năng của mình. Phần cuối là mình sẽ giới thiệu đến các bạn các project và cũng như các sở thích của mình. Các bạn có thể code thêm phần kinh nghiệm làm việc,...
Thì trong file index.html mình sẽ code hai phần là navbar và content. Mình sẽ chia 2 thằng này theo tỉ lệ 2:8
Bên phần nav các bạn có thể thay đổi logo cũng như nội dung nav theo ý muốn của mình nha.
Còn bên phần content mình sẽ code 3 phần. Phần 1 là giới thiệu về bản thân. Phần 2 là các kĩ năng của mình. Phần cuối là mình sẽ giới thiệu đến các bạn các project và cũng như các sở thích của mình. Các bạn có thể code thêm phần kinh nghiệm làm việc,...

  
  
  
  
  
  
  
  


  
  

    
  

  

    

      

        
 Đặng Thanh Long 
        
 Đà Nẵng - Việt Nam - 
        
Chào mừng bạn đến với CV của mình!!
        
          
“Stay Hungry, Stay foolish”
        
        

          
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
            mình còn làm bên mảng BE(NodeJS). Anh em nào làm website hay thiết kế web thì liên hệ mình nha :))
            
Blog của tui: https://www.thanhlongdev.tk
          

        
      
      

        
          
        
        
          
        
         
      
    
    

      
SKILLS
      
PROGRAMMING LANGUAGES & TOOLS
      

        

          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
          

            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
            

              
            
          
        
      
      

        
Kiến Thức Là Vô Tận
        

          

            Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
            được học và làm việc với chúng trong quá trình làm web.

          
          
Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
          
Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
          
Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng. 
          
Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
        
      
    
    

      
PROJECT & INTERESTS
      

        
PROJECT OF ME
        

          

            

              Building website Vingologo  này cho khách hàng.
            
            

              Building shopping cart
              bằng NodeJS, Express và MongoDB
              (mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS).
            
            

              
              Building books-librarys bằng NodeJS,
              Express và
              MongoDB (Project mà mình làm sau khi học NodeJS).
            
            

              
              Building landing page VyTea cho khách
              hàng.
            
            

              
              Viết Tech Blog kể từ tháng 11/2019 https://www.thanhlongdev.tk/
            
          
        
      
      

        
INTEREST OF ME
        

          
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
            có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
            luôn đá hết mình :)). Và đặc biệt mình có một đam mê khác là chế cháo.

            Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
          
          

            

              

            
            

              

            
            

              

            
          
        
      
    
    
    
  
  

  
  

Và đây là kết quả khi chưa css: Nhìn tù thật đúng không ạ. Bởi vì đây là html mà nó chỉ tạo cho chúng ta cái khung sườn, giờ muốn đẹp chúng ta phải css cho nó là đẹp hết.

Nhìn tù thật đúng không ạ. Bởi vì đây là html mà nó chỉ tạo cho chúng ta cái khung sườn, giờ muốn đẹp chúng ta phải css cho nó là đẹp hết.

Code CSS

Bây giờ chúng ta muốn trang page của mình đẹp hơn thì chúng ta phải css cho nó nha. Chia layout mình sử dụng float. Thanh nav bên trái mình sử dụng thuộc tính position:fixed để khi mình scroll nó vẫn không di chuyển. Phần content bên phải mình cũng sẽ sử dụng float:right để chia layout.
Chia layout mình sử dụng float. Thanh nav bên trái mình sử dụng thuộc tính position:fixed để khi mình scroll nó vẫn không di chuyển.
Phần content bên phải mình cũng sẽ sử dụng float:right để chia layout.

Khi chúng ta sử dụng float:right hoặc left thì phần tử sẽ sang trái hoặc phải. Thế nhưng một vấn đề xảy ra đó là nav và content nó sẽ bao bọc chung bởi một container, chớ nó không bọc riêng từng thằng. Nên khi chúng ta sử dụng margin hay padding nhìn nó rất là củ chuối. Vì thế nên chúng ta sẽ tạo một div rổng với class="clear". Với thuộc tính .clear{clear:both}. Để tạo một điểm kết thúc cho float.
Vì thế nên chúng ta sẽ tạo một div rổng với class="clear". Với thuộc tính .clear{clear:both}. Để tạo một điểm kết thúc cho float.

/* Nav */
nav{
	background: #f1df11;
	padding: 5rem 0;
	left: 0;
	top: 0;
	z-index: 9999;
	position: fixed;
	height: 100%;
	width: 20%;
	text-align: center;
	justify-content: center;
    display: flex;
	flex-direction: column;
}
/* content */
.wrapper{
	width: 80%;
	float: right;
	height: 100%;
}

Và đây là kết quả khi mình chia xong layout: Thứ nhất các bạn sẽ nghĩ trong đầu là tại sao chiều cao của thằng nav nó lại không cao hết trang page mà chỉ một phần trên thôi. Thì mình cũng xin giải thích là khi chúng ta sử dụng position:fixed thì các nav nó sẽ không di chuyển mà đứng yên một chỗ mặc cho phần content nó scroll.Thành ra khi mình chụp toàn bộ trang page thì nav nó chỉ hiển thị chiều cao một phần ở trên thôi. Thế là chúng ta đã chia layout xong. Bây giờ thì mình sẽ style css cho các ảnh và các phần trong content một cách ổn nhất.full code CSS

Thứ nhất các bạn sẽ nghĩ trong đầu là tại sao chiều cao của thằng nav nó lại không cao hết trang page mà chỉ một phần trên thôi.
Thì mình cũng xin giải thích là khi chúng ta sử dụng position:fixed thì các nav nó sẽ không di chuyển mà đứng yên một chỗ mặc cho phần content nó scroll.Thành ra khi mình chụp toàn bộ trang page thì nav nó chỉ hiển thị chiều cao một phần ở trên thôi.
Thế là chúng ta đã chia layout xong. Bây giờ thì mình sẽ style css cho các ảnh và các phần trong content một cách ổn nhất.
full code CSS

*{
	box-sizing: border-box;
	margin:0;
	padding:0;
}
body{
	font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
li,ol{
	list-style: none;
}
/* header */

nav{
	background: #f1df11;
	padding: 5rem 0;
	left: 0;
	top: 0;
	z-index: 9999;
	position: fixed;
	height: 100%;
	width: 20%;
	text-align: center;
	justify-content: center;
    display: flex;
	flex-direction: column;
}
nav .logo img{
	margin: auto auto 0;
    padding: 1rem;
	width: 70%;
	border-radius: 50%;
}
.header-content ul{
	width: 100%;
	flex-direction: column;
}

.header-content ul li a{
	color: #43433e;
	display: block;
	padding: .5rem 1rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
    letter-spacing: 0.05rem;
}
.header-content ul li a:hover{
	color: #9c9797;
}
/* wrapper */
.wrapper{
	width: 80%;
	float: right;
	height: 100%;
}
.wrapper #about-me{
	padding: 3rem;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.wrapper #about-me .about-content h2{
	font-size: 6rem;
	line-height: 5.5rem;
	font-weight: 700;
    text-transform: uppercase;
	color: #343a40;
	margin-bottom: 1rem;
}
.text-primary{
	color: #f1df11;
}
.text-primary:hover{
	color: #fe0000;
}
.wrapper #about-me .about-content .about-content-p{
    font-size: 1.15rem;
	font-weight: 400;
	color: #34495e;
}
.wrapper #about-me .about-content .sub-about .about-content-p{
    font-size: 1.1rem;
	font-weight: 400;
	margin-bottom: 3rem;
}
.wrapper #about-me .about-content .about-content-p-from{
	text-transform: uppercase;
    font-weight: 500;
	font-size: 1.5rem;
	margin-bottom: 3rem;
	color: #343a40;
}
.wrapper #about-me .about-content .about-content-p-from a{
	color: #f1df11;
	text-decoration: none;
}
.wrapper #about-me .about-content .about-content-p-from a:hover{
	text-decoration: underline;
	color: #fe0000;
}
.about-exp .about-content-p:first-child{
	margin-bottom: 1rem;
}
.about-exp .about-content-p{
	margin-bottom: 3rem;
}
.about-exp .about-content-p a{
	color: #f1df11;
	text-decoration: none;
}
.about-exp .about-content-p a:hover{
	text-decoration: underline;
	color: #fe0000;
}
#about-me .social-contact {
	margin-bottom: 4rem;
}
#about-me .social-contact a{
	text-decoration: none;
	font-size: 4rem;
	margin-left: 0.5rem;
}
#skills-me, #project-interest{
	padding: 3rem;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#skills-me h2{
	font-weight: 700;
    text-transform: uppercase;
	color: #343a40;
	margin-bottom: 3rem;
	font-size: 3rem;
}
#skills-me .sub-icon{
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #343a40;
}
#skills-me .skill-icon{
	margin-bottom:2rem;
}
#skills-me .skill-icon ul .icon-content-skill{
	display: flex;
}
#skills-me .skill-icon ul .icon-content-skill li{
	margin-right: 3.5rem;
	font-size: 3rem;
}
#skills-me .skill-icon ul .icon-content-skill li i:hover{
	color: #f8c80a;
}
#skills-me .content-skills h3{
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #343a40;
}
#skills-me .content-skills ul p{
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #343a40;
	font-weight: 500;
}
#skills-me .content-skills ul li{
	font-size: 1.1rem;
	line-height: 2;
	color: #343a40;
	font-weight: 500;
}
#project-interest h2{
	font-weight: 700;
    text-transform: uppercase;
	color: #343a40;
	margin-bottom: 3rem;
	font-size: 3rem;
}
#project-interest .interest h3, .project h3{
	color: #343a40;
	font-size: 1.5rem;
	margin-bottom: 0.8rem;
}
#project-interest .project .content-project ul{
	margin-left: 1.5em;
	margin-bottom: 3rem;
}
#project-interest .project .content-project ul li{
	position: relative;
  line-height: 1.8;
  color: #343a40;
}
#project-interest .project .content-project ul li a{
	text-decoration: none;
	color: #f1df11;
	font-style: italic;
  }
  #project-interest .project .content-project ul li a:hover{
	text-decoration: underline;
	color: #fe0000;
  }
#project-interest .project .content-project ul li i{
	color: #f1df11;
	left: -2em;
     width: 2em;
    position: absolute;
    text-align: center;
    line-height: inherit;
}
#project-interest .interest .content-interest p{
	line-height: 1.5;
	color: #343a40;
}
#project-interest .interest .content-interest .img-interest{
	display: flex;
}
#project-interest .interest .content-interest .img-interest .picture-interest {
	width: 100%;
	overflow: hidden;
}
#project-interest .interest .content-interest .img-interest .picture-interest img{
	width: 98%;
	margin-top:1rem;
	transition: all .3s linear;
}
#project-interest .interest .content-interest .img-interest .picture-interest img:hover{
	transform: scale(1.2);
}
/* footer */
.copyright{
	background: #fff;
}
.copyright .copyright-p{
    margin: 0.75rem auto;
    font-family: Proxima Nova;
    font-size: 12px;
    line-height: 13px;
    text-align: center;
	color: #282364;
}
.header-content ul li .active {
	color: #fff;
  }
.clear { clear: both }

Và đây là kết quả khi chúng ta đã CSS cho giao diện desktop: Nhìn cũng ok rồi đúng không mọi người.

Nhìn cũng ok rồi đúng không mọi người.

Code Javascript

Bây giờ mình muốn là khi mình scroll đến phần nào thì cái thằng thẻ a(href='#') sẽ được thay đổi color font chữ. Thì muốn làm được như vậy thì mình sẽ sử dụng scrollspy. Trong đây thì mình sẽ code phần scrollspy bằng vanilla js. Chúng ta sẽ đặt tên cho mỗi phần trong content một class="section"
Trong đây thì mình sẽ code phần scrollspy bằng vanilla js. Chúng ta sẽ đặt tên cho mỗi phần trong content một class="section"

var section = document.querySelectorAll(".section");
var sections = {};
console.log(sections);
var i = 0;
// Lặp qua tất cả nội dung có trong class="section" mà nó bao bọc tất cả nội dung trên
Array.prototype.forEach.call(section, function(e) { 
  sections[e.id] = e.offsetTop;
  //nó sẽ lấy giá trị mà mình scroll phần tử với mà mình chọn so với khoảng cách phần tử cha và gán cho id có trong class="section"
});
Các bạn thử console.log(sections) thì các bạn sẽ biết độ cao của id="about-me",...

window.onscroll = function() {
  var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
  for (i in sections) {
  
  // Nếu mà giá trị section <= giá trị scrollTop mà mình scroll được thì mỗi thẻ a sẽ được addClass là active. Nếu mà giá trị đó lớn hơn thì những thằng nào có class="active" sẽ thành class rỗng. Thì nó sẽ ẩn class trong mỗi thẻ a. 
    if (sections[i] <= scrollPosition) {
      document.querySelector('.active').setAttribute('class', ' ');
      document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
    }
  }
};

Và đây là kết quả mà mình đã scrollsp: Các bạn chú ý bên trái phần nav khi mình di chuyển nha: Vậy là chúng ta đã xong phần giao diện desktop rồi. Giờ đến phần quan trọng mà mình muốn giới thiệu đến các bạn, đó là reponsive để cho nó thích ứng với kích thước cũng như giao diện mobile.
Các bạn chú ý bên trái phần nav khi mình di chuyển nha:

Vậy là chúng ta đã xong phần giao diện desktop rồi. Giờ đến phần quan trọng mà mình muốn giới thiệu đến các bạn, đó là reponsive để cho nó thích ứng với kích thước cũng như giao diện mobile.

Giao Diện Mobile

Tại đây mình sẽ hướng dẫn các bạn reponsive sao cho phù hợp và đẹp nhất nha.

Chúng ta cùng xem thử trên mobile và tablet thì giao diện mình sẽ hiển thị như thế nào nha:Giao diện tablet Giao diện tablet nhìn cũng ổn đó. Nhưng mình sẽ ẩn thằng nav đó đi, đưa nav lên trên header và cho width của content thành 100%,..Tiếp đến là giao diện mobile Giao diện có phần hơi vỡ là do font chữ quá lớn bây giờ mình sẽ ẩn thằng nav đó đi, đưa nav lên trên header và cho width của content thành 100%, cho font chữ nhỏ lại chút.
Giao diện tablet

Giao diện tablet nhìn cũng ổn đó. Nhưng mình sẽ ẩn thằng nav đó đi, đưa nav lên trên header và cho width của content thành 100%,..
Tiếp đến là giao diện mobile

Giao diện có phần hơi vỡ là do font chữ quá lớn bây giờ mình sẽ ẩn thằng nav đó đi, đưa nav lên trên header và cho width của content thành 100%, cho font chữ nhỏ lại chút.

Reponsive Thôi Nào

Trong file reponsive mà các bạn đã tạo. Nếu mà muốn reponsive thì các bạn sử dụng thuộc tính media query nha Ở đây mình có soạn sẵn các media phù hợp với từng loại kích thước với nhau rồi nha. Các bạn chỉ cần copy paste rồi sau đó code thôi nha.
Ở đây mình có soạn sẵn các media phù hợp với từng loại kích thước với nhau rồi nha. Các bạn chỉ cần copy paste rồi sau đó code thôi nha.

@media(min-width: 1366px){
// code here
}
@media(min-width:1200px) and (max-width:1365px){
// code here
}
@media(min-width:992px) and (max-width:1199px){
 // code here
}
@media(min-width:768px) and (max-width:992px){
  // code here
}
/*tablet*/
@media (min-width:480px) and (max-width:768px){
 // code here
}
/*mobile*/
@media only screen and (min-width:240px) and (max-width:480px){
// code here
}

Bắt Tay Vào Code Thôi Nào

Reponsive Giao Diện Mobile

Mình muốn trong giao diện mobile ẩn thằng nav và cho width:100%, padding:1rem, giảm font-size xuống một tí, đưa nav lên trên header.

@media only screen and (min-width:240px) and (max-width:480px){
    nav{
        display:none;
    }
    .wrapper #about-me, #skills-me, #project-interest{
        padding: 1rem;
    }
    .wrapper {
        width: 100%;
    }
    .wrapper #about-me .about-content h2 {
        font-size: 3rem;
        line-height: 3.5rem;
    }
    #project-interest h2 {
        font-size: 2rem;
    }
    #skills-me .skill-icon ul .icon-content-skill li {
        margin-right: 1rem;
        font-size: 2.2rem;
    }
    #skills-me h2 {
        font-size: 2.5rem;
    }
    .wrapper #about-me .about-content .about-content-p-from {
        font-size: 1rem;
    }
}

Và đây là giao diện mobile khi reponsive:

Code HTML Trong file index.html. Các bạn code thêm phần này trong wrapper nha.
Trong file index.html. Các bạn code thêm phần này trong wrapper nha.

  

     
     

        

          

        
        

          
        
        

          

            
About Me
            
Skills
            
Project & INTERESTS
              
          
      
     
      
      .........
      .........
       

Code CSS Trong file style.css các bạn ẩn nó đi nha và style cho nav-mobile nha.
Trong file style.css các bạn ẩn nó đi nha và style cho nav-mobile nha.

/* mobile */
  .wrapper .nav-mobile{
	  display: none;
  }
  .nav-mobile .img-nav{
	width: 85%;
}
.nav-mobile .img-nav img{
	width: 40%;
	margin-left: .5rem;
}
.nav-mobile .icon-mobile{
	font-size: 35px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	outline: none;
}
.nav-mobile .item_menu {
	background: #f1df11;
    position: absolute;
	top: 100%;
	width: 100%;
	display: none;
}
.item_menu ul li a{
	color: #43433e;
	display: block;
	padding: .5rem 1rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
    letter-spacing: 0.05rem;
}
.item_menu ul li a:hover{
	color: #fff;
}

Trong file reponsive.css các bạn hiển thị nav nha.

@import "demo.css";

0

Code JS Trong file script.js các bạn viết cho một đoạn jquery nhỏ, để khi các bạn click vào icon bar thì sẽ hiển thị menu.
Trong file script.js các bạn viết cho một đoạn jquery nhỏ, để khi các bạn click vào icon bar thì sẽ hiển thị menu.

@import "demo.css";

1

Và đây là giao diện khi chúng ta thêm phần header vào mobile.

Reponsive Giao Diện Tablet

Reponsive trong tablet thì nó cũng không khác nhiều so với mobile.

@import "demo.css";

2

Và đây là giao diện khi chúng ta thêm phần header vào tablet. Vậy là chúng ta đã reponsive xong rồi nha. Trong reponsive các bạn phải tùy cơ ứng biến làm sao cho tối ưu và phù hợp nhất.

Vậy là chúng ta đã reponsive xong rồi nha. Trong reponsive các bạn phải tùy cơ ứng biến làm sao cho tối ưu và phù hợp nhất.

Các bạn tham khảo trang page CV mà mình đã deploy lên firebase tại đây nha

---

Lời Kết

Vậy Là Xong bài Hướng Dẫn Tự Tạo Một Trang Page Và Reponsive Bằng HTML, CSS, Javascript rồi nhé. Mình mong muốn sau bài topic này các bạn có thể tự tay mình code ra được một trang CV cho bản thân mình mà không cần sử dụng bất kì framework hay thư viện nào. Giúp các bạn nắng vững kiến thức về reponsive cũng như các kiến thức khác mà mình đã học.

Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!