City of Electronics Is a fast and lightweight web server for all systems. Designed to be scalable with low memory consumption and CPU consumption, it is the ideal solution for slow hardware environments and high productivity environments.

UX

Our goal is to provide our services to the whole world, some of our services are free, and some are paid, Our services are all the following...

Maintenance

• Computer
• Mobile
• Tab -PhotoCopes -Printers

Installation

• Surveillance cameras
• alarm devices

For executive work

• Server
• Web Side

What does it do?

This site displays the City Electronics Availability of services. Users can use the site To see our services through videos and photos You can email us through which the page is written or To contact us through the addresses or numbers displayed below the site We will provide you with all our news through this website I hope you enjoy it.

How does it work?

The website uses HTML to structure the site and CSS for style work and Bootstrap to shorten the time and make the site smooth and fast

Features

Existing Features

Users can:

• View images
• Watch videos
• Connect with social media audience "City Electronics"
• Contact us directly via phone, email, Skype, WhatsApp and Viper
• In the future, we'll post videos and photos about how we work
• We will work in future training courses
• Easily view the location of any device due to responsive design with mobile usage in mind

Features Left to Implement

• The contact form from contact.html page is broken at the moment because we don't have an e-mail server to actually send the e-mails. An implementation is needed for this, otherwise we would need to use some external service to handle this for us. A discussion is needed to decide whether this is going to be implemented or not.

Technologies Used

• HTML5

  • HTML5 worked for the structure of the site and to link images and videos shown on the site.

• CSS3

  • Css3 is used to make website design and to be responsive to all types of devices

• Bootstrap

  • I used Bootstrap to give my project a simple, responsive layout

• JQuery

  • Jquery is used to handle html and css data to save time

Responsive Web Design

I used a variety of methods to ensure the responsiveness of my website. These included:

• Mobile First Design
  • Mobile First Design is a fundamental part of designing for a multi screen world. I build this website with mobile space, functionality and utility as first priority.
• Bootstrap
  • I used the Bootstrap Framework to create tried and trusted sleek, responsive elements. For example, Bootstrap makes it simple to implement stylish a collapsible navbar which responds to screen size:

Uncollapsed navabr on large screen

Collapsed navbar on small screen

• Media Queries
  • I spent a lot of time writing and re-writing Media Queries to optimize t he responsiveness of my website based on screen size. It can be a meticulous and tiring process, but is more than worth it to have that perfect resize. Font sizes, relatively positioned elements, margins, heights and text alignments all caused trouble in keeping the flow of the website consistent on resizes and required Media Queries to iron out the kinnks.

Media Page with a width of 1366px

Media Page with a width of 731px

Testing: I used a variety of methods to test the responsiveness of my website. These included:

Contact form:

• This is an empty form test

• Send a form to the wrong email address

• Send a message without writing a comment

• Full message data input

• Firefox Responsive Design Mode
  • This was an essential tool to testing the responsiveness of my website, Firefox Responsive Design Mode makes it fast and effortless to switch between screen sizes and devices.

Firefox Responsive Design Mode simulating an Apple iPhone 6/7/8

• Blisk
  • A browser for web developers, Blisk, comes prepacked with fully emulated phones and tablets. It shows real time changes to files so I could see exactly how the changes to my code were affecting my site.

Blisk simulating an iPad mini 4 768x1024

• Testing In Different Environments

  • There is no simulator that could replace simply testing my website in as many environments as possible. Using as many different browsers and devices as I could get my hands on was key to weening out design flaws. Testing in Different Environments was a integral part of guaranteeing my website functions correctly for every User.

  • I also told my site input and the result was positive as shown above. It w orks perfectly in all entries. I tried to send an empty message and tried to send fake email and tried not to write it. All these tests passed successfully.

  Deployment

  The project was posted on a github hosted system and this is my induction name (https://github.com/albeeralkhawri)

  This is a page of site data on github (https://github.com/albeeralkhawri/City-of-Electronics)

  This is a link page on github (https://albeeralkhawri.github.io/City-of-Electronics/)

  My site works on all browsers and on all systems do not need special programs or browsers

Credits

Content

• I have extracted some links to the book from (wikipedia)
• Links were obtained to facilitate the work of (bootstrap) and (JQuery)

Media

• The photos used in this site were obtained from (google)
• The videos of this site were obtained from (youtube)

Acknowledgements

My thanks and appreciation to everyone who helped me and increased my programming experience and special thanks to Codeinstitute and my masterly Ali ashik .