How to Create a Portfolio Gallery using HTML and CSS?
First, before starting this, the user should know some of the basics of HTML and CSS to create a portfolio gallery.
To add more functionality to the website, we can also add JavaScript but now we are limited to using only HTML and CSS to keep the website simple.
First, the portfolio gallery shows all the available content on our website so that the user can choose the topic he wants.
Now, we are going to separate the task of making a webpage into two subtasks. The first subtask is creating the structure of our webpage using HTML and the subtask is making the webpage attractive to the user using CSS.
Creating Structure of the Website
We are going to create the basic structure of our portfolio gallery website. On the webpage, titles of all the available contents are displayed to the user so that he can choose the type of content that he wants. We do this using basic HTML tags and anchor tags for navigating the content page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Making Portfolio Gallery by
using HTML and CSS
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<!-- title and the tag -->
<div class="container">
<h1>Javatpoint</h1>
<h3>A Platform for Online Computer Science tutorials </h3>
<hr>
<!-- Content of the body-->
<h2>Portfolio</h2>
<div class="row">
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/htmlpages/images/html-tutorial.png"
alt="" style="width:100%">
<h3>
<a href="#">HTML Course</a>
</h3>
<p>
The acronym for HTML is Hyper Text Markup
Language. It is used to create static web
pages using a markup language. HTML
is composed of both Hypertext and
Markup language. The word Hypertext represents
the link from one page to another web page.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/csspages/images/css-tutorial.png"
alt="" style="width:100%">
<h3>
<a href="#">CSS Course</a>
</h3>
<p>
CSS is a cascading style sheet used to style the targeted HTML tags. We can style the Html document either by external styling or internal style. External CSS styling is recommended for styling the complex webpage and we need to link the style sheet to an HTML document by using a link tag. It is easy to learn and needs more practice to make web pages attractive.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/phppages/images/php-tutorial.png"
alt="" style="width:100%">
<h3>
<a href="#">PHP Course</a>
</h3>
<p>
PHP is used to make web pages dynamic and more interactive. It is known as Hypertext Preprocessor that can be embedded in HTML documents. It can also handle databases such as Oracle, MySQL, Sybase, etc. PHP is said to be a more forgiving scripting language that consists of syntax similar to C language.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/images/javascript/javascript_logo.png"
alt="" style="width:100%">
<h3>
<a href="#">JavaScript Course</a>
</h3>
<p>
JavaScript is also known as a programming language for Web development. It consists of first-class functions which make the webpage more interactive. It provides libraries and frameworks to develop
Web applications such as REACT, VUE, Nodejs, etc.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
We have completed the creation of our portfolio website structure using the above HTML code. Now another task we have is to design the webpage structure by targeting HTML tags.
Designing Structure of the Website
Here, we use CSS which is called Cascading style sheet to make the webpage attractive by designing the targeted HTML tags.
Let’s look at the CSS code for designing.
CSS
<style>
/* styling the layout */
* {
box-sizing: border-box;
}
/* we make sure the correct padding for the body */
body {
padding: 14px;
}
/* we need to style the body*/
.container {
max-width: 1250px;
margin: auto;
}
h1 {
color: red;
}
/* decorating the anchor tag */
a {
text-decoration: none;
color: cyan;
}
a:hover {
color: green;
}
/* styling the paragraph */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: scroll;
}
/* styling rowand column */
.row {
margin: 1px -15px;
padding: 7px;
}
.row > .column {
padding: 7px;
}
.column {
float: left;
width: 26%;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* styling the content */
.content {
background-color: white;
padding: 11px;
border: 2px solid black;
}
/* we need to set the window size up to 860 widths*/
@media screen and (max-width: 860px) {
.column {
width: 55%;
}
}
/* we need to set the window size to 400 widths*/
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>We also completed designing the structure of the portfolio gallery website by using CSS.
The above code makes our portfolio website look good and the only thing remaining is combining both HTML and CSS code to host our portfolio gallery website.
Combining the HTML and CSS code:
As a developer, we should use external CSS but our application is so simple and it is enough for us to use internal CSS inside <head> HTML tag. We use <style> tag to place our CSS code.
Code:
The final code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>
Making Portfolio Gallery by
using HTML and CSS
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
/* styling the layout */
* {
box-sizing: border-box;
}
/* we make sure the correct padding for the body */
body {
padding: 14px;
}
/* we need to style the body*/
.container {
max-width: 1150px;
margin: auto;
}
h1 {
color: red;
text-align: center;
}
/* decorating the anchor tag */
a {
text-decoration: none;
color: cyan;
}
a:hover {
color: green;
}
/* styling the paragraph */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* styling rowand column */
.row {
margin: 1px -17px;
padding: 7px;
}
.row > .column {
padding: 5px;
}
.column {
float: left;
width: 24%;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* styling the content */
.content {
background-color: white;
padding: 9px;
border: 1px solid black;
}
/* we need to set the window size up to 840 widths*/
@media screen and (max-width: 840px) {
.column {
width: 45%;
}
}
/* we need to set the window size to 400 widths*/
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<!-- title and the tag -->
<div class="container">
<h1 textalign="center">Javatpoint</h1>
<h3>A Platform for Online Computer Science tutorials </h3>
<hr>
<!-- Content of the body-->
<h2>Portfolio</h2>
<div class="row">
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/htmlpages/images/html-tutorial.png"
alt="" style="width:95%">
<h3>
<a href="#">HTML Course</a>
</h3>
<p>
The acronym for HTML is Hyper Text Markup
Language. It is used to create static web
pages using a markup language. HTML
is composed of both Hypertext and
Markup language. The word Hypertext represents
the link from one page to another web page.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/csspages/images/css-tutorial.png"
alt="" style="width:95%">
<h3>
<a href="#">CSS Course</a>
</h3>
<p>
CSS is a cascading style sheet used to style the targeted HTML tags. We can style the Html document either by external styling or internal style. External CSS styling is recommended for styling the complex webpage and we need to link the style sheet to an HTML document by using a link tag. It is easy to learn and needs more practice to make web pages attractive.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/phppages/images/php-tutorial.png"
alt="" style="width:95%">
<h3>
<a href="#">PHP Course</a>
</h3>
<p>
PHP is used to make web pages dynamic and more interactive. It is known as Hypertext Preprocessor that can be embedded in HTML documents. It can also handle databases such as Oracle, MySQL, Sybase, etc. PHP is said to be a more forgiving scripting language that consists of syntax similar to C language.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://static.javatpoint.com/images/javascript/javascript_logo.png"
alt="" style="width:95%">
<h3>
<a href="#">JavaScript Course</a>
</h3>
<p>
JavaScript is also known as a programming language for Web development. It consists of first-class functions which make the webpage more interactive. It provides libraries and frameworks to develop
Web applications such as REACT, VUE, Nodejs, etc.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
The below picture shows our portfolio gallery website upon running our code consisting of HTML and CSS.
We can see that when we hover our mouse pointer on the course, its color changed to green.
Now the user looks at our website consisting of the courses and chooses the course that he is interested in, by clicking on the course name.
The browsers that are supported for our website are Chrome, Firefox, Microsoft Edge, Safari, etc.