This device is not compatible.
You will learn to:
Create a Hugo application.
Learn how to create a static website using Hugo.
Learn to use CSS to style an application.
Learn to create a visually appealing and responsive personal portfolio site.
Skills
Web Development
Front-end Development
Prerequisites
Basic understanding of HTML and CSS
Basic understanding of static site generators in Go
Technologies
CSS
Hugo
HTML
Project Description
In this project, we’ll build a personal portfolio using Hugo that contains information about ourselves, a list of projects, and contact information. We’ll start with the initial skeleton Hugo project provided to you by default, allowing you to learn to create a static website step-by-step with Hugo from scratch.
Hugo is a static site generator written in the Go language. We’ll add content for different portfolio pages and then create layouts for each page. Once the layouts are created, we’ll style the layouts using plain CSS. We’ll build multiple pages for our portfolio, including the home page, a projects page, an about page, and a contact page.
The components in the application are styled with custom CSS to provide the initial template of the application.
The final portfolio will be as follows:
Project Tasks
1
Introduction
Task 0: Get Started
2
Develop the Header and Footer Sections
Task 1: Implement the Header Layout
Task 2: Style the Header Layout
Task 3: Implement and Style the Footer Layout
3
Develop the Home Page Section
Task 4: Set Up Content for the Home Page
Task 5: Implement the Home Page Layout
Task 6: Style the Home Page Layout
4
Develop the Projects Section
Task 7: Set Up the Content for the Projects Page Layout
Task 8: Implement the Projects Page Layout
Task 9: Style the Projects Page Layout
5
Develop the About Section
Task 10: Set Up the Content for the About Page Layout
Task 11: Implement the About Page Layout
Task 12: Style the About Page Layout
6
Develop the Contact Section
Task 13: Set Up the Content for the Contact Page Layout
Task 14: Implement the Contact Page Layout
Task 15: Style the Contact Page Layout
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.