In this post I am going to tell you how I created the Cue80sMusic website.

How do you design a website?

You could copy a website design if you have the skills. Or you could just dream up your own design. I created the Cue80sMusic website because I wanted to see the music I like to listen to in a way I like to see it. How do we see Music, stupid question, unless we read it we can’t see it except by watching a video, which we do but of course we listen to the music, and since YouTube is all about Video and given that a YouTube has a licence to broadcast those videos, and since they have the embed feature, then why not use it to fit my personal requirements. Ultimately Cue80sMusic was also an exercise in web development for me.

The layout was probably my 3rd design. 1st was OK but too colourful. 2nd was too basic. What I did like about my Cue80sMusic website was the Rockola section, which I spent a lot of time on, I wanted something that had a retro look or a Rockola Disc machine. I think I did ok considering it’s almost all designed around CSS. Custom Style Sheets used to control the presentation of a website. HTML is not the complex part of front end web development, JavaScript and CSS are the real challenges in front end web development.

The Cue80sMusic Rokola Player designed using CSS.

First of all this website was built using the Dallas Grid system, a version of Flexbox that relies on the Viewport setting in the CSS and HTML header. Viewport is the size of the visible area of the screen in your phone, tablet or PC. Bootstrap is now the common CSS framework for fully flexible websites. I already had a lot of CSS experience so learning to use Bootstrap was easy. The Bootstrap framework is something to learn before using it, CSS is what you learn first and then you know exactly what to ask of Bootstrap. Bootstrap can be used by linking to the Bootstrap CSS files or by downloading, downloading means you can work on website using Bootstrap on a local web server.

Get Bootstrap

Build fast, responsive sites with Bootstrap

Bootstrap image

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

A little more on Bootstrap before I move on. Boostrap allow designers to nest Rows and Colums and completely control the layout and design of the Web Page. You can reproduce any website and design a website in Blocks that display perfectly on Mobile browsers. I love it. Dallas Grid did something very very similar but involved a whole lot more coding.

PHP

PHP is a server side scripting language. that is used to develop Static websites or Dynamic websites or Web applications. PHP stands for Hypertext Pre-processor, that earlier stood for Personal Home Pages. PHP scripts can only be interpreted on a server that has PHP installed. I use WAMP server running Apache Web server. It includes MySQL and Maria DB.

Why I use PHP pages for my website. One advantage I like of using PHP is the INClude function. It means that I can break my code down into smaller sections. So I have a HEADER page on Cue80sMusic, a Content page, a Navigation page and a Footer page. I can use these PHP pages across the website and change the whole website simply by changing one piece of code. For example adding a Navigation item means simply adding a list item. I can also change the footer navigation in the same way. In fact I can keep breaking my web pages down into smaller and smaller sections if I wish, right down to row level.

So Bootstrap and PHP are key components of my website. The other key Components are the Iframe, embed and tables.

More to come…..

Leave a Reply

Your email address will not be published. Required fields are marked *