Here I have designed a frontend-only website for a rock-pop music band of the 60s called "The Monkees". This website is composed of a single scrolling page with 4 sections and a second page for getting in contact with the band.

The scrolling page has 4 the following sections: a. The home: Big image of the group band. b. About: Here you can get to know about their history and their members. c. videos: here you can watch a performance of the band. c. Music: you can choose between 4 songs to listen.

The contact page contents a form where the user can ask the band to perform for an event or party.

Both pages have a navbar that allows the user to navegate between themselves and to the different sections of the scrolling page. They also share the footer, where you can find direct acces to the contact page and the social media links ( Facebook, Twitter and YouTube).

This website has been designed to offer the fans, new and old, a nice experience where they can get to know more about their favorite band. The visitors of this website will be able to learn more about the history of the Monkees, who were their members, watch their videos and listen to clips of their back catalog.

-As a user, I would like a website with the music and videos of my favorite band, then it should be a section for each of these. -As a user, I would like to know as much as possible about my favorite band, then there should be a section giving information about them. -As a user, I would like to contract the band for a party, then it should be a section where I can contact with the band. -As a user, I would like to check their facebook, twitter or youtube. The website should allow me to visit also those sites.

The wireframe of this project was made with hard paper and pen.

The project consist of a scrolling page, a contact page, a navbar and a footer.

As a user, you have to hover what you would like to check in the navbar and click it. Then, you will be in the section that you have selected. If you want to contract them to perform in a private event, you have to submit a form that is available in the contact page. You can also check their social media by clicking the respective icon in the inferior left corner of the website, and you will be be redirected to a new browser window with the desired content.

The website also give you acces to more information outside the page. If you want to know more over a member, a song or the band itself, you only have to click over the name of the member of interest or the band name, and the site will redirect you to Wikipedia, that is the source of most of the information here presented.

The scrolling page has 4 sections: a. The home: Big image of the group band. b. About: A section divided in 2 columns. b.1 History: A short review about how started this music band and a picture of them. You have acces to more information (Wikipedia) by click the name of the band in the paragraph. b.2 Members: An image of each member with their respectively name and their function in the group. By clicking the interested name, you will be redirected to Wikipedia where there is more information. c. videos: here you can watch them performing Daydeream Believer. d. Music: Displays 4 song, you can chose which to listen to. Each song has its title, the year of release, a short description of the song and an image of its album. Besides, by clicking the name of the some you will be redirected to a Wikipedia section where you can get more information.

Each section of the scrolling page has a buttom to go back to the top.

The contact page contents a form where the user can ask the band to perform for an event or party. The form ask you for your name, the date of your event and a short description of it. All this information can be submitted through the "Send Project Request" buttom.

Both pages have a navbar that allows the user to navegate between themselves and to the different sections of the scrolling page. They also share the footer, where you can find direct acces to the contact page and the social media links ( Facebook, Twitter and YouTube).

Allow the user to acces more videos and songs of the band.

This project was made with HTML5 and CSS3. Besides those, the following tools were used:

Language:English. Libraries: .Bootstrap v4.1.3 Most of the applied style, the Scripts (JavaScript, jQuery and Popper.js) to get functionality in the Bootstrap's components. http://getbootstrap.com/ .fontawesome v5.3.1 The icons for message box, facebook, twitter and YouTube and CopyRight. https://fontawesome.com/icons?d=gallery GoogleFonts. From here I got the font type of the whole website (permanent market).https://fonts.google.com/ .Own CSS style sheet. To make my own styles and overwrite some of the Bootstrap style library.

The whole code was validated through the Markup Validation Service (https://validator.w3.org/). The code was continuously monitored through the "Inspect" function of the Google Chrome Browser. Making sure that the website was completely responsive. The project looks as expected in different browsers (GoogleChrome InternetExplorer).

1 navbar:the navbar in both pages allows you to nav to the exact place you want in the website between them. 2 Each audio and video was first tested separately to check how well were they in the site. 3 Each external link was clicked to check that it redirect you to the place it is supposed to. 4 Form: if you try to submit it empty or with a wrong email address, a message telling you about the relevant error appears.

Problems solved: . The whole website had a right side margin which origen was unkwon to me. I tested each section separately until the margin dissapeared.

Problems found by the code validator and solved: . CSS: #c2ffa3e0 is not a valid color 3 or 6 hexadecimals numbers : 0.5rem 1rem #c2ffa3e0. . HTML: Stray end tag img. I took out all the tags. . HTML: Duplicate ID navbarDropdown. I changed ID name in the second case.

This project is available in the GitHub platform under the name https://rasquin.github.io/project1/ The wareframes are located in assets/wareframes/wareframexs.png https://github.com/Rasquin/project1/tree/master/assets/wareframes

The text for the "History" section was copied from Wikipedia https://en.wikipedia.org/wiki/The_Monkees The information for the "Micky Dolenz" section was copied from Wikipedia https://en.wikipedia.org/wiki/Micky_Dolenz The information for the "Michael Nesmith" section was copied from Wikipedia https://en.wikipedia.org/wiki/Michael_Nesmith The information for the "Peter Tork" section was copied from Wikipedia https://en.wikipedia.org/wiki/Peter_Tork The information for the "Davy Jones" section was copied from Wikipedia https://en.wikipedia.org/wiki/Davy_Jones_(musician) The text for the "Last Train to Clarksville" section was copied from Wikipedia https://en.wikipedia.org/wiki/Last_Train_to_Clarksville The text for the "I am a Believer" section was copied from Wikipedia https://en.wikipedia.org/wiki/I%27m_a_Believer The text for the "Stepping Stone" section was copied from Wikipedia https://en.wikipedia.org/wiki/(I%27m_Not_Your)_Steppin%27_Stone The text for the "Daydream Believer" section was copied from Wikipedia https://en.wikipedia.org/wiki/Daydream_Believer

The photos, audios and the video used in this site were obtained from the project-assets repository (stream-1/band-assets) The imagen for stepping stone was copied from Wikipedia https://en.wikipedia.org/wiki/I%27m_a_Believer#/media/File:The_Monkees_single_02_I%27m_a_Believer.jpg

The brief for this project was given by Code Institute. I received inspiration for this project from my grandmother, who lived and enjojed the 60s. I was listening to her playlist during the early part of the project.