Practice – A Street Of Crocodiles

The Street Of Crocodiles

Week 08 – HTML Markup of The Street of Crocodiles

On Week 8 of our course we were asked to replicate what we had done in the workshop but at home with a different piece of text, we were asked to separate a piece of text into corresponding HTML tags to create a web page. We were asked to create a new GitHub repository where we should place our .html document.

Initially I had followed the process that we had gone through in the workshop where I created the GitHub repository and synced it with my other systems and devices, I then went on to create the basic setup of my HTML document by stating the !DOCTYPE as HTML, then adding some basic metadata in the head tag like the title and the author of the document, once my HTML document was I setup I copied the A Street Of Crocodiles text in the body tags of my document and started to separate them into their own respective HTML elements.

Personally I want to look more into refining my HTML document ensuring I am using the right elements so specific things, after researching into HTML and web development previously I noticed that semantic markup is extremely important when it comes to creating websites, this allows for better search engine optimisation on the web page making it rank higher in the algorithm on popular search engines like Google for example. When I start to build my own website for my up and coming project I want to make sure I focus on making my HTML document as detailed as possible with the metadata in addition to utilising the correct HTML tags while considering semantic markup.

I have included a few screens shots of my HTML document below to give you an idea on what I achieved from this task.

 

Visual Studio Code Screenshot – The Street of Crocodiles

 

GitHub Repository Screenshot – The Street of Crocodiles

 


Week 09 – CSS Styling for The Street of Crocodiles

On week 09 of our course we learned about CSS and how it can be used to stylise HTML elements and improve the appearance and legibility of a website. We were asked to apply the skills we had learned throughout the workshop to The Street Of Crocodiles document we were set as a home task, like the previous task we did in the workshop I wanted to use this as a refresher to the CSS I had previously learned in my course at Northern Regional College to allow me to ease myself back into developing websites using HTML and CSS.

I have included a few screenshots below to give you an idea on the work I did to give The Street Of Crocodiles website its own style and layout.

 

HTML Code Screenshot

 

CSS Rules Screenshot

 

Final Layout Screenshot 1

 

Final Layout Screenshot 2

 

Final Layout Screenshot 3

 


Week 10 – Adding Images to The Street of Crocodiles

We were asked to take what we had learnt in our HTML and CSS workshop and apply it to our The Street of Crocodiles web page that we were building in our own time. This week we were asked to add images to the document that were related to the content, for my document I just wanted to include a background image in the main banner section of the website to add some visual content to the document so it isnt just plain HTML markup text. Next week we will be looking into using CSS grid to add images to a document and create a uniform layout so I will be including more images in that section of the website.

I have included some screenshots of the HTML and CSS code below in addition to how the website is looking so far.

 

Screenshot of Web Page
CSS Code Screenshot
HTML Code Screenshot

 

Leave a Reply

Your email address will not be published. Required fields are marked *