Ada's project journal: A simple website in HTML

1461231559791 photo
Ada Kepinska
27 Apr 2016
The issue and the project

My name is Ada and I would like to create a simple coding project of a website on electronic music mixes. My background in coding and technology is limited. It is very standard and a little bit unusual at the same time. 

My background is very standard in a sense that I completed standard IT education (using Microsoft Office package and other WYSIWYG software), and then I learnt a little bit of HTML and CSS, courtesy of Code First: Girls and Free Code Camp London. My background is a little bit unusual in a sense that a number of my close friends are creatives, with activities ranging from DJing to web design. 

My limited abilities clashed with kind encouragement from friends who thought that a personal creative project would be interesting, especially a project related to electronic music, a passion me and my friends share. So this clash brought me to thinking that I need to learn more and that I could develop my knowledge with hands-on experience of building my personal project.    

What the project is about

So the idea is to create a simple website (currently without a name, I welcome suggestions!) which would host electronic music mixes from Mixcloud and some written and visual information on the content.

I want to explore an idea often present in discussions on electronic music, of storytelling. Storytelling is a vague concept which means many different things to different people. Very generally, it means that the whole long set of songs together “tells” a consistent “story.” But how do people do this? I would like to explore this question in two ways. One way is by mixing music and the other is by doing some research on the music and commenting on it, including information on who created what, why I chose that, what my inspiration was, whether there are any relationships between artists, etc. Storytelling is also present in visual arts and literature, and I would also like to explore how these types of storytelling in turn influence perception of the music itself.

How I want to translate the idea into my website

In design of my website, I would like to cater both for people who only come for the music and for those who are like me, and are into both mixes and all the background information. 

I thought I could do that by implementing a solution which would be a twist on what I already do in real life. The way I work in general is to annotate articles heavily. In other words, I have the main text and use margins for extra info. I thought I could use the same principle for my website: have its core (mixes) and then add some extra information around it. 
First draft of what I want my project to be and what I would like the main page to be like. Hidden content is in (), [] is space for the name of my website.

But potentially, that would look messy, would be difficult to follow, and wouldn’t be too-user friendly.

So I thought the main information (what I called the "core") could be a brief intro on what my project is and the mixes underneath, while all the background extra information would be placed around the core but hidden and only visible when you hover over it. Compare with a screenshot of a fragment of my private microblog below. Using the hover option in CSS, I can hide private content and user might see it if they move their cursor around it. That way, I don't break the flow of my blog.
How hover works on a real-life example of my private blog.

By separating mixes from other content, people who are only in for the music could get straight into the music while others could get extra information if they so desired. 
Extra draft of a page beyond the main page. In this update of the design, I thought I could add colourful dots where the hidden content is to signalise to a user that there are extras to see. In a bonus, it would add extra pops of colour to my otherwise simple design.

What is needed

To complete my project, I will need HTML, so I will take a course on HTML from Kalob Taulien, and to host my website, for which I will use advice from a tutorial by Samir Talwar on how to host websites for free using Github.

The plan and timeline

I would like to complete my website in a month and a half, preferably less if possible. During that time I plan to:

  • complete 12 modules of the HTML course per week
  • spend an extra week to get the content of the website (mixes; write-ups) ready 
  • spend around a week (but preferably less) on putting the content and the website together, showing it to people to get feedback, and introducing final edits to have the website up and running, and ready for more content.

How I will stick to the plan

I would like to document my progress in a series of blog notes, so that by the end of the project I have a study journal / case study for future reference for other. I would also welcome feedback as I work through my project and keeping a study journal is the easiest way to inform people about my progress. 

What I would you like to get out of this project

I would like to get a deeper understanding of two great projects of technology: electronic music and a website.

Comments

Get new free tutorials in your inbox

Featured Courses

Upcoming Courses

Latest blog posts

See all blog posts