freeCodeCamp project — level up your tribute page

Photo by Markus Spiske on Unsplash

We are surrounded by digital products. Every single web page or application on the internet uses energy to store the media and files, to process our requests, and support the infrastructure. Some services are used by millions, some are not that popular. Every day people are learning how to code and dreaming about getting into IT and transforming their career. And you might be one of them, looking for ways to create your portfolio and practice your skills.

ith this article I am starting a series based on popular resource — Freecodecamp. While there are already many tutorials out there, I would like to focus on sustainable software development practices and show that they can be used right from the beginning by anyone. In each article I will be exploring one specific topic that is relevant for the specific project.

Tribute page is the first project that is introduced as a Basic Front End project, where you need to fulfill two User Stories:

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

After completing few first lessons, you already known the basics of HTML. It’s time to dig dipper in responsive images, add few details and new functionality to transformed your basic project.

Structure of the document

First, you want to make sure that you are following the best practices of writing HTML document. There are many good articles about this, but I found these the most useful:

Here’s what I’ve fixed in my project:

  1. Checked that I don’t mix HTML and CSS in one document.
  2. Removed unnecessary div elements. I’ve added borders to the elements and styled them in different colors, to ensure that I don’t clutter my document. For example, in the beginning, I had an additional row with a column with the image inside, and then I realized that just image would work better.
  3. Included elements like <header>, <footer>, <article>, <aside> into my structure.

Embedded Elements

My tribute page is to Ukrainian Singer “Kuzma” Skryabin, and I think his songs from SoundCloud, embedded into the page complement the story about him.

There are no restrictions about whom you can write a tribute page. So use your creativity and add something about the person — like a video or a map with the favorite place. Nowadays so many services provide staff you can embed into your page with <iframe> element, and all you have to do is just copy the code and use it in your page.

Responsive design

Responsive images are important part of sustainable software development — by reducing the sizes of the images and providing right image to each device you reduce the total page size and improve performance, therefore save energy.

There’s a free course about responsive images and how to use <scrset> elements.

To be honest, I’ve spent a lot of time on this, trying to figure out why the images do not change as they should. Here’s what I found out:

First, both my laptop and cellphone has a high pixel density, and the parameters I was using were too small. I needed to increase the sizes of images and use a variety of emulated devices from developer tools.

Second, the technologies improved a lot, since most of the articles about <scrinset> were written. If you already have a high-quality image in cache, your browser won’t download a lower quality image. So when you do your testing on computer, clear cache, then start with the smallest size, and make it bigger, not the other way around.

I would like to emphasize that not all the images are salable in the first place. And the worst thing that you can do to the image is to mess up it’s original proportions. Please, don’t do that!

Keep proportions the same!

To auto-generate the images for variety of devices I use this tool.

An image that can be cropped without loosing the context
An image that can’t be cropped for all view ports

In some cases you might consider using a different image for a each viewport. That’s exactly what I’ve done for my tribute page:

Different images for responsive design

Links to my examples and final tribute page:

http://service-design-automation.info/example1.html

http://service-design-automation.info/example2.html

http://service-design-automation.info/example3.html

https://codepen.io/valeriyaS28/pen/gGBRRN

Hope you’ll find this useful.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Valeriia Protsko

My story is about making sense of technologies, business process workflows, service design, and automation. My blog = my opinions.