Logo
×

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.

How to Create a Portfolio Gallery using 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.

Related Topics

HTML Code

Before jumping into the topic, let’s understand a common scenario where we have a code snippet in our HTML file. By code snippet, we mean computer code, which is written...

5 minutes read.

HTML <table> tag

The Table element If we want to show the data and information in a two-dimensional table with rows and columns, then we can achieve this by using the HTML element <table>. Syntax: <body> <table> <thead> <tr> <thcolspan="#">………….</th> </tr> </thead> <tbody> <tr> <td>……….</td> <td>……….</td> </tr> </tbody> </table> </body> Example: <!DOCTYPE...

9 minutes read.

HTML Anchor

HTML Anchor The HTML anchor tags define a hyperlink that links to other pages on one page. It can create hyperlinks to any web page and files, locations or any other...

3 minutes read.

HTML <select> tag

This tag helps in making the drop-down list on the web page. This is highly used in HTML forms for taking the input from user. You can use the id attribute...

3 minutes read.

How to insert image in HTML

An image (technically digital image) in HTML or even in general technical aspects is a binary representation of visual information. By visual information we mean, in the form of drawings/pictures,...

5 minutes read.

HTML Hide Element

The HTML hide element is used to hide the element. We place the hidden attribute inside those elements which we want to hide. The hidden attribute is a Boolean attribute. The...

3 minutes read.

HTML &lt;body> alink Attribute

HTML <body> alink Attribute What is HTML? The HTML or HyperText Markup Language is used to design web pages. The file extension name for HTML file is ".html". It was released in...

2 minutes read.

HTML <section> tag

The section element in HTML is used to define sections in a document. Syntax of Section Tag: <body> <h1>……….</h1> <section> <h2>……….</h2> <p> …………………………</p> </section> <section> <h2>………..</h2> <p>…………………………. <p> </section> </body> Examples of Section Tag Example 1: In this example, we use the HTML "section" element...

3 minutes read.

HTML Forms

Forms are required when we want to collect data from the user. Html forms consists of different fields to take user inputs such as: input, text area, checkbox, password, radio...

4 minutes read.

HTML Headings

The titles and subtitles of our webpages are known as HTML headings. Let’s not talk about webpages but giving heading to almost everything like normal paragraphs, articles or let it...

2 minutes read.

HTML Form Action

The <form> tag has an attribute named action that contains a URL. The HTML action attribute defines the webpage URL on which you want to send the data after submitting...

4 minutes read.

HTML <sup> Tag

The HTML sup element is used to describe one or more superscript contents. The sup tag shows a text which is presented above the regular line and half the length...

2 minutes read.

HTML <sub> tag

The sub element in HTML is used to describe one or more subscript texts. If The sub tag shows the text which is presented in a smaller font and below...

2 minutes read.

HTML <script> Tag

For embedding a client -side script, we use script tag in html tag. This <script> tag can be used for containing scripting statements. It can also point another external script file...

2 minutes read.

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

7 minutes read.

What is a Container tag?

In HTML, there are different types of tags or say instructions which make the developer specify various elements in the document and make the browsers understand what to display. Tags in...

5 minutes read.

HTML Form Input Types

HTML Form Input Types An important element of the HTML form is < input type= "> in HTML. The type attribute of the input element can be of different types, which...

8 minutes read.

HTML <samp> tag

The Samp tag in HTML is used for defining the sample output from the computer program. This tag is a phrase type tag and a container tag that means the...

2 minutes read.

HTML <strike> tag

The HTML <strike> tag is used to specifies strikethrough text. The tag is deprecated now and <del> tag is used in HTML files instead of it. All the global and...

2 minutes read.

HTML Background Image

Inserting image in HTML An image (technically digital image) in HTML or even in general technical aspects, is a binary representation of visual information. By visual information we mean, in the...

8 minutes read.