Stream One Project: User-Centric Frontend Development - Code Institute

Kabul, Afghanistan located in the heart of Asia. Termed as the roof of the world. If a search for Kabul, Afghanistan is made, graphic images of violence, destruction and war appear with the absence of the real images and beauty perceived by the residents . City of Kabul website is present to manifest and showcase the real beauty and rich culture of Asia and to boost the tourism. The website consists of four pages;

1. landing page
2. about
3. map
4. contact page.

A live demo of the entire pages

Link to deployed website

My goal in the design was to create a simple and clear website enabling easy to access information on the site whilst aiming for a minimalist design. For users, I wanted to provide them with a very brief overview of Kabul and its culture via a simple, friendly and interactive design. This would allow them to get a glimpse of what and how Kabul is - the history, culture and the transitions through history, with the option to contact if they chose. In the footer section, I wanted the social media to be easily accessible as it is the most efficient way of information for the users.

• As the website developer I want to build a website which allows users to learn the true rich culture of Kabul.
• As the website developer I want the content of the page to be presented in a user friendly and traditionally way to showcase the simplicity of Asian culture.
• As the website developer I want to create a website which is subtle and visually appealing and pleasing with the very basics of software developing programming html and css and a move away from quirky and jerky animation on navigation menu and other contents.

• HTML
• CSS
• Bootstap 4
• Google Fonts
• jQuery
• Popper.js
• Font Awesome
• tinyjpg

• Full Page Image HTML Background for Bootstrap

• A Bootstrap 4 starter layout with a full page fixed background image and content cards. The navbar collapse on meduim and and small screen resolution to promote a minimalist design.

• A Bootstarp 4 jQuery, Popper.js, and JavaScript plugins. Placed near the end of my pages, right before the closing `` tag, to enable the dropdown menu on the small and meduim view.

In the future, I would like to add further projects that I've worked on to create a more comprehensive 'about' section. I would like to add a dropdown list on the about section and add more content.

The Overall idea of the website was created by myself. The landing page background image is taken from the wallpapercave and it showcases the forts of the Hindu Kush mountains bordering Afghanistan.

On the about section, the user could obtain the cultural traditions in Kabul, the tallest mosque in the city image is taken from the twitter and the decline of the cultural gender separations in Kabul image is taken from the The New York Times.

Users are able to view the social media about Kabul via clicking on the icons in the footer. If you try to submit the contact form with an invalid email address, there will be an error noting the invalid email address. Furthermore, the ‘required’ attribute is added to the ‘name field’, so if those fields are not filled in, the form will not submit. If all fields are valid, the page will reload. All links will open in a new tab using 'target="_blank".

This site was tested across multiple browsers (Chrome, Safari, Internet Explorer, FireFox) and on multiple mobile devices (iPhone 8plus: Chrome and Safari, iPad, Samsung Galaxy) to ensure compatibility and responsiveness.

HTML codes were tested in w3c html validator and css codes were tested in w3c css validator.

1. The git repository was initiated by inputting the command 'git init' into the terminal.
2. I then used 'git add' to add the files to the staging area before using the 'git commit -m "Description of work done' command to commit the files.
3. I created a repository on GitHub and linked to it by using command 'git remote add origin https://github.com/emalfiza/project-kabul.git'.
4. I could then push my files into GitHub by using 'git push'.
5. I entered the GitHub username and password.
6. To publish my site using GitHub Pages, I navigated to my GitHub Pages site's repository. Under my repository name, I clicked Settings. I scrolled down to the GitHub Pages section and used the Select source drop-down menu to select 'master' as my GitHub Pages publishing source.

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/emalfiza/project-kabul.git into your terminal. To cut ties with this GitHub repository, typegit remote rm origin into the terminal.

Emal Fiza : Student of Code Institue

The content in the "Landing Page" was written by me and the "About Page" was copied from the wikipedia.

The landing page background image is taken from the wallpapercave. The About section the cultural traditions in Kabul, the tallest mosque in the city image is taken from the twitter. The decline of the cultural gender separations in Kabul image is taken from The New york Times. And the contact page image is taking from archiveboston. All the images compressed in the tinyjpg for performance improvement.

The Bootstrap 4 starter layout with a full page fixed background image and content cards was taken from getbootstrap The dropdown small and meduim view JavaScript function was found through this tutorial here

This is for educational