This is my first assignment or project as FrondEnd student. The website will reflect the knowledge that I have accumulated so far.
Visitors will be able to find personal information about me. They will also notice the simplicity of the website, nothing to complex.
To draw my website I used “Balsamiq.” I want to show how responsive the website can be when tested on different devices. Those are the links to the wireframes:
1.
2.
3.
4.
The menu is the same throughout the pages; home, contact, and about me.
The home page is a brief introduction ==of my 20 years journey learning different technology==. The page display my journey in two columns. There is a link in the main page where the visiter or user can click on and find out more about me.
On about me page I describe a little bit more about myself in a concise manner. The user will learn more about my personality. What drives me, my working ethic, ambition and so on. There is a picture of me too. The visiter will come across with 3 coloured stars. I got them from Font Awesome website.
In the contact-me page, there is a form for the user to fill out if ver needs to reach me. The user also can get in touch with me via mobile phone. I also made my business address available too.
- I would like to make the submit form active. User could send and receive information from me.
- I also would like to create few animations with javascript, make the page more interactive
Balsamiq - I used it to show how the website responds across different screen sizes.
HTML - the 3 pages structure seats on HTM5. Very basic Layout pages. The design of the page is made with Bootstrap.
CSS3 - To make the page more colourful, I css and bootstrap too.
Font Awesome I inserted fontawesome elemnts in about me page only.
Git - used it as a version control system to add and commit changes made to my project.
Github - I have used it to apply the changes on my project and display the website too.
Testing
My wife and I were the only one testing the site. I made the necessary changes sugested by her. The Jumbo Bar was her idea.
To find out if my website was fully mobile friendly I used Google Chrome's Development Tools, Safari, Telephone devices to test how it looks in different devices and browsers.
HTML and CSS Validation I used the below websites to validate the code in my website:
- W3C HTML Validator tool to validate my CSS code.
- W3C CSS Validator tool to validate my HTML code.
The toggle nav or barr was taking to much space on mobile device. My mentos asked me to try to place the toggle bar at the top or side by side with header, but I could not do it at all. I think my knowledge is very limited for "such big" ask. But i will try to understand and implement it latter on. To make a responsive design was a big “ask.” I never realised that margin and padding are taken into account on measurements. Some divs were totally off the page. The height of the page was another hurdle to overcome.
The hosting platform used for my project is GitHub Pages. To deploy my project to GitHub pages, I implemented the following steps:
Downlaod gitHub Desktop and Visual Studio Code on my Laptop.
Lunched or started Git Desktop.
Connetcted my Visual Studio Code into my Github online and from that moment on I could syncronise both GitHub.
Created a new repository in GitHub called 'Portfolio'.
Imported the the new repository into V.S. on desktop.
Any changes made on my project loaded on my Laptop I would commit or push to my Github online.
My mentor directed me to the right places when needed. I value very much is help.