Caliph Umar

This website is dedicated to the Second Caliph of Islam - Umar. It is a basic introduction with links and references to other sources. Users will be able to read about this historical figure and watch a trailer for a historical tv series regarding him.

The page is split into 3 sections: an intro, a brief history and media representations.

Features

The top of the page shows the name of this historical figure in both English and Arabic.
This is followed by a Navigation banner, which includes a link to the top of the page, the hisotry section and the media section
The colour scheme is a very simple black and white including grey/silver to diferentiate sections clearly

The Home/Intro Section

The intro section gives a brief introduction about the reason for the page and my personal interest in the topic and istorical figure.
It includes an image for interest

The History section

This section gives a brief history based on my memory of many sources including the MBC Omar Series mentioned in the article
It includes an image of the pyramids of Giza. Egypt was one of the areas ruled by Caliph Umar

The Media Section

There is abrief sentence explaining that there is not a lot of media portraying the Caliph
This section includes an iframe to play the trailer for the MBC Omar Series
There is also a map showing the extent of the rule of the Caliph

Testing

I tested the site in Chrome and Edge
I confirmed that the site works and looks acceptbale at various screen sizes
I confirmed that it is readable and understandable
I confirmed that the vidoe plays when clicked

Bugs

I solved the majority of the bugs as I went, for example I initially accidentally styled the header Umar div and span the wrong war around
I struggled to for all the images I wanted to in the history section properly - I opted to only add 1 image. I am not certain the reason for this and would require further investigation - perhaps the addition of more divs and spans

Validation

I validated my code using the html validator and corrected the issue. Html validator said remove frameboarder attribute from iframes as it's obsolete. Then second check there were no errors
I validated my code using the css validator. I corrected the error found in one of the font-family declarations, there was a comma missing
I tested the accessibiilty using the Chrome dev tools lighthouse function