Your challenge is to build out this landing page and get it looking as close to the design as possible.
This project focuses mostly on HTML, CSS and layouts with CSS.
You can use any tools you like to help you complete this project. So if you&#x27;ve got something you&#x27;d like to practice, feel free to give it a go.
Your users should be able to:
<ul>
<li>View the optimal layout for the site depending on their device&#x27;s screen size.</li>
<li>See hover states for all interactive elements on the page.</li>
</ul>
Don&#x27;t forget to share your submissions with the community to get feedback. All the best.

A photo gallery website. This will test your HTML and CSS skills. All the designs are available inside the project.

Welcome to the HTML5 Photo Gallery Project. In this guided project, we&#x27;ll create a photo gallery using a set of images that are already provided for you. You&#x27;ll find these images in the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">assets</code> folder, and we&#x27;ll be using HTML5 and CSS3 to bring this project to life.
For a glimpse of the final design, check out the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">design</code> folder, which includes screenshots of the completed project for both desktop and mobile views.
Before you dive in, please ensure that you comprehend the following requirements for the project:
<ol>
<li>Construct a gallery using 12 specific images that have been pre-selected for you.</li>
<li>Make sure the images adapt to different screen sizes, filling the entire width of the page.</li>
<li>Include a footer that mentions the name of the Project.</li>
</ol>
With the basic requirements clear, let&#x27;s get started.
<h3>Boilerplate Code</h3>
In this step our goal is to set up the basic boilerplate code and link the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">style.css</code> file with the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">index.html</code> file.
Before jumping into the code of the project, make sure that you understand the basic structure of the HTML5 document and what the boilerplate code does:
<ul>
<li><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;!DOCTYPE html&gt;</code> tag: Tells the browser that we are using HTML5 and not any previous versions of HTML.</li>
<li><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;html&gt;</code> tag: Tells the browser that the content inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;html&gt;</code> tag is, well, HTML! Adding a <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">lang</code> attribute to the html tags tells the browser about the language of the content being used. We add <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">lang=&quot;en&quot;</code> for the browser to infer the language of the page to be english.</li>
<li><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;head&gt;</code> tag: Tells the browser that the content inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;head&gt;</code> tag is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Metadata" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">metadata</a> about the HTML document.</li>
<li><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;body&gt;</code> tag: Tells the browser that the content inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;body&gt;</code> tag is the content to be displayed on the browser page.</li>
<li><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;link&gt;</code> tag: Tells the browser that we want to link an external file with the HTML document, and process it.</li>
</ul>
It is advised that you go though the <a href="https://codedamn.com/learn/html-css" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">HTML &amp; CSS Fundamentals course</a> for a comprehensive and detailed understanding of these tags and how to write HTML and CSS.
<h3>What will you do?</h3>
In this step you are tasked to link the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">style.css</code> file with the existing <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">index.html</code> document. This ensures that the all the styles written in the CSS file are applied to the document
<ol>
<li>
Add a new <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;div&gt; &lt;/div&gt;</code> tag inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;body&gt;</code> element. Give the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;div&gt;</code> element an id <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">gallery-container</code>, this element will act as a container and will have all the gallery images inside this element.
</li>
<li>
Create and link the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">style.css</code> file with the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">index.html</code> file. Add the following line of code inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;head&gt;</code> tag of the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">index.html</code> file, using the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;link&gt;</code> tag.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-html" style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;</code></div></pre>
Here the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">rel</code> attribute specifies the relationship between the HTML document and the linked file. The <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">href</code> attribute specifies the path to the linked file.
</li>
<li>
Add some styling to the document. Set <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">margin</code> and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">padding</code> to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">0</code>, and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">box-sizing</code> to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">border-box</code>, for all the elements of the HTML Document.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}</code></div></pre>
<code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">margin</code>, <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">padding</code> and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">box-sizing</code> are the CSS properties that are used to set the spacing between the elements of the HTML document.
By settings these values globally to all the elements, it removes the different pre-defined margins and paddings of the elements (which are set by browsers), making it easier to style. This is commonly refererd to as <a href="http://web.simmons.edu/~grovesd/comm244/notes/week4/css-reset" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">CSS Reset</a>
</li>
<li>
Set the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">background-color</code> of the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">body</code> element to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">#242629</code>.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">body {
	background-color: #242629;
}</code></div></pre>
The six digit value is written in hexadecimal (base 16) and here
<ul>
<li>the first two digits <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">24</code> represent the intensity of Red</li>
<li>the next two digits <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">26</code> represent the intensity of Green</li>
<li>the last two digits <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">29</code> represent the intensity of Blue</li>
</ul>
</li>
</ol>
Now that we setup the basic boilerplate code and linked the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">style.css</code> file with the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">index.html</code> file, let&#x27;s move on to the next step and create the HTML Structure Required

Getting Started

In this step the main goal is to build the HTML structure for the gallery project, the structure is a simple nested structure of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">article &gt; img + span</code> tags. It is okay if you are not able to understand this notation.
Here the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&gt;</code> means the child of the parent, the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">+</code> means the sibling of the previous element:
<ul>
<li><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">article</code> is the parent</li>
<li><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">img</code> &amp; <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">span</code> are the siblings</li>
</ul>
<h3>What will you do?</h3>
<ol>
<li>
Create the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;article&gt;</code> tag inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">div#gallery-container</code> element:
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-html" style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">&lt;article&gt;&lt;/article&gt;</code></div></pre>
</li>
<li>
Add <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;image&gt;</code> and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;span&gt;</code> tags to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;article&gt;</code> element:
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-html" style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">&lt;article class=&quot;img-container&quot;&gt;
	&lt;img class=&quot;galley-image&quot; src=&quot;&quot; /&gt;
	&lt;span class=&quot;title&quot;&gt;&lt;/span&gt;
&lt;/article&gt;</code></div></pre>
This represents the HTML structure for 1 image. Do this for 11 other images as well.
</li>
<li>
Set the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">src</code> attribute of each individual <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;img&gt;</code>:
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-html" style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">&lt;img src=&quot;assets/01.jpg&quot; /&gt;</code></div></pre>
Make sure to set the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">src</code> attribute refers to all the images in the assets folder.
</li>
<li>
Adding <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">lorem</code> text to the span tag. <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">lorem</code> refers to random placeholder text. You can add custom text if you want.
The text we are adding to the span tag represents the title of the image. So we&#x27;ll restrict the word length to three.
<code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">Emmet</code> is available on Codedamn Playgrounds, you can directly write <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">lorem3</code> and hit space to generate three words inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;span&gt;</code> tag. Or you can choose to write any three words of your choice for all the span tags.
</li>
</ol>
<h4>For Geeks</h4>
It can seem daunting to write the HTML structure for the gallery project, well it is not. You can always make use of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">emmet</code> to create a complex HTML structure with a single line of code.
<pre><code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">article.img-container*12&gt;img.gallery-image[src=assets/$.jpg]+span.title&gt;lorem3
</code></pre>
You can use this structure to create the same HTML Structure that we have written manually. You can learn more about <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">emmet</code> <a href="https://docs.emmet.io/abbreviations/syntax/" target="_blank" rel="noopener nofollow noreferrer" class="text-blue-500 hover:underline">here</a>.

Building the HTML Structure

Let&#x27;s start adding styles to our page.
Flexbox layout is the best way to arrange elements in a flexible way. It is a great way to organize your page and make it responsive across all viewports. The breakdown is as follows:
<ol>
<li>
Make the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">#gallery-container</code> a flex container.
Our agenda is to make the images responsive and occupy the whole width of the page. To do that, we need to make the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">#gallery-container</code> a <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex</code> container.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">#gallery-container {
 display: flex;
 flex-wrap: wrap;
}</code></div></pre>
</li>
<li>
Set the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">width</code>, <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">height</code> and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">object-fit</code> of the images, so that they maintain the aspect ratio and occupy the whole width of the article.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">.gallery-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
}</code></div></pre>
</li>
<li>
Set the position of the article with <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">.img-container</code> to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">relative</code> and set the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex</code> property to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">1 0 100%</code>. The <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex</code> property is a shorthand for <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex-grow</code>, <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex-shrink</code> &amp; <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex-basis</code> properties combined.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">.img-container {
 position: relative;
 flex: 1 0 100%;
}</code></div></pre>
With this, the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex-container</code> will occupy the complete width of the page.
</li>
<li>
Make sure that <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">.title</code> is visible properly.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">.title {
 position: absolute;
 bottom: 0.5em;
 left: 0.5em;
 color: white;
}</code></div></pre>
</li>
<li>
Add the media queries so that the images are responsive across all viewports.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">@media (min-width: 768px) {
 .img-container {
 flex: 1 0 50%;
 }
}

@media (min-width: 1280px) {
 .img-container {
 flex: 1 0 33.333%;
 }
}</code></div></pre>
</li>
</ol>
We have finally completed the gallery section and made it responsive. Next up, adding the footer!

Adding Styles

Now that we have completed the gallery, it&#x27;s time to add some finishing touches, by completing the footer of the project.
<ol>
<li>
Add the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">footer</code> tag as a sibling to the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">#gallery-container</code>.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-html" style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">&lt;footer&gt;&lt;/footer&gt;</code></div></pre>
</li>
<li>
Create two <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;p&gt;</code> tags inside <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">footer</code>. Create the first <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;p&gt;</code> tag and give it an <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">id</code> of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">footer-title</code>. Add the text &quot;Multiverse Gallery Project&quot; to it.
</li>
<li>
For the second <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">&lt;p&gt;</code> tag, give it an ID of <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">about</code> and add the text &quot;about&quot; in it.
</li>
<li>
Add the icon <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">assets/info.svg</code> inside the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">#info-icon</code> tag. With this, the HTMl Structure is complete.
</li>
<li>
Set the background color of the footer tag to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">#1f2224</code>.
</li>
<li>
We also need to make the text color of the footer light. So, make the color of the footer <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">white</code>.
</li>
<li>
Fix the footer, by adding <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">position</code> as <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">fixed</code> and setting the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">left</code> and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">bottom</code> values to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">0px</code>.
</li>
<li>
Add a <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">flex</code> container to the footer and give equal space between the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">about</code> and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">footer</code> title. Set the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">justify-content</code> to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">space-between</code> and <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">align-items</code> to <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">center</code>.
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Courier New&quot;, monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none">footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
}</code></div></pre>
</li>
</ol>
Congratulations, you have come a long way! You have completed the project and learned a lot of new things starting from HTML Code to CSS Layouts. Submit this project using the <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">Submit Project</code> button on the bottom left of your page to get a personalised Code Report for your code and suggestions for some improvements that can be made.

Multiverse HTML5 Photo Gallery

Project Description

Get involved with the community

Ready? Start Building

Milestones