Similar to my Baskerville files, during my HTML and CSS process and development, I have ended up with four versions of The Street of Crocodiles. This documents how I got from where I began to the end result. I used everything I have learned in the past few weeks to help me build this webpage. While the design is not completely finalised, the basics of the HTML and CSS are complete. I feel like I carried this out well, and was more confident the second time round.

 

Link to Github: https://github.com/ciaraffraser/the-street-of-crocodiles

 

VERSION 1…

https://ciaraffraser.github.io/the-street-of-crocodiles/the-street-of-crocodiles.html

As my first version, this is solely HTML and was the first step where I placed all the information into Code. The furthest I went in terms of design was decided the type of headings and where I place the block quote and what text is in the footer.

 

 

VERSION 2…

https://ciaraffraser.github.io/the-street-of-crocodiles/the-street-of-crocodiles-version-2.html

My focus in this version was adding in the suitable navigations for the different sections of the text and also the top/bottom options. Again, there is no CSS included in this version but it is my next step.

 

 

VERSION 3…

https://ciaraffraser.github.io/the-street-of-crocodiles/the-street-of-crocodiles-version-3.html

This was my first attempt at adding CSS to the Street of Crocodiles file. My main focus as making sure the dark and light sections lined up correctly in the HTML and CSS files. I picked a colour and placed it into Adobe Colour to give me my other colours in the palette. I wasn’t looking at the fonts or images at this point, just wanted to make sure all my padding and spacing was accurate and getting used to the new terms in CSS.

 

 

VERSION 4…

file:///Users/ciara/Documents/GitHub/the-street-of-crocodiles/the-street-of-crocodiles-4.html

This is the version which is the most detailed and I focused the most one. I really liked the idea of using black and white imagery which I used the ink dropper to pick up a colour and then using Adobe Colour again, gave me my colour palette. I also looked at a potential font choice and designed the footer.