Laura Kubile – personal web site.

Milestone project 1: User-Centric Frontend Development - Code Institute

One who is completely new to the industry of web development and has other skills and experiences that can make an impression on employers, can and should start the journey from the personal web site. It gives anyone an opportunity to show the potential employer or project collaborator the skills and features that one can use to improve company work and results. The web site is made to function as advertisement for the person and is directed to catch the attention of possible collaborators or employers. Basically:

-To advertise the person -To attract employers and collaborators

UX

To make the web page attractive for the audience there are used pastel and calm colours and the page is not overloaded with features or text. As well as there are links if someone is interested in the person more in depth.

Strategy

The goal of the web site is to advertise a person as a potential employee, at the same time being prepared for collaboration and partnership offers. Also aiming to get the attention of the specific audience that can get the whole picture.

Structure

The structure of a personal web site is simple for the user to get the right information at one click. The order of a project lets the user get easily to the other pages or files of the site. There is an easy navigation and the user has personal contacts to the hand.

Skeleton

By using Balsamiq app three wireframes were created to serve as sketches for the project. This is the link where these wireframes can be found https://photos.app.goo.gl/SYRXxb73xyGCZuKu6

Surface

Code institute template was used to create the project. Several colour pallets were applied to give the pages crisp and solid aesthetics. Pinterest app was used to find the better combination of the fonts, which were used through Google Fonts and Font Awesome was applied for little icons. The whole aesthetics were combined to create subtle but tough impression on the person advertised.

Technologies

-Balsamiq - To create a wireframe -HTML - To create a basic site -Bootstrap - To improve responsiveness -CSS - To create an attractive style

Features

The features used in this website are simple and easy to use as I wanted to create a page that is more of informative nature, and user can use it just quickly to look through, decide they like it or not and contacting me through one of many possible ways provided. The site consists from three different sections but the buttons in the header lets the user go straight to the section one is interested in

Future Features

In the future other features as links to the partners shops, blogs or projects as well as video recordings for employers. In general, changing through the time step in step with the trends. In future there can be added the same website in a different language as well.

Testing

The website was tested on different browsers, such as Chrome, Internet explorer, Microsoft Edge. Html and css were ran through the validators: -W3C HTML Validator: This validator checks the markup validity of Web documents in HTML. -W3C CSS Validator: This validator checks the markup validity of Web documents in CSS.

Problems and bugs

I think the site works and serves the purpose it was created for, on the other hand, in the future it has to be made easier for users with different devices, more content can be added, more features as well. Although the website is better left simple and quickly consumable.

Deployment

This site was created using Gitpod and deployed to GitHub pages. The landing page has to be index.html, to correctly deploy it to GitHub.

Content

All the text and photos that are used in a project is written or taken by myself.

Acknowledgments

There were many sources used to create this website, such as w3schools.com, getbootstrap.com, courses.codeinstitute.com. I also read some material in the websites like pinterest or Wikipedia. Have to add that this project would not be possible without my mentor Oluvafemi Medale, Code Institute tutors and their help, and of course slack community.

Welcome Laura Kubiliene,

This is the Code Institute student template for Gitpod. We have preinstalled all of the tools you need to get started. You can safely delete this README.md file, or change it for your own project.

Gitpod Reminders

To run a frontend (HTML, CSS, Javascript only) application in Gitpod, in the terminal, type:

python3 -m http.server

A blue button should appear to click: Make Public,

Another blue button should appear to click: Open Browser.

To run a backend Python file, type python3 app.py, if your Python file is named app.py of course.

A blue button should appear to click: Make Public,

Another blue button should appear to click: Open Browser.

In Gitpod you have superuser security privileges by default. Therefore you do not need to use the sudo (superuser do) command in the bash terminal in any of the backend lessons.

Updates Since The Instructional Video

We continually tweak and adjust this template to help give you the best experience. Here are the updates since the original video was made:

April 16 2020: The template now automatically installs MySQL instead of relying on the Gitpod MySQL image. The message about a Python linter not being installed has been dealt with, and the set-up files are now hidden in the Gitpod file explorer.

April 13 2020: Added the Prettier code beautifier extension instead of the code formatter built-in to Gitpod.

February 2020: The initialisation files now do not auto-delete. They will remain in your project. You can safely ignore them. They just make sure that your workspace is configured correctly each time you open it. It will also prevent the Gitpod configuration popup from appearing.

December 2019: Added Eventyret's Bootstrap 4 extension. Type !bscdn in a HTML file to add the Bootstrap boilerplate. Check out the README.md file at the official repo for more options.

Happy coding!