Project Of Creating A Portfolio Mobile Version Using A Template From Figma Design Using HTML and CSS. Click the link below to view the live preview of the website: https://david-kasilia.github.io/My-Portfolio-Microverse-Project/
This Is The Image Of The Deployed Mobile Version Of The Project
- This Project was about building my portfolio using the fourth template on Figma.
- The page is responsive to deskop, medium devices like tablets and mobile devices.
- HTML
- CSS
- VSCode
- Git
- Browser With Developer Tools
- Created a Github Repository
- Cloned the created repository to my local machine
- I created setup-project branch to create all the files needed for the project. These Files include:
- .github/workflows directory to store the linter.yml file
- images directory to store the images used in creating this project.
- stylesheet directory to store the style.css file for styling the website
- index.html to write the HTML code.
- Merged setup-project with the main branch
- Created the initialization-project branch to build the project code.
- Opened the folder Using VSCode.
- Completed the HTML code first
- Completed the CSS part.
- Used Media queries to make the website responsive.
- Ensured That forms can be submitted to Formspree
- Added anmations to the website.
- Deployed the website using Github Pages.
Report on web accessibility checks:
We evaluated the projects with my coding patner Peter and saw the necessarry changes needed to be made on our projects.
We used Wave a web accessibility evaluation report tool to get more insight on the project.
According to WAVE accessibility Evaluation Report:
Link To the report
Image below shows a summary of the report errors:
- Page titles: Changed to more descriptive page title that perfectly describes my project.
- Image text alternatives: Some Images had the same alternative text. I changed them to appropriate alternative text that fit the image.
- Text headings: I changed a text heding that didnot qualify to be a heading and gave it a proper element.
- Interaction: Added Lables for all the forms and set them to invisible.
- Resize: No issue found since the text resized well as the Firefox zoom works
- Color contrast: No issue found since the template was to be the same with figma
- The basic structure of the page: No issue found
I tested the website by running the code to a live server and opened it with Mozilla Firefox.To ensure the Webpage was responsive and was in a mobile version with both sections. I used the developer tools to see if it was responsive.
I ensured that the forms can be submitted by confirming the details in formspree.
Image Of Form submission in desktop Version
Successful Form Submission in Desktop Version
Image Of Form submission in Mobile Version
Successful Form Submission in Desktop Version
David Kasilia Mwanzia
- Github Link To Github Profile
- Linkedin Link To Linkedin Profile
- Twitter Link To Twitter Profile
Contributions, issues, and feature request are welcome anytime.
Give a Like or a Star if you like this project.
Microverse