Hướng dẫn các bạn có thể tự tạo cho mình 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. And used media query to reponsive for 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

Lên Ý Tưởng

Chúng ta muốn reponsive một trang web hay một trang nào đó mà chúng ta phải code giao diện desktop cho nó. Tại sao lại có ý tưởng để tạo một CV-online là gì 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à responsive. 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à responsive. css và trong thư mục 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

Mã 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à thanh điều hướng và nội dung. 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ể đổi logo cũng như nội dung nav theo ý muốn của mình nha
Còn bên nội dung 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 cùng là mình sẽ giới thiệu đến các bạn các dự án 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 - [email protected]
        
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 thật đúng sai ạ. 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

Mã CSS

Bây giờ chúng ta muốn trang 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 điều hướng bên trái mình sử dụng thuộc tính vị trí. fixed to when my scroll it is still not di chuyển
Phần nội dung bên phải mình cũng sẽ sử dụng float. right to chia layout

Khi chúng ta sử dụng float. right or left thì phần tử sẽ sang trái hoặc phải. Thế nhưng một vấn đề xảy ra đó là điều hướng và nội dung của nó sẽ được bọc chung bởi một thùng chứa, chứ nó không bọc riêng từng thằng. Nên khi chúng ta sử dụng lề hay phần đệm nhìn nó rất là chuối
Vì thế chúng ta sẽ tạo ra một div tròn với class="clear". Thuộc tính. Rõ ràng rõ ràng. cả hai}. To make a end of 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 bố cục xong

Thứ nhất các bạn sẽ nghĩ trong đầu là sao chiều cao của thằng điều hướng nó lại không cao hết trang 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 chức vụ. fixed, the nav it will not di chuyển mà đứng yên một chỗ mặc định cho phần nội dung nó cuộn. Thành ra khi mình chụp toàn bộ trang thì điều hướng nó chỉ hiển thị chiều cao một phần ở trên thôi
Thế là chúng ta đã chia bố cục xong. Bây giờ thì mình sẽ style css cho ảnh và các phần trong nội dung một cách ổn định nhất
mã CSS đầy đủ

*{
	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 h1{
	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 máy tính để bàn

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

Mã Javascript

Bây giờ mình muốn là khi mình cuộn đến phần nào thì cái thằng thẻ a(href='#') sẽ được đổi màu chữ chữ. Thì muốn làm được như vậy thì mình 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 nội dung 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 lưu ý bên trái phần điều hướng khi mình di chuyển nha

Vì vậy, chúng ta đã hoàn thành phần giao diện máy tính để bàn 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 di động

Giao Diện Mobile

Tại đây mình sẽ hướng dẫn các bạn responsive 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
Tablet Giao diện

Giao diện tablet nhìn cũng ổn đó. Nhưng mình sẽ ẩn thằng điều hướng đó đi, đưa điều hướng lên trên tiêu đề và cho chiều rộng của nội dung thành 100%,
Next to the mobile interface

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 header và cho width nội dung thành 100%, cho font chữ nhỏ lại chút

Responsive Thôi Nào

Trong tệp reponsive mà bạn đã tạo. Nếu muốn reponsive thì các bạn sử dụng thuộc tính media query nha
Ở đây mình có 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 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

Responsive Giao Diện Mobile

Mình muốn trong giao diện di động ẩn anh điều hướng và cho chiều rộng. 100%, đệm. 1rem, giảm cỡ chữ xuống một chút, đưa điều hướng lên trên tiêu đề

@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 h1 {
        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 di động khi đáp ứng

Bây giờ chúng ta sẽ làm phần header của mobile và tablet nha

Mã HTML
Trong file index. html. The you code add this section in wrapper nha

  

     
     

        

          

        
        

          
        
        

          

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

Mã CSS
Trong kiểu tệp. css you hide it go nha and style for 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 tệp đáp ứng. css you show nav nha

________số 8_______

mã JS
Trong tập lệnh. js các bạn viết cho một đoạn jquery nhỏ, để khi các bạn nhấp vào thanh biểu tượng thì menu sẽ hiển thị

$(document).ready(function () {
  $("#btnmenu").click(function(e){
    e.preventDefault();
    $('#menutop').slideToggle(500,"linear");
  })
})

Và đây là giao diện khi chúng ta thêm phần tiêu đề vào thiết bị di động

Máy tính bảng Giao diện Responsive

Responsive trên tablet thì nó cũng không khác nhiều so với mobile

/* 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%;
}

0

Và đây là giao diện khi chúng ta thêm phần tiêu đề vào máy tính bảng

Vì thế 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 CV mà mình đã triển khai 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 Và Reponsive Bằng HTML, CSS, Javascript rồi nhé. Mình mong muốn sau bài viết 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ắm kiến ​​thức về responsive 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 viết chủ đề hay và chất lượng hơn ủng hộ mình tại đây nha