Overview
ID: SaulChemonges_T1A2 Course: Diploma of Information Technology - Bootcamp Delivery Mode Subject: INT1012 - Introduction to Web
In this project as an aspiring developer, I have modelled my portfolio website in order to communicate and demonstrate my abilities to prospective employers or as an independent researcher.
I have designed, developed and deployed a website that showcases my talent, abilities and coding experience.
Briefely, I have created a portfolio website which presents me as a developer and IT professional. This online portfolio that provides information about me, my skills, interests, professional knowledge and a showcase of my work.
The arget audience for my portfolio website is an employer looking to engage a Web Developer and/or IT professional. I expect my future employer to have technical knowledge relating to information technology, software development/coding, programming languages and development stacks and high expectations of professionalism and a positive work ethic.
In this project, there are into three major parts:
- Code
- Documentation
- Presentation
1: I have implemented five HTML documents which link together and share a common theme, including components to presenting the following information:
- My name and contact details
- Links to professional accounts in GitHub and LinkedIn
- My work, study history and a link to my resume
- Content about me to demonstrate my personality, skills and interests
- A list of blog posts with titles and date published
- A blog with placeholders and images
2: I have created FIVE components which contain text content that are styled for my audience. I have:
- written CSS to style each component
- placed comments in the CSS and HTML code to identify each component
- have included some custom styles in separate stylesheets
- used semantic HTML elements and attributes to add meaning and website accessibility
3: There are FIVE components created using HTML and CSS containing graphical content that are appropriate for my audience. This is what I did:
- wrote CSS to style each component
- placed comments in the CSS and HTML code to identify each component
- included some custom styles in separate stylesheets
- used semantic HTML elements and attributes to add meaning and website accessibility
4: Here, I have created a responsive layout for each page using HTML and CSS utilising Flexbox and/or CSS Grid to produce a responsive layout that displays all components at mobile, tablet and desktop viewport widths which includes a navigation header.
I have used valid HTML5 semantic HTML elements and attributes to add meaning and accessibility as displayed.
This project is comprised of the following:
The entire project documentation has been compiled in this README.md. This file contains:
A link (URL) to my published portfolio website
A link to my GitHub repository
A link to my presentation video on YouTube at https://youtu.be/RnjRSk47Nek
A description of my portfolio website, including,
Purpose
Functionality or features
Sitemap
Screenshots
My target audience
Tech stack including html, css, and deployment platform.
I have presented the plan for my website and submitted my slides which will form the basis of a professional report.
The presentation and associated Slide deck include:
A walk-through of my portfolio website and its features
A walk-through of my design process and decisions
A review of development/build process including challenges, ethical issues and favourite parts
Incorporated in the Slide deck presentation are:
5: An overview or sitemap of all the pages on my website that explains the overall structure of my website and how different pages can be navigated.
6: Wireframes of the pages of my website that map out my decision-making process relating to the overall aesthetics of my website
7: A list of components that I have used including how components and styling will help in engaging with my audience
I have made a presentation utilising material on my Slide deck that is just under 8 minutes that I have recorded and uploaded on YouTube link: https://youtu.be/RnjRSk47Nek
I submitted my project via Canvas as a single zip file named as SaulChemonges_T1A2.zip.
I have made a list of deliverables (which covers all the above requirments for this project) included in my submission. The information has been organised is a logical fashions under a sub-directory named ../SaulChemonges_T1A2 which conatains:
- the location of the Zip file
- README.md compiled as a single markdown file in the Root folder of my zip file
- All files linked by the README.md file is included in a folder named /doc. All resources included in this folder are in either png, pdf or markdown (md) format. The Slide deck of my presentation in pdf format is located in /ppt folder and the Source code for my entire project is located in the /src folder. All links to online material have corresponding screenshots included in my submission (where applicable).
Component - a component is a block of HTML code styled with CSS which may contain text, graphics or other content arranged aimed at a specific purpose(s), for example: a navigation bar is a component designed with the purpose of allowing a website to be navigated; a call-to-action component has text, a picture and a button with the purpose of calling the user to click on the button.
Semantic HTML - or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a
tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are and browsers know how to display them.
The material for preparing this work has been obtained largely from the learning material from Code Academey at the link below: https://ait.instructure.com/courses/4730/assignments/51567