During week 8 we began learning HTML and CSS code, I had previously worked with Html code during secondary school, so I was already familiar with the basics, hence I was quick to get the hang of the code and what we were doing. The part I hadn’t done previously was using a separate CSS doc, however I found it was nothing too complicated. The first version of the site was getting the relevant content put in from a text file, and then using CSS to make a blank canvas to work with. The second week we started to add design elements to the site such as a fixed navigation for each section, adding colour and hyperlinks. We also played around with the font meaning it could be set to Baskerville font therefore be more appropriate for the content of the site. I went with a dark background as this is easier on the eyes and then yellow as a simple accent colour, I had no reason for choosing yellow as I knew this was just practice.
[version1] (https://amcstay.github.io/BaskervilleFinal/baskerville.html)
[version2] (https://amcstay.github.io/BaskervilleFinal/baskervilletwo.html
Week 3 was when the site started to come together as, with the addition of images, footer, table and colour section the site began to look more like a proper site. The image used was provided so I didn’t need to get one may self, but I was happy that it went well with the yellow accent I was using. Adding a table was something that I hadn’t done previously but it was verily easy to understand and really made the site have more diversity in the way it looks, as previously the content was only centered, so having columns to divide the content was good. Another part of code that I hadn’t worked with was the code for the icons that linked to emails, social media, as it was nice to be able to customize the icons to match the theme, I was using rather than making a button from an image off the internet.
[version3] (https://amcstay.github.io/BaskervilleFinal/baskerville3.html)
The final version was adding grid image and fixing up certain parts. For the images I used two that I had from previous research for another project which were Baskerville themed I had no problems get the images to align horizontal, however I did have to go into one of the images and adjust the height to match. I had some issues with the navigation covering the part it was linked to, however I was able to fix this, as I also had this issue with another website project, where I struggled for a while for a fix, but once I found the answer, I was able to copy the code from my other site to this one. Overall, I’m quite happy with the outcome and I believe everything we covered is working correctly.
[version4] (https://amcstay.github.io/BaskervilleFinal/baskervillefinal.html)