The aim of this project is to satisfy Code Institute requirements as well as to represent my future business as a software provider. It is my very first project, hence, there is a lot more to be desired and tweaked before there is a final push and call out to customers.

I believe, I have created mobile first approach web site using HTML and CSS, the modules I got familiar with so far. Bootstrap, has been used to a big extend as well.

Even though, having limited time to work on the project, I have big ideas on how this will grow in the future!

The website was intended to be very simply structured, but still able to provide and unfold full range of services and sleek design. The landing page has a full size background image with the logo and a dropdown menu created by Bootstrap.

The "About Me" page, unveils information about my professional experience, it consists of a brief description about me. There is also a ‘learn more’ button which upon clicking provides an external link to my resume in a PDF format.Links that do not work have been removed, also from the “About Me” page, the overlapping image has been removed.

Project section, contains two boxes with my future ideas. Skills page, provides bars with the languages that I will learn. They are also in different colors, hence, easy to distinguish.

As for the contact page, it represents a simple Bootstrap form with a warning button for the send option, where you can put your information.

There was a remark on Code Institute's end regarding the navigation of the website. After discussing it with my mentor, he pointed out that the assessor might’ve meant using a horizontal navigation instead of the drop button. However, we agreed that the drop down menu looks much clearer and simple.

In terms of keeping uniformity across different sections of the site, I wanted to make sure that the navigation remains simple and easy to use, one drop down menu, making everything reachable within a click. I have tried to create one theme model by using one full size image for all segments. I believe that this will help avoiding any confusion of the end user when he or she tries to reach certain section or go back easily.

• Home Desktop
• About Me Desktop
• Projects Desktop
• Skills Desktop
• Contact Desktop
• Home MV
• About Me MV
• Projects MV
• Skills MV
• Contact MV

• Landing page- consists of logo and a background image

• About Me – you can find more about my background

• Projects- you can see the future web-sites that I will do for friends

• Skills- this section portreys the langauages skills I will aquire

• Contact – A contact form which has not been linked to anything

• Improving the brand portfolio
• Turning the projects into reality

• HTML-HTML5

• CSS – has been used for styling purposes

• VSCode – is text editor that I am currently using

• Bootstrap – has been used big time to create the desired framework of my web-site

• Git & Github – for storing and backing up externally

• Javascript/JQuery – This has enabled the drop down on the nav bar working properly

• Balsamiq and Mockflow created the wireframes of my project

• W3Schools – I used for the icons embedded in the drop down

To make sure the website works properly, manual and automatic testing have been put in place throughout the development of my project. Following the mobile version first approach, I’ve assured decent UX experience. Afterwards, the site has been tested to larger desktop screens. The automatic check has been done using W3C Validator to ensure both HTML and CSS are structured correctly. The site has been tried on both Firefox and Google to confirm that it works the same way on both browsers.

DevtTools enabled me to make the desired changes quick and easy before I initiate them into the editor. More testing has been carried out by making sure that the drop down is fully responsive and navigates back and forth through different pages nice and smooth.

The future users of this site will experience fully functional, but simply structured project. All links are working upon clicking, providing their content in a different tab. By clicking on ‘learn more’ button from the About Me section, you can see my resume in a PDF file, opened in a new window.

The contact me section will not let you proceed with the sending unless you do not include your details such as: name, phone, and e-mail address. The email field has to include a proper ‘@’ sign in it as well. By clicking on the logo of the page (which appears on every page of the website), will always take you the home page. This was recommended by my mentor as it is useful to avoid confusion if the final user gets lost and wants to go back to the basic info.

Deployed website can be found on Click me

I have created the website using VS Code Studio editor. The reason I have decided to do it this way, is because I wanted to gain experience using editor which is independent from the school environment. The editor has a build in terminal allowing commands like git init, git add, and git commit to take place. The following steps have been undertaken for the online deployment:

• Creating new environment in VS Code

• Through the bash terminal I have entered git init, git add, and git commit for the initial commit

• The latter can be done much easier without writing anything in the bash terminal. Just after you save your changes, go to source control on the left bar menu in VS Code and click on the checkmark. However, getting experience typing the commands in the terminal is valuable experience

• GitHub pages is the hosting platform for the site. Meaning that every update will be automatically pushed to the master branch upon commit command. For that reason, the landing page should be named as index.html

To Run Locally:

• Go to https://github.com/Web-Cookie/Mile-1 to find my GitHub repository

• Go to 'clone or download' button

• Copy the link

• Open a bash terminal

• Change the current working directory to the location you want to have the cloned repository saved

• Type 'git clone', and paste the link that you copied earlier

• Then all the files that the website uses will be saved on your local machine

• You can launch the website by opening up the index.html file from your newly created folder

Special shout outs to my mentor Reuben Ferrante, great guy, would not make it without him scheduling meeting outside his calendar and giving way more than 30 min per session are only a small portion of what this man has done for me.