Hướng dẫn how do i create a personal portfolio website using html css and javascript? - làm cách nào để tạo trang web danh mục đầu tư cá nhân bằng html css và javascript?

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 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 tuyệt đẹp cho chính mình 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ư
• Bootstrap là gì?
• Cấu trúc thư mục
• Cách thêm menu điều hướng vào danh mục đầu tư của bạn
• Cách thêm tiêu đề anh hùng vào danh mục đầu tư
• Cách tạo phần Giới
• Cách tạo phần Dịch vụ
• Cách thêm màu nền tối vào thanh Nav trên trang Cuộn
• Cách xây dựng phần Danh mục đầu tư
• Cách xây dựng phần liên lạc
• Cách xây dựng phần chân trang
• Thêm điểm nhấn cuối cùng
• Sự kết luận

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 để thể hiện các kỹ năng và kinh nghiệm liên quan của bạn
• Nó cho thấy tính cách của bạn
• Nó cho phép các nhà quản lý tuyển dụng tìm thấy bạn thay vì bạn tiếp cận 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 phía 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ị đáp ứng và di động. Bản phát hành mới nhất của Bootstrap là phiên bản 5. Bạn có thể tìm thấy tài liệu chính thức của Bootstrap 5 tại đây.

Cấu trúc thư mục

Cách thêm menu điều hướng vào danh mục đầu tư của bạn

Cách thêm tiêu đề anh hùng vào danh mục đầu tư

Cách tạo phần Dịch vụ

Cách thêm màu nền tối vào thanh Nav trên trang Cuộn

Cách xây dựng phần Danh mục đầu tư

Cách xây dựng phần liên lạc

Cách xây dựng phần chân trang

Thêm điểm nhấn cuối cùng

• Sự kết luận
• 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 để thể hiện các kỹ năng và kinh nghiệm liên quan của bạn

Nó cho thấy tính cách của bạn

Nó cho phép các nhà quản lý tuyển dụng tìm thấy bạn thay vì bạn tiếp cận với họ

 
    

        

            

            

                
Hi, it's me Brad
                
I am a professional freelancer in New York City
            
            
        
    

Bạn có thể dễ dàng tìm kiếm trên các công cụ tìm kiếm như Google

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

Bootstrap là gì?

Bootstrap là một khung CSS phía 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ị đáp ứng và di động. Bản phát hành mới nhất của Bootstrap là phiên bản 5. Bạn có thể tìm thấy tài liệu chính thức của Bootstrap 5 tại đây.

Cách tạo phần Giới

Cách tạo phần Dịch vụ

Cách thêm màu nền tối vào thanh Nav trên trang Cuộn

    

        

            
About Me
            

                

                    

                

                

                    
 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
                        
                    
                    

                        

                            

                                
Name: David Parker
                                
Age: 28
                                
Occupation: Web Developer

                            
                        
                        

                            

                                
Name: David Parker
                                
Age: 28
                                
Occupation: Web Developer

                            
                        
                    
                    

                        
 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.
                        
                    
                
            
    

Cách xây dựng phần Danh mục đầu tư

/* about section image css */
.imageAboutPage {
    width: 100%;
}

Cách xây dựng phần liên lạc

Cách xây dựng phần chân trang

Thêm điểm nhấn cuối cùng

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ể bạn cung cấp và nơi bạn thích nghi với các dịch vụ được cung cấp của bạn.

Hãy thêm mã cho phần này và mô tả nó bên dưới:

    

        

            
Services
            

                

                    

                        

                            
                            
Website Development
                            
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.
                            
                        
                    
  
                
                

                    

                        

                            
                            
Website Design
                            
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.
                            
                        
                    
  
                

                

                    

                        

                            
                            
Website Deployment
                            
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.
                            
                        
                    
  
                
            

            

                

                    

                        

                            
                            
SEO
                            
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.
                            
                        
                    
  
                

                

                    

                        

                            
                            
DevOps
                            
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.
                            
                        
                    
  
                

                

                    

                        

                            
                            
QA
                            
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.
                            
                        
                    
  
                
            
        
    

Vì trang web này được nhắm mục tiêu vào các nhà phát triển và thiết kế web, tôi đã bao gồm một số dịch vụ mà một 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ị 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 các 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 các màn hình nhỏ hơn 992px, chỉ có một thẻ được hiển thị liên tiếp.

Bạn có thể tìm thấy thêm về các điểm dừng Bootstrap ở đây.

Ngoài ra, có các phông chữ được thêm vào mỗi thẻ để làm cho chúng trông đẹp hơn.

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ữ biểu tượng phông chữ và chiều cao thẻ và thêm một số màu thêm khi người dùng di chuyển trên 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à cách phần dịch vụ của chúng tôi trông như thế nào:

Cách thêm màu nền tối vào thanh Nav trên trang Cuộn

Nếu bạn nhìn vào GIF ở trên đúng cách, bạn sẽ thấy rằng thanh điều hướng trong suốt trang 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 lớp

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

Vì vậy, chúng ta cần truy cập tệp script.js và thêm 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ỏ mã trên:

• Tiêu đề giữ giá trị của phần tử NAV vì phương thức QuerySelector trả về phần tử đầu tiên phù hợp với bộ chọn CSS (đó là

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

  2 trong trường hợp này).

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

  3 bắn lên khi sự kiện cuộn xảy ra.

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

  4 Trả 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ên

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

  5.
• Nếu giá trị của

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

  5 lớn hơn hoặc bằng 100, nó sẽ thêm một lớp

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

  1 vào tiêu đề.

Hãy nhanh chóng thêm CSS cho lớp

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

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: black;
}

Đây là cách mà thanh Nav sẽ trô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ể thấy những gì bạn có khả năng làm, và giới thiệu công việc trong quá khứ mạnh mẽ 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
            

                

                    

                        

                        

                            
YouTube Clone
                            
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            

                                Link
                            
                        
                    
                

                

                    

                        

                        

                            
Quiz App
                            
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            

                                Link
                            
                        
                    
                

                

                    

                        

                        

                            
Product Landing Page
                            
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            

                                Link
                            
                        
                    
                
            
            

            

                

                    

                        

                        

                            
Messaging Service
                            
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            

                                Link
                            
                        
                    
                

                

                    

                        

                        

                            
Twitter Clone
                            
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            

                                Link
                            
                        
                    
                

                

                    

                        

                        

                            
Blog App
                            
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            

                                Link
                            
                        
                    
                
            
    

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ị theo một hàng cho các màn hình lớn có các điểm dừng rộng ≥ 992px, nhưng đối với các màn hình <992px chỉ có một thẻ duy nhất được hiển thị theo một hàng.

GIF dưới đây cho thấy phần Danh mục đầu tư trông như thế nào:

Bạn nên bao gồm thông tin liên hệ của bạn 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 lạc 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
• Nhấp vào nút Tạo mã HTML sẽ cung cấp mã HTML Google MapGenerate HTML Code button which will provide your Google Map HTML Code

Mã của chúng tôi sẽ trông như thế này với biểu mẫu liên hệ bao gồm:

 
    

        

            

            

                
Hi, it's me Brad
                
I am a professional freelancer in New York City
            
            
        
    

Cột đầu tiên sẽ hiển thị bản đồ Google và bảng tiếp theo sẽ hiển thị biểu mẫu liên hệ.

Biểu mẫu có bốn trường 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ó thể sử dụng biểu mẫu Netlify hoặc FormSpree cho điều này.for this.

Đây là cách phần liên hệ sẽ xuất hiện:

Bây giờ chúng tôi đã đế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 Alink vào phông chữ CDN tuyệt vời trong tệp index.html.We have already added alink to the font awesome CDN in the index.html file.

Trong 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 chúng tôi thông qua các biểu tượng tuyệt vời của phông chữ.

 
    

        

            

            

                
Hi, it's me Brad
                
I am a professional freelancer in New York City
            
            
        
    

Không có CSS, chân trang của chúng tôi 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 với mã này:

 
    

        

            

            

                
Hi, it's me Brad
                
I am a professional freelancer in New York City
            
            
        
    

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 dưới đây.

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:

 
    

        

            

            

                
Hi, it's me Brad
                
I am a professional freelancer in New York City
            
            
        
    

Bây giờ chúng tôi đã hoàn thành trang web danh mục đầu tư hoàn chỉnh của chúng tôi.

Bạn có thể tìm thấy mã nguồn đầy đủ của dự án này ở đây.

Sự 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 về 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 viết này hữu ích.

Mã hóa hạnh phúc!

Bạn có thể tìm thấy tôi trên Twitter để biết nội dung hàng ngày liên quan đến phát triển web.