Creating my website
Home Page
I decided to start off my website by scratch, starting of with the header/border for the top of the page.
To add my links list onto the page i made an unordered list, and added an a href so that in the future i could add links to them.
I wanted to have the home button hilighted so that it is easy to see. It is quite simple all you have to do is put a Div around the words HTML and using CSS you can add a border, change the colour etc.
I decided to add a search bar so i found a website that provided a standard HTML and CSS search bar template. Using CSS i made a couple adjustments to make the bar look how i wanted it to.
I moved the title 'PoetrySlam' so that it is higher then the menu bar so that when the page is resized nothing overlaps.
I played around with the fonts, seeing which looks the best.
Template Evaluation
For my website template I was given a ready
made basic template to modify, however I decided to start my template from
scratch as it would be easier me to set out the design the way I wanted, and
gave me a chance to expand my skills.
My template consists of a header that
includes the company name/logo and the navigation bars. I then added an image for the central part of
the site where my slide show will be placed. To finish off I decided to create
the footer, this included the search bar that I was able to take the HTML from
a website, which I then modified using CSS. I did then added links to social
media sights and me template was finished.
Creating the template overall was quite
challenging, however after going looking back at code academy and with the help
of CW3 schools I was able to gain skills, helping me create my template.
To move on and improve my website I need to
embed my downloaded font so that it can be seen by others on a variety of
computers. Also I need to create a slideshow that will take the place of my
image. After I complete those two tasks I just need to touch up on everything and
focus more on the actual design aspect of my website.
The next thing i needed to do was embed my font. Using google fonts i was able to find a font that i liked and was easily able to embed the font.
The next thing i had to do was add a slideshow. Finally i was able to find a slideshow on flex slider, I simply followed the instructions given and was able to create this slideshow.
After getting the slideshow onto my website it was time to add some modifications. And to start i wanted to change the background of the slideshow. For this i looked back at the slides CSS unit i found the tag for the background image, which i was able to change by pasting in my own image url.
I was able to add the testimonials by adding an extra Div, adding an header and paragraph. With this i was able to create a border in CSS and arrange the text.
Here you can see i had a problem with the search bar and social media, merging with the slide show.
However using the CSS code position: absolute i was able to move the search bar and social media around the page.
Final page.
About
For my about page i took the social media and search bar from the home page
Using a simple <h1> and simple CSS i was able to add a header and change things such the size, font, and colour.
I added a paragraph to the html with the content for the about page.
I was able to center the text by adding text-align to center.
Next i added these images to the page using image src.
I found that the image kept moving behind the text.
however using the style tag i was able to again use position: absolute and move the image to the right.
I found that when on the about page the home button was still lit.
However to change this i gave the about link a class, and using CSS i was able to move the home button border to the about button.
Events
The events page was pretty simple, started off by copying and pasting the social media and search bar html. Then using the <h1> and <p> i was able to quickly add in the title and content.
Finally was to put the images in using image src.
Gallery
Making the gallery i started off with the title using a <h1>, making slight changes to the colour and size on CSS.
I added the images using image src, and positioned them using position: absolute.
Brochure
For the brochure page i used <h1> to add the title, and copied the search bar and social media buttons html. Finally all i had to do was use img src to add the image, and using CSS position the image with position: absolute.
Contact
For my contact page I started off with copying the social media buttons and search bar from my previous html. Next using the <h1> and <p> I was able to add the header and content, which I was able to modify using CSS.
I thought that my page was looking a little plain so using img src I added in a image
Adding pages links
Too add the links to the different pages firstly i had to make sure all the pages were placed in my website folder. Next using <a href> i was able to link the pages to their names.
Final Evaluation
With my template finished it was time to start adding to the template and build my website to meet the demands of the client.
To start off i needed too find a way to embed my font so that people would be able to view them. After searching around i found that you can actually embed you fonts using google fonts, simple by copying and pasting the link given into my html head.
The next thing that i had to to what add a slideshow which i mentioned in my template evaluation. This was most defiantly the hardest part of this task. After trying out many slideshow i finally found a slideshow on felxislider, in which i was given a template slider that i had to add into the html. The hardest part was linking the javacript to my html especially because there were four different sections. With the template slideshow working i was able to modify the slideshows CSS such as the background and the slides images. After a little research I was able to add the testimonials by adding an extra Div, adding an header and paragraph. With this i was able to create a border in CSS and arrange the text.
After adding my slideshow i had a problem with the search bar and social media, which was merging with the slide show. However i was able to move the search bar and social media around the page using the CSS code position: absolute to move the two down.
My home page was now created and overall i would say that the page has meet all of the required demands from the client and is presented in a suitable manner. Although to improve i think i could of thought about experimenting with the layout a bit more.
Next it was time to create the other pages, starting off with the about page. I was able to take the header, social media and search bar html from the home page and paste it on the about page, which was quick and easy, giving me a basic page template. Using the <h1> tag i added in the title of the page and using CSS i was able to play around with different fonts, colours and positioning.
Next i added in the about content using the basic <p> tag. Although i did have a problem with the text aligning to the left, after a little research i was able to overcome this problem with adding align: center to the CSS. Another problem I found that when on the about page the home button was still lit,however to change this i gave the about link a class, and using CSS i was able to move the home button border to the about button. The page looked a bit plain so i decided to quickly add in a few images using img src, however I found that the right image kept moving behind the text. I was able to add a style tag and use position absolute to move the image right.
The about page was finished, overall i would say that i did encounter a few problems while making this page that i was able to overcome and make the page look presentable. However to improve the page i could of played around with more fonts to make it more interesting.
The events page was next, and i started off by copying and pasting the header, social media and search bars html. Like in the about page i added my title and content using the <h1> and <p> tags. however i did find that i couldn't get the text to separate between each line. After playing around with the html found that if i put each event into a separate paragraph tag it would space out each sentance. Again like the about page i found that the page was a bit empty. Using ing src i was able to add the two photos tom either side of the text using position: absolute.
With the events page finished i would say that overall, the page is simple but eligible and easy to understand. although to improve i could of used a table for the events.
Gallery is next and was a very quick page to make. I started off by again copying the header, social media and search bars html. Next was the title, using the <h1> tag and CSS. I added the images using image src, and positioned each individually using div’s and position: absolute.
The gallery page was now finished and overall i would say that the gallery page is clear and everything fits nicely into place. however to improve this page i could of added something to enlarged the images when clicked or a second slideshow.
For the brochure page i used <h1> to add the title, and copied the header, search bar and social media buttons html. Finally all i had to do was use img src to add the image, and using CSS position the image with position: absolute.
This was the easiest page to create as it didn't need a lot of content and overall i would say that this page is clean and does its job by giving the viewers the brochure. On the other hand to improve this page i could of added a few more images or text to make the page more exiting.
Finally my contact page. I started the same as i did with every design; taking the header, search bar and social media from my previous html. Next using the <h1> and <p> I was able to add the header and content, which I was able to modify using CSS and centre the text by using align: center. However I felt that the page was looking a little plain so using img src I added in a image, aligning it using position: absolute in CSS.
Adding the links to the different pages wasn't as hard as I thought. Firstly I had to make sure all the pages were placed in my website folder. Next using <a href> i was able to link the pages to their names.
Overall I would say that coming from no experience at web design or html coding I have managed to achieve a lot in this unit, and have learned a lot of new skills. Although my website is not perfect and is not up to professional standards, I have still managed to create from scratch, a working and interactive website which includes added features such as a slideshow and search bar.
