Hướng Dẫn Reponsive Một Trang Landing Page Bằng HTML, CSS và Javascript
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 ạ.
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.
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
Lên Ý Tưởng
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.
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.
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,...
<html lang="en">
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CV-online</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/reponsive.css" />
<link rel="stylesheet"
href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!-- header -->
<header>
<nav>
<div class="logo">
<img src="img/CV.png" />
</div>
<div class="header-content">
<ul>
<li><a href="#about-me" class="active">About Me</a></li>
<li><a href="#skills-me">Skills</a></li>
<li><a href="#project-interest">Project & INTERESTS
</a></li>
</ul>
</div>
</nav>
</header>
<!-- wrapper -->
<section class="wrapper">
<div class="section" id="about-me">
<div class="about-content">
<h1> Đặng Thanh <span class="text-primary">Long</span> </h1>
<p class="about-content-p-from"> Đà Nẵng - Việt Nam - <a
href="mailto:thanhlonghk41@gmail.com">thanhlonghk41@gmail.com</a></p>
<p class="about-content-p">Chào mừng bạn đến với CV của mình!!</p>
<em class="sub-about">
<p class="about-content-p">“Stay Hungry, Stay foolish”</p>
</em>
<div class="about-exp">
<p class="about-content-p">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 :))
<p class="about-content-p">Blog của tui: <a href="https://www.thanhlongdev.tk/"
target="blank"><strong>https://www.thanhlongdev.tk</strong></a></p>
</p>
</div>
</div>
<div class="social-contact">
<a href="https://github.com/long1211" target="blank">
<i class="devicon-github-plain colored"></i>
</a>
<a href="https://zalo.me/0935651395" target="blank">
<img src="img/zalo-1.svg" alt="" width="60">
</a>
<a href="https://www.facebook.com/profile.php?id=100025965767524" target="blank"><i
class="devicon-facebook-plain colored"></i> </a>
</div>
</div>
<div class="section" id="skills-me">
<h2>SKILLS</h2>
<div class="sub-icon">PROGRAMMING LANGUAGES & TOOLS</div>
<div class="skill-icon">
<ul>
<div class="icon-content-skill">
<li>
<i class="devicon-html5-plain-wordmark colored"></i>
</li>
<li>
<i class="devicon-css3-plain-wordmark colored"></i>
</li>
<li>
<i class="devicon-javascript-plain colored"></i>
</li>
<li>
<i class="devicon-sass-original colored"></i>
</li>
<li>
<i class="devicon-jquery-plain-wordmark colored"></i>
</li>
<li>
<i class="devicon-bootstrap-plain colored"></i>
</li>
</div>
<div class="icon-content-skill">
<li>
<i class="devicon-git-plain colored"></i>
</li>
<li>
<i class="devicon-github-plain colored"></i>
</li>
<li>
<i class="devicon-mongodb-plain-wordmark colored"></i>
</li>
<li>
<i class="devicon-nodejs-plain colored"></i>
</li>
<li>
<i class="devicon-express-original"></i>
</li>
<li>
<i class="devicon-heroku-plain colored"></i>
</li>
</div>
</ul>
</div>
<div class="content-skills">
<h3>Kiến Thức Là Vô Tận</h3>
<ul>
<p>
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.
</p>
<li>Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.</li>
<li>Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..</li>
<li>Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng. </li>
<li>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.</li>
</ul>
</div>
</div>
<div class="section" id="project-interest">
<h2>PROJECT & INTERESTS</h2>
<div class="project">
<h3>PROJECT OF ME</h3>
<div class="content-project">
<ul>
<li><i class="fa fa-trophy" aria-hidden="true"></i>
Building website <a target="blank" href="http://vingologo.com/">Vingologo </a> này cho khách hàng.
</li>
<li><i class="fa fa-trophy" aria-hidden="true"></i>
Building <a target="blank" href="https://github.com/long1211/BE_NodeJS-Shopping-Cart">shopping cart</a>
bằng NodeJS, Express và MongoDB
<em>(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).</em>
</li>
<li>
<i class="fa fa-trophy" aria-hidden="true"></i>
Building <a target="blank" href="https://books-librarys.herokuapp.com/">books-librarys</a> bằng NodeJS,
Express và
MongoDB <em>(Project mà mình làm sau khi học NodeJS).</em>
</li>
<li>
<i class="fa fa-trophy" aria-hidden="true"></i>
Building landing page <a target="blank" href="https://vytea-4e914.firebaseapp.com/">VyTea</a> cho khách
hàng.
</li>
<li>
<i class="fa fa-trophy" aria-hidden="true"></i>
Viết Tech Blog kể từ tháng 11/2019 <a target="blank"
href="https://www.thanhlongdev.tk/">https://www.thanhlongdev.tk/</a>
</li>
</ul>
</div>
</div>
<div class="interest">
<h3>INTEREST OF ME</h3>
<div class="content-interest">
<p>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.</br>
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.
</p>
<div class="img-interest">
<div class="picture-interest">
<img src="img/ronaldo.jpg" alt="">
</div>
<div class="picture-interest">
<img src="img/fo4.png" alt="">
</div>
<div class="picture-interest">
<img src="img/f1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="copyright">
<p class="copyright-p">© 2016-2019 - Bản quyền thuộc về thanhlongcv</p>
</div>
</footer>
</section>
<div class="clear"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="Js/script.js"></script>
</body>
</html>
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.
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.
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.
/* 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
*{
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 desktop:
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"
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.
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.
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.
@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 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 mobile khi reponsive:
Bây giờ chúng ta sẽ làm phần header của mobile và tablet nha.
Code HTML
Trong file index.html. Các bạn code thêm phần này trong wrapper nha.
<!-- wrapper -->
<section class="wrapper">
<!-- header-mobile -->
<div class="nav-mobile">
<div class="img-nav">
<img src="img/logo-mobile.png" alt="">
</div>
<div class="icon-mobile" id="btnmenu">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="item_menu" id="menutop">
<ul>
<li><a href="#about-me">About Me</a></li>
<li><a href="#skills-me">Skills</a></li>
<li><a href="#project-interest">Project & INTERESTS
</a></li>
</ul>
</div>
</div>
<!-- end-header-mobile -->
.........
.........
</section>
Code CSS
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.
@media only screen and (min-width:240px) and (max-width:480px){
.........
.........
/* mobile */
.wrapper .nav-mobile{
width: 100%;
margin-bottom: 3rem;
height: 10%;
display: flex;
background: #f1df11;
position: relative;
}
}
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.
$(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 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.
@media (min-width:480px) and (max-width:768px){
.wrapper #about-me .about-content h1 {
font-size: 4rem;
}
nav{
display: none;
}
.wrapper {
width: 100%;
}
.wrapper .nav-mobile{
width: 100%;
margin-bottom: 3rem;
height: 10%;
display: flex;
background: #f1df11;
position: relative;
}
.nav-mobile .img-nav img {
width: 30%;
margin-left: 2.5rem;
}
}
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.
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!!