Nếu bạn là nhà phát triển web hoặc nhà thiết kế web, điều cần thiết là bạn phải có một trang web danh mục đầu tư. Nó cho phép bạn cung cấp thông tin về bản thân và giới thiệu công việc tốt nhất của bạn với các kỹ năng và kinh nghiệm liên quan của bạn.
Trong bài đăng trên blog này, tôi sẽ thảo luận về một số lợi ích của việc tạo một trang web danh mục đầu tư. Sau đó, tôi sẽ chỉ cho bạn cách tạo một trang web danh mục đầu tư đáp ứng đẹp mắt bằng cách sử dụng HTML, CSS, JavaScript và Bootstrap phiên bản 5.
Mục lục
Lợi ích của việc có một trang web danh mục đầu tư
Có một trang web danh mục đầu tư có một số lợi ích, bao gồm:
- nó cung cấp một nền tảng để giới thiệu các kỹ năng và kinh nghiệm liên quan của bạn
- nó thể hiện cá tính của bạn
- nó cho phép các nhà tuyển dụng tìm thấy bạn thay vì bạn liên hệ với họ
- bạn có thể dễ dàng tìm kiếm trên các công cụ tìm kiếm như Google
Bootstrap là gì?
Bootstrap là một khung CSS mặt trước phổ biến được sử dụng để phát triển các trang web thân thiện với thiết bị di động và đáp ứng. Phiên bản mới nhất của Bootstrap là phiên bản 5. Bạn có thể tìm tài liệu chính thức về Bootstrap 5 tại đây.
Cấu trúc thư mục
Bây giờ chúng ta sẽ bắt đầu tạo trang web danh mục đầu tư.
Đầu tiên, hãy tạo cấu trúc thư mục. Bạn có thể lấy các tệp bắt đầu dự án trên GitHub. Ngoài ra, bạn có thể truy cập vào đây để xem bản demo trực tiếp của dự án này.
Cấu trúc thư mục bao gồm các tệp index.html, style.css và script.js và một thư mục hình ảnh. Chúng tôi sẽ viết tất cả CSS trong tệp style.css và JavaScript trong tệp script.js.
Trong tệp index.html, bạn có thể thấy mã soạn sẵn HTML với Bootstrap CDN, bộ phông chữ tuyệt vời và liên kết đến biểu định kiểu bên ngoài và JavaScript.
Tại đây, tệp script.js được tải sau khi tải tất cả mã HTML.
Bây giờ, hãy bắt tay vào việc thêm một menu điều hướng trong dự án của chúng ta. Nó sẽ giúp khách truy cập tìm thấy thông tin liên quan mà họ đang tìm kiếm.
Chúng tôi sẽ sử dụng Bootstrap’s fixed-top class trong phần tử điều hướng để giữ thanh điều hướng ở đầu trang. Thanh điều hướng cũng có một navbar-brand lớp nơi chúng tôi giữ tên của người như một thương hiệu.
<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
<div class="container">
<a class="navbar-brand" href="#">Brad</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Thanh điều hướng có các tính năng sau:
- Nó có sáu liên kết: trang chủ, giới thiệu, dịch vụ, danh mục đầu tư, liên hệ và chân trang
- Nó có một nền trong suốt. Chúng tôi sẽ thêm nền tối khi cuộn trang sau.
- Nó chuyển đổi trên các thiết bị nhỏ hơn
Bạn có thể tìm thêm chi tiết về các tính năng của thanh điều hướng Bootstrap 5 tại đây.
Tuy nhiên, thanh điều hướng có vấn đề khi cuộn. Nó hoàn toàn trong suốt trên toàn trang gây ra các vấn đề về khả năng đọc. Chúng tôi sẽ khắc phục sự cố này sau khi chúng tôi hoàn thành phần Dịch vụ để giúp bạn hiểu đúng vấn đề.
Bây giờ, chúng ta sẽ thêm một hình ảnh anh hùng với một số văn bản ở giữa. Hình ảnh anh hùng là một thuật ngữ thiết kế web đề cập đến hình ảnh có chiều rộng đầy đủ chất lượng cao hiển thị mục tiêu chính của công ty hoặc cá nhân, hình ảnh đại diện, ảnh chụp hoặc các yếu tố bắt mắt khác. Nó giúp thu hút người dùng đến trang web của bạn.
<!-- main banner -->
<section class="bgimage" id="home">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text">
<h2 class="hero_title">Hi, it's me Brad</h2>
<p class="hero_desc">I am a professional freelancer in New York City</p>
</div>
</div>
</div>
</section>Ngoài ra, hãy thêm CSS cho đoạn mã trên vào tệp style.css:
/* hero background image */
.bgimage {
height:100vh;
background: url('images/heroImage.jpeg');
background-size:cover;
position:relative;
}
/* text css above hero image*/
.hero_title {
font-size: 4.5rem;
}
.hero_desc {
font-size: 2rem;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}Ở đây chúng ta có thể thấy rằng phần có một id tên bgimage chịu trách nhiệm hiển thị hình ảnh anh hùng nền với chiều rộng đầy đủ. Nó cũng hiển thị một số văn bản ở trung tâm phía trên hình nền với sự trợ giúp của CSS ở trên.
Đây là giao diện trang web cho đến nay với thanh điều hướng và phần anh hùng:
Cách tạo phần Giới thiệu
Trang Giới thiệu chứa thông tin quan trọng về bạn và lý lịch của bạn. Khách truy cập vào trang web danh mục đầu tư của bạn có thể biết bạn thông qua thông tin bạn cung cấp trong trang này.
Chúng tôi sẽ thêm một hình ảnh vào bên trái của hàng và ở bên phải, chúng tôi sẽ thêm phần giới thiệu nhanh trong phần này. Hãy chứng minh điều đó bằng mã dưới đây:
<!-- about section-->
<section id="about">
<div class="container mt-4 pt-4">
<h1 class="text-center">About Me</h1>
<div class="row mt-4">
<div class="col-lg-4">
<img src="https://www.freecodecamp.org/news/how-to-create-a-portfolio-website-using-html-css-javascript-and-bootstrap/images/about.jpeg" class= "imageAboutPage" alt="">
</div>
<div class="col-lg-8">
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
</p>
<div class="row mt-3">
<div class="col-md-6">
<ul>
<li>Name: David Parker</li>
<li>Age: 28</li>
<li>Occupation: Web Developer</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>Name: David Parker</li>
<li>Age: 28</li>
<li>Occupation: Web Developer</li>
</ul>
</div>
</div>
<div class="row mt-3">
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
</section>
Hãy thêm một số CSS cho hình ảnh bên trái:
/* about section image css */
.imageAboutPage {
width: 100%;
}Điều này sẽ tạo ra một phần về. Bạn có thể sửa đổi nội dung dựa trên các trường hợp sử dụng của mình. Chúng tôi đã thêm các lớp có tên mt-4 và pt-4 với lớp vùng chứa sẽ đặt lề trên cùng và phần đệm trên cùng thành 1,5 rem.
Hàng có hai cột. Một người có col-lg-4 lớp để hiển thị hình ảnh sẽ chiếm cột bên trái với lưới 4 phần dành cho màn hình lớn.
Cột tiếp theo được gán một lớp col-lg-8 sẽ chiếm cột bên phải với lưới 8 phần dành cho màn hình lớn hơn. Đối với màn hình vừa và nhỏ, chúng sẽ chồng lên nhau mà chúng ta có thể thấy trong tệp GIF bên dưới:
Cách tạo phần dịch vụ
Phần này giúp chuyển đổi khách truy cập trang web thành khách hàng tiềm năng. Đây là nơi bạn giải thích những dịch vụ cụ thể mà bạn cung cấp và nơi bạn phân loại các dịch vụ được cung cấp của mình.
Hãy thêm mã cho phần này và mô tả nó bên dưới:
<!-- services section-->
<section id="services">
<div class="container">
<h1 class="text-center">Services</h1>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="fas servicesIcon fa-clock"></i>
<h4 class="card-title mt-3">Website Development</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="fas servicesIcon fa-layer-group"></i>
<h4 class="card-title mt-3">Website Design</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="far servicesIcon fa-check-circle"></i>
<h4 class="card-title mt-3">Website Deployment</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="fas servicesIcon fa-search"></i>
<h4 class="card-title mt-3">SEO</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="fas servicesIcon fa-shield-alt"></i>
<h4 class="card-title mt-3">DevOps</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText">
<div class="card-body">
<i class="fas servicesIcon fa-wrench"></i>
<h4 class="card-title mt-3">QA</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
</div>
</section>Vì trang web này được nhắm mục tiêu tới các nhà thiết kế và nhà phát triển web nên tôi đã bao gồm một số dịch vụ mà nhà phát triển hoặc nhà thiết kế web có thể cung cấp.
Chúng tôi đã sử dụng thẻ bootstrap để hiển thị các dịch vụ. Phần dịch vụ của chúng tôi có 2 hàng và 3 cột. Đối với màn hình lớn có chiều rộng lớn hơn hoặc bằng 992px, ba thẻ được hiển thị liên tiếp. Đối với màn hình rộng dưới 992px, chỉ một thẻ duy nhất được hiển thị trong một hàng.
Bạn có thể tìm hiểu thêm về các điểm ngắt bootstrap tại đây.
Ngoài ra, có những phông chữ được thêm vào trong mỗi thẻ để làm cho chúng trông đẹp hơn.
Nếu không có CSS, phần dịch vụ sẽ trông như thế này:
Vì vậy, hãy thêm một số CSS để tăng kích thước phông chữ và chiều cao thẻ của biểu tượng phông chữ, đồng thời thêm một số màu bổ sung khi người dùng di chuột qua thẻ.
/* services section css */
.servicesText.card {
height: 280px;
cursor: pointer;
}
.servicesIcon {
font-size: 36px;
text-align: center;
width: 100%;
}
.card-title {
text-align: center;
}
.card:hover .servicesIcon {
color: #008000;
}
.servicesText:hover {
border: 1px solid #008000;
}Đây là giao diện của phần dịch vụ của chúng tôi bây giờ:
Cách thêm màu nền tối vào thanh điều hướng khi cuộn trang
Nếu bạn xem kỹ ảnh gif ở trên, bạn sẽ thấy rằng thanh điều hướng trong suốt toàn bộ trang, điều này gây ra các vấn đề về khả năng đọc. Vì vậy, hãy làm việc để khắc phục vấn đề này.
Chúng tôi sẽ viết một số JavaScript và CSS để giải quyết vấn đề này. Chúng tôi sẽ thêm một navbarDark class để hiển thị màu nền tối cho thanh điều hướng khi cuộn trang.
Để làm được điều đó, chúng ta cần truy cập tệp script.js và thêm đoạn mã sau:
// add class navbarDark on navbar scroll
const header = document.querySelector('.navbar');
window.onscroll = function() {
var top = window.scrollY;
if(top >=100) {
header.classList.add('navbarDark');
}
else {
header.classList.remove('navbarDark');
}
}Bây giờ, hãy chia nhỏ đoạn mã trên:
- Tiêu đề giữ giá trị của phần tử điều hướng do phương thức querySelector trả về phần tử đầu tiên khớp với bộ chọn CSS (là
.navbartrong trường hợp này). window.onscrollkích hoạt khi sự kiện cuộn xảy ra.window.scrollYtrả về số pixel mà tài liệu được cuộn theo chiều dọc và giá trị của nó được gán cho một biến có têntop.- Nếu giá trị của
toplớn hơn hoặc bằng 100, nó thêm một lớpnavbarDarkđến tiêu đề.
Hãy nhanh chóng thêm CSS cho navbarDark lớp. Đối với điều đó, hãy chuyển đến tệp style.css của bạn và thêm đoạn mã sau:
/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
background-color: black;
}Đây là giao diện của thanh điều hướng bây giờ:
Cách xây dựng phần danh mục đầu tư
Phần này bao gồm công việc tốt nhất của bạn. Mọi người có thể nhìn thấy những gì bạn có khả năng làm và việc thể hiện thành tích tốt trong quá khứ chắc chắn sẽ thu hút nhiều khách hàng hoặc nhà tuyển dụng tiềm năng hơn. Vì vậy, chỉ thêm công việc tốt nhất của bạn trong phần này.
Chúng tôi sẽ sử dụng thẻ Bootstrap để hiển thị các dự án danh mục đầu tư. Sẽ có 2 hàng và mỗi hàng sẽ có 3 cột thẻ.
Đây sẽ là mã cho phần danh mục đầu tư:
<!-- portfolio section-->
<section id="portfolio">
<div class="container mt-3">
<h1 class="text-center">Portfolio</h1>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card">
<img class="card-img-top" src="https://www.freecodecamp.org/news/how-to-create-a-portfolio-website-using-html-css-javascript-and-bootstrap/images/portfolioImage1.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">YouTube Clone</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="text-center">
<a href="#" class="btn btn-success">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent">
<img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Quiz App</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="text-center">
<a href="#" class="btn btn-success">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent">
<img class="card-img-top" src="images/portfolioImage3.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Product Landing Page</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="text-center">
<a href="#" class="btn btn-success">Link</a>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card portfolioContent">
<img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Messaging Service</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="text-center">
<a href="#" class="btn btn-success">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent">
<img class="card-img-top" src="https://www.freecodecamp.org/news/how-to-create-a-portfolio-website-using-html-css-javascript-and-bootstrap/images/portfolioImage1.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Twitter Clone</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="text-center">
<a href="#" class="btn btn-success">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent">
<img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Blog App</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="text-center">
<a href="#" class="btn btn-success">Link</a>
</div>
</div>
</div>
</div>
</div>
</section>Mỗi thẻ có một hình ảnh, tiêu đề, mô tả và liên kết đến các dự án. Ba thẻ được hiển thị liên tiếp đối với màn hình lớn có điểm dừng rộng ≥ 992px, nhưng đối với màn hình rộng < 992px, chỉ một thẻ duy nhất được hiển thị trong một hàng.
GIF bên dưới hiển thị giao diện của phần danh mục đầu tư hiện tại:
Bạn nên bao gồm thông tin liên hệ của mình trong phần này để khách truy cập có thể liên hệ với bạn nếu họ muốn thuê bạn.
Phần liên hệ của chúng tôi sẽ bao gồm 2 cột trong một hàng: Google maps cho vị trí và biểu mẫu liên hệ.
Để nhúng bản đồ Google, bạn cần làm theo các bước sau:
- truy cập https://www.embed-map.com
- nhập vị trí của bạn
- bấm vào Tạo mã HTML nút sẽ cung cấp Mã HTML Google Map của bạn
Mã của chúng tôi sẽ trông như thế này với biểu mẫu liên hệ được bao gồm:
<!-- contact section-->
<section id="contact">
<div class="container mt-3 contactContent">
<h1 class="text-center">Contact Me</h1>
<div class="row mt-4">
<div class="col-lg-6">
<!-- to edit google map goto https://www.embed-map.com type your location, generate html code and copy the html -->
<div style="max-width:100%;overflow:hidden;color:red;width:500px;height:500px;">
<div id="embedmap-canvas" style="height:100%; width:100%;max-width:100%;">
<iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=new+york&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8">
</iframe>
</div>
<a class="googlemaps-html" href="https://www.embed-map.com" id="get-data-forembedmap">https://www.embed-map.com</a>
<style>#embedmap-canvas img{max-width:none!important;background:none!important;font-size: inherit;font-weight:inherit;}
</style>
</div>
</div>
<div class="col-lg-6">
<!-- form fields -->
<form>
<input type="text" class="form-control form-control-lg" placeholder="Name">
<input type="email" class="form-control mt-3" placeholder="Email">
<input type="text" class="form-control mt-3" placeholder="Subject">
<div class="mb-3 mt-3">
<textarea class="form-control" rows="5" id="comment" name="text" placeholder="Project Details"></textarea>
</div>
</form>
<button type="button" class="btn btn-success mt-3">Contact Me</button>
</div>
</div>
</div>
</section>Cột đầu tiên sẽ hiển thị bản đồ Google và cột tiếp theo sẽ hiển thị biểu mẫu liên hệ.
Biểu mẫu có bốn trường biểu mẫu khác nhau: tên, email, chủ đề và chi tiết dự án. Biểu mẫu không tự gửi yêu cầu. Bạn sẽ cần kết nối nó với bất kỳ ngôn ngữ back-end nào. Hoặc, bạn chỉ cần sử dụng biểu mẫu Netlify Form hoặc Formspree cho việc này.
Đây là cách phần liên hệ sẽ xuất hiện:
Bây giờ chúng ta đã đến phần cuối cùng của bài đăng này, đó là phần chân trang. Chúng tôi đã thêm một liên kết đến phông chữ awesome CDN trong tệp index.html.
Trong Phần chân trang, chúng tôi sẽ thêm các liên kết đến phương tiện truyền thông xã hội của mình thông qua các biểu tượng phông chữ tuyệt vời.
<!-- footer section-->
<footer id="footer">
<div class="container-fluid">
<!-- social media icons -->
<div class="social-icons mt-4">
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://www.twitch.tv/" target="_blank"><i class="fab fa-twitch"></i></a>
</div>
</div>
</footer>Nếu không có CSS, footer của chúng ta sẽ trông như thế này:
Vì vậy, hãy thêm một số kiểu dáng vào chân trang bằng mã này:
/* social media icons styling */
.social-icons {
font-size: 36px;
cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
color: #008000;
}
.fab {
color: #000000;
}
/* footer styling */
#footer {
background-color: #808080;
text-align: center;
}Các biểu tượng hiện được hiển thị ở trung tâm với hiệu ứng di chuột mà chúng ta có thể thấy trong tệp GIF bên dưới.
Lần chỉnh sửa cuối cùng
Để thêm một số khoảng cách giữa tất cả các phần, hãy thêm một số kiểu dáng khác:
/* spacing on all sections */
#about, #services, #portfolio, #contact {
margin-top: 4rem;
padding-top: 4rem;
}
#contact {
padding-bottom: 4rem;
}Bây giờ chúng tôi đã hoàn thành việc tạo trang web danh mục đầu tư hoàn chỉnh của mình.
Bạn có thể tìm thấy mã nguồn đầy đủ của dự án này tại đây.
Phần kết luận
Đây là cách bạn có thể tạo một trang web danh mục đầu tư đáp ứng hoàn chỉnh bằng cách sử dụng HTML, CSS, JavaScript và Bootstrap 5.
Trong bài đăng trên blog này, chúng tôi đã thấy một số lợi ích của việc tạo một trang web danh mục đầu tư cho các nhà phát triển và thiết kế web. Chúng tôi chia toàn bộ trang web thành các phần khác nhau và thảo luận từng phần riêng lẻ khi chúng tôi xây dựng nó.
Bạn có thể tùy chỉnh trang web này dựa trên các trường hợp sử dụng của riêng bạn.
Tôi hy vọng bạn tìm thấy bài đăng này hữu ích.
Mã hóa vui vẻ!
bạn có thể tìm thấy tôi trên Twitter cho nội dung hàng ngày liên quan đến phát triển Web.
