https://joebaileyphotography.com
Index – Desktop 
Contact Page – Desktop 
Footer – Desktop 
Gallery – Desktop 
Gallery – Tablet 
Gallery – Mobile
Example HTML with comments:
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joe Bailey Photography</title>
<meta name="description" content="Joe Bailey is a student photographer currently based near Cambridge, UK. As well as photography he enjoys web design and writing.">
<link href="CSS/index.css" media="all and (min-width: 1110px)" rel="stylesheet" type="text/css">
<link href="CSS/indexMedium.css" media="all and (min-width: 830px) and (max-width: 1110px)" rel="stylesheet" type="text/css">
<link href="CSS/indexSmall.css" media="all and (max-width: 829px)" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#488fc0">
<meta name="theme-color" content="#488fc0">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js" defer></script>
<meta property="og:title" content="Joe Bailey Photography" />
<meta property="og:description" content="Joe Bailey is a student photographer currently based near Cambridge, UK. As well as photography he enjoys web design and writing." />
<meta property="og:image" content="/android-chrome-512x512.jpg" />
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#488fc0",
"text": "#c8c8c8"
},
"button": {
"background": "#174172",
"text": "#7d7d7d"
}
},
"theme": "edgeless",
"content": {
"href": "https://joebaileyphotography.com/cookie-policy.html"
}
})});
</script>
</head>
<body>
<!--Header Image and Text-->
<header>
<img src="Images/Index/Index%20Header.jpg" class="Headerimage" alt="Joe Bailey Photography" width="100%" height="100%"/>
<div class="title">Joe Bailey Photography</div>
<div class="subtitle">Capturing memories, not images</div>
</header>
<!--Navigation Menu-->
<nav>
<svg width="84%" height="100.5" viewbox="1200 0 1 100">
<polygon fill="#FFFFFF" points="1612.5,78 0,78 0,0 1575,0 ">
<div class="navtitle">Joe Bailey Photography</div>
<div class="navlinks">
<a class="active" href="Index.html">Home</a>
<a href="About.html">About</a>
<a href="Portfolio.html">Portfolio</a>
<a href="Blog.html">Blog</a>
<a href="Projects.html">Projects</a>
<a href="Gallery.html">Gallery</a>
<a href="Contact%20Me.html">Contact Me</a>
</div>
</polygon>
</svg>
</nav>
<!--Important links with images-->
<div class="memoriestitle"><p>Memories are important</p></div>
<div class="memories"><p>During my early life, my Mum would always take photos of me. She’d record every milestone and every day trip. I started to have turns with the camera as I grew up, eventually purchasing my own in 2013. Later, I was the one taking the camera everywhere. Then adding to my collection of lenses, flash and filters to further progress my photographic capabilities. Now, I even specialise in the subject at Sixth Form!</p></div>
<div class="about">
<svg class="aboutsvg" viewBox="0 0 1920 800" preserveAspectRatio="xMinYMin meet" width="100%" height="800">
<defs>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="Images/Index/About1.jpg" />
</pattern>
</defs>
<polygon fill="url(#pattern1)" points="925,800 0,800 0,300 1050,300 ">
</polygon>
<a xlink:href="about.html">
<g class="aboutlink">
<polygon id="aboutlink1" fill="rgba(40,40,40,1)" points="1026,700 0,700 0,575 1050,575 "></polygon>
<text id="text" x="650" y="660" font-family="Lato" fill="white">ABOUT</text>
</g>
</a>
<defs>
<pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="Images/Index/About2.jpg" />
</pattern>
</defs>
<polygon fill="url(#pattern2)" points="1920,800 925,800 1125,0 1920,0 ">
</polygon>
<a xlink:href="Contact%20Me.html">
<g class="contactlink">
<polygon id="contactlink1" fill="rgba(40,40,40,1)" points="1920,575 982,575 1013,450 1920,450 "></polygon>
<text id="text2" x="1075" y="535" font-family="Lato" fill="white">CONTACT</text>
</g>
</a>
</svg>
</div>
<!--Important links with images for mobile devices-->
<div class="phoneabout">
<a href="About.html"><div class="phonelinks">ABOUT</div></a>
<img src="Images/Index/About1.jpg" class="aboutimg" alt="About" width="100%" height="150px"/>
<a href="Contact%20Me.html"><div class="phonelinks">CONTACT</div></a>
<img src="Images/Index/About2.jpg" class="aboutimg" alt="Contact" width="100%" height="150px"/>
</div>
<!--Instagram widget showing my latest posts-->
<div class="insta">
<p>Follow what I'm up to on Instagram <a href="https://www.instagram.com/joebaileyphotography/">@joebaileyphotography</a></p>
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/481198" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:75%; "></iframe>
</div>
<!--My favourite photography quote-->
<div class="quote">
<img src="Images/Index/Quote.png" height="auto" width="100%" alt="The whole point of taking photos is so that you don't have to explain things in words. - Elliott Erwitt"/>
<div class="quoteoverlay">
<div class="quotes">" The whole point of taking photos is so that you don't have to explain things in words "</div>
<div class="elliott">- Elliott Erwitt</div>
</div>
</div>
<!--Link to my blog-->
<div class="blog">
<p>If there’s one thing that I’ve learnt from my venutre into photography over the past 4 years, it’s that you are never done learning. You’ve mastered this skill? OK, get ready for the next. Photography is an ever expanding field of interest for people across the world. It’s a truly universal language, creating friendships no-one thought possible. Photography continues to grasp my interest as I further my career into the deep realms of the subject. </p>
</div>
<div class="blogposts">
<a href="Blog.html">
<img width="16%" src="Images/Index/blog.png" alt="Recent Blog Posts"/>
<p>Blog Favourites ></p>
</a>
</div>
<!--Footer-->
<footer>
<!--Link to subscribe to Newsletter-->
<div class="newsletter">
Stay Connected. <a href="http://eepurl.com/bBnwk1">Subscribe to the Newsletter</a>
</div>
<!--Legal content and social links-->
<div class="legal">
<div class="socials-footer">
<a href="https://www.facebook.com/joebaileyphoto/" class="fa fa-facebook"></a>
<a href="https://www.instagram.com/joebaileyphotography/" class="fa fa-instagram"></a>
<a href="https://500px.com/joe_bailey_photography" class="fa fa-500px"></a>
<a href="https://www.flickr.com/photos/joebaileyphoto" class="fa fa-flickr"></a>
<a href="https://www.pinterest.co.uk/billybidley26/" class="fa fa-pinterest"></a>
<a href="https://www.youtube.com/channel/UCb85Oly9IKhBWOV5cjkpemw" class="fa fa-youtube-play"></a>
</div>
<p>© 2018 Joe Bailey Photography. All rights reserved. | <a href="cookie-policy.html"> Cookie Policy </a> | <a href="privacy-policy.html"> Privacy Policy </a></p>
</div>
</footer>
</body>
</html>Merit:
There is rich media on the projects page of my website which features a video.
Distinction:
Optimisation:
I have minified the javascript files on my website to decrease the download size of my pages. This will make them load faster.
I have optimised my images by making them as small as possible without losing image quality. This again decreases download size and speeds up the website.
Images used for the portfolio and gallery are hosted on Flickr’s website which will be faster than my own as they are a large company with more robust servers.
I have made sure that there is no redundant code in my website.
I have enabled gzip compression on my server which makes text transfers smaller, resulting in a faster website.
Comments have been removed on the production version of the site to increase security and minimize loading times.
Site Management Tools:
I have opted against using a Content Management System (CMS) as I wanted to learn HTML, CSS, and JavaScript. By coding the website it is much more customisable and I can create anything I want.
I have used some tools such as plugins to speed up web development.
I have used Featherlight which is a small and lightweight Lightbox widget. I have used this on my gallery page.
I have used a font plugin to enable me to add the social icons in the footer and contact page.
I have used a plugin to link to my Flickr album on the portfolio page.
I have used a widget on my homepage to display my most recent Instagram posts.
Search Engine Optimization:
I have used Google’s Search Console to add my sitemap and monitor my search performance. I have used the following website checker: https://seositecheckup.com/ to improve my score on it resulting in increased performance in Search Engines. I have linked my website to social media, resulting in a larger online presence, making y website come higher up in search results. I have a mobile-optimized version of the site, which Google recommends, and I use HTTPS. I have included appropriate favicons and titles and descriptions for all of my pages.
