This part of the module is completely knew to me and it took me right until the last week until I felt confident using it. It really was a process of trial and error and learning from my mistakes. There was a few times I hit a wall with certain parts, and there are still some areas I’m not 100% sure of, but I carried out some background research into HTML firstly and made notes which I referred back to.
Link to Baskerville Github:https://github.com/ciaraffraser/baskerville1
I found the introduction to HTML quite daunting and overwhelming. I had zero experience using it and only recognised it as a set of coloured words. However, once I started marking up my Baskerville file, I slowly found it less overwhelming, become more aware of what different parts did and why.
Looking at the basics first of the domain name, index and what a good and bad structure of HTML would be was a good place to start. I recognised these from being on the internet and social media, but didn’t know what the different parts stood for and did. The next step was to look at the details of HTML, the tags and elements. These were straight forward in that, what they were named is what they did. While I know I will understand them better, as in when to use strong over bold, once I start adding those details to my own HTML file. After going through the basics we would need to start, I was still confused as I wasn’t sure how all the parts would come together.
Github and Code were something I had to learn from scratch and it took me a while to get the hang of how it worked. At first, I just didn’t understand how it worked so I made notes from books that were said to useful and watched back on the lectures and created a walkthrough list on how to set up a GitHub repositories right down to the final link. I used this list regularly and found it a good way of gaining confidence in knowing what I was doing.
Over the next weeks, I added to my Baskerville, creating multiple version which documents it’s progress. In my first version, the main focus was to create the Github repository and present the text onto the page with headings and split into paragraphs. My next step was to add some navigation to the page with included top and bottom links and also in house navigation between the different sections. Before moving onto CSS, I added a few lists to the end of my file, as I wanted to do as much as possible so I became comfortable using the apps, and I found the best way to do so was practice.
Link to Baskerville Version 1: https://ciaraffraser.github.io/baskerville1/baskerville-version-1.html
Link to Baskerville with navigation: file:///Users/ciara/Documents/GitHub/baskerville1/baskerville-version-2%20copy.html
Link to Baskerville with lists: file:///Users/ciara/Documents/GitHub/baskerville1/baskerville-ordered-list-and-links.html
It was after getting to this point, that I was introduced to CSS. Again this was something completely knew and I was nervous about it as I had just got my head around HTML. However, I found this more straight forward, as I had knowledge on HTML and was more confident with using the apps. I relied heavily on the book ‘HTML & CSS” by Jon Duckett to help me work through the last few weeks. In version 2, I focused on adding simple areas of colour to the text and navigation. At this point I was still working on working out the padding and spacing between the larger areas of writing. I introduced my first image in version 3, this wasn’t as complicated as I thought it would be. I also introduced areas of colour for some sections in the background. It was a tedious process when I was changing small details like indents and small details like the bullet points. In my fourth and final version, I worked on the fine details of padding and spacing specifically and adding in different images.
Link to Version 2: https://ciaraffraser.github.io/baskerville1/baskerville-version-2.html
Link to Version 3: https://ciaraffraser.github.io/baskerville1/baskerville-version-3.html
Link to Version 4: https://ciaraffraser.github.io/baskerville1/baskerville-version-4.html
FINAL THOUGHTS…
Over the past few weeks, I have taken on a lot of new information in terms of HTML and CSS and I feel a lot more confident with it now. It really was a learning as I go process, which I enjoyed at times, but did struggle at points with some elements.
In terms of my final outcome of my Baskerville file, I think I took all the new things I learnt and put it into my work. While there are areas that still need improving, I am happy with how it turned out. I decided to keep the purple colour scheme as I felt it suit the context and I liked how it complements the plain background. An issue I had was the. I added the feature of opening a new tab for links in the footer, it did the same for the navigation bar, and I struggled to reverse this, so that it worked as it did in the other versions. Other than this I completed the rest of my markup to the best of my ability and I am pleased with the outcome.