Setting up the website

For this task I have to code a website using text provided in blackboard. Luckily I have coded using Visual Studio code in the past and recently completed a HTML task in university to refresh my memory.

Guidelines for this task require a new Github repository for the project called 'crocodiles', A clear typographic structure that includes headings, subheadings, and body text. Proper use of HTML elements, both semantic and non-semantic, A design that adapts well to different screen sizes, such as mobile phones, tablets, and computers, A colour palette and typefaces that complement the text and make it easy to read and finally Images or illustrations that go well with the text.

To begin this task the first thing I done was created a new Github repository. Using Github for code is still new to me but as I learned how to do it in week 7/8 it was fresh in my mind which it is good to practice this to get used to using this method in the future. I named the repository accordingly, made sure it was public and clicked the ‘add a README file’ and created it. I then went to the Github app to clone this repository.

Now that I had a folder created in Github I opened it in Visual Studio code and created a HTML file. To quickly create the basic HTML structure I typed html, then clicked html.5.

I changed the title in the HTML accordingly as this is what shows on the weblink.

As HTML is just for content I added in all the text and headings provided in Blackboard I will then later sketch layout ideas when we have covered Style.css in class.

I used week eights’s knowledge to add all the text into paragraphs, headings, quotes, weblinks and a contents page with buttons.

This first part of the task was fairly simple the main issue I had was deciding where to put one of the headings, either ‘Read an extract from…’ or ‘Chapter one: August’. I decided to go with making the Chapter text the heading as I thought the other was too long for a heading and both text are linked. I think a user will read a heading what is shorter rather than a longer one.

I added block quote code to the text to say where all the information was sourced from as I wanted this to stand out but not as a large heading.