Imagine some beautiful pictures in a shabby gallery. Would you want to take a selfie with it for your Instagram? You probably won’t. So, let me help you a little.

Here’s a beautiful image gallery that I built:

Did you like it? Do you want to know how I built it? or, let me tell you how to build one for yourself using HTML and CSS. Keep reading!

So, to begin with, you need to give a skeleton to the to be built image gallery. For this, You may need to use some HTML tags like:

  • The DIV tag(<DIV></DIV>)

The DIV tag defines a division in an HTML document. Here we may also use it to contain some other HTML elements so that we can allot some space to those elements and later format them as a whole group.

  • The IMG tag(<img src=”1.jpg” alt=”img”>)

The name itself says everything about this particular tag. You use this to embed an image in an HTML page. It has to be written with some attributes containing the information of the image. For example, the “src” attribute specifies the path to the image and the “alt” attribute specifies an alternate text for an image.

  • h1, h2, h3….h6 tags(<H1></H1>)

These tags are used to define a heading in an HTML document. The size of the heading decreases with the increase in the number of the tag. It’s a good practice to start with h1 and not skipping levels of the tags.

Now if you want to give any hierarchical relation to your gallery items you may use the <SECTION></SECTION> tag instead of a <DIV></DIV> tag.

Ok, now go and get some amazing pictures and add them to your page.

Before you start decorating the gallery you need to decide on what element you will be styling.

Here are some of the ways to identify an element so that you may style it.

  • “class=”” ” attribute

This attribute is used to specify one or more classes of an element.

  • “id=”” ” attribute

This attribute specifies a unique id to an element. Any two elements cannot have the same id.

CSS selectors:

  1. *{} : Selects all the elements in the page.
  2. .classname{}: Selects the class whose name is used. ex, .box{}
  3. #id{}: Selects the element with the id used. ex, #heading{}
  4. element{}: Selects the element mentioned. ex, div{}

CSS References:
Here are some of the CSS references I used to build the above image gallery.

  1. background 

    used as a shorthand for all the background properties like background-image, background-visibility, background-repeat , etc…

  2. z-index 

    used to set the stack order of an element.

  3. font 

    used as a shorthand for all the font properties like font-family, font-weight, font-size.

  4. position 

    used to specify the position method for an element(static, relative, or fixed)

  5. transform

    used to apply a transformation to an element(2D or 3D). transform-style and transform-origin are also used along with it.

  6. transition 

    used as a shorthand for all transition properties like transition-property, transform-duration , etc…

  7. box-sizing 

    used to specify whether padding and borders are included in the calculation of the box-size of an element.

  8. float 

    Specifies whether an element floats or not.

  9. color, margin, opacity, border 

    these references define the color, defines the size of a margin of a box, specifies the opacity of an element, and defines the size of the border of a box.

Pseudo-classes in CSS:

These are specific states of an element.

for example:

  • :hover : Selects when the mouse hoveres over the specifies element.
  • :not(selector) : Selects every element that is not of the specified selector in the bracket.
  • :link : Used as a:link and selects all unvisited links.
  • :visited : used as a:visited and selects all the visited links.

There are a lot more of these which you can use according to your need.

Use the above mentioned technical stuff and apply your creativity to make an amazing image gallery.

Started Thread

Get involved!

Get paid for what you write

Register yourself now to submit your story......


No comments yet