User Profile
Technical Description
HTML
Seperated the infromation into different classes by doing so I was able to get flexibilty in arranging ,grouping information. I used 'ul' or unordered list to display 'Goals','Fustrations', 'UN goals I support' futher more I used seperate div classes to hold icons & images in 'Goals','Fustrations', 'UN goals I support'
Used simple table to display month of march as of a calander and to display the contact details of the user. Tn the contact-details table I used 'href' in both email & linkedIn details so that clicking the email will open Outlook mail and clicking the linkedIn will open a new tab and be directed to the users' profile.
For the contact-me-section I used a 'form' with 'action=#' as there is no place to send the submitted inforation.For the name input I set the 'type=text' defined a max-minlength. And for the email input I set the 'type=email' so missing '@' will be detected, defined max-minlength aswell.
CSS
Included all rectangles inside a parent tag that has 'flex-direction:column' & 'align-item:center' amoung it's other styles, this kept all the rectangles in a column wise. When defining profile-picture-rectangle & 'basic-information-rectangle' I used 'clip-path: polygon()' which game me the flexibility to create other different shapes inorder to make a eye-catching profile
Displayed the listed items of 'Goals' & 'UN goals I support' as a row by excersing 'display:flex' & 'gap:' css styles
Made a small dicription on UN goals icons that becomes visble only during hovering this wasdone by using 'opacity:', opacity is changed from 0 to 1 during hover which makes it visible.
Accessibility
All rectangles are implemented with hover effect wich raises the container while displaying a shadow below it, Hovering over the icons in 'UN goals I support' displays a small hidden discription on that icon.
Link to the validation page
Go to User Profile Validation report
Link to the page
Sitemap
Technical Description
HTML
Included 'viewbox=' so the content will size properly according to the screen size, added 'preserveAspectRatio=xMidYMid meet' so that the svg will align itself at the center of the container. Defined an 'arrowhead' using 'marker' tag that can be used when pointing towards a 'rect'. All 'rect' groups are inside a parent 'g' and all the 'lines' are inside a seperate 'g' group this made it easier to make changes. All groups with 'rect' were given the same class for easier styling. 'rect' & 'text' were kept within a 'a' tag within the 'a' tag the relevant 'href' was implemented.
All 'a' tags were also give 'tabindex=1,2,3..' according to the required order this enabled navigation through the sitemap using 'tab' key and all the 'a' tags within navigation bar and footer were given 'tabindex=-1',this kept the tab key navigation from exiting the sitemap and entering the navigation bar & footer
At the end of each line 'marker-end=' was added so it would be pointing towards the given object
CSS
'rect' border radius,fill color was defined to the parent group of all 'rect' groups, this avoids needing to add them line by line, 'cursor:pointer' was also defined so that it would change upon moving over the 'rect'. added 'pointer-events:none' to the text so that the rectangle and text would act as a single element.
Added ':focus' and '':hover' to rect and text so that they would change color upon navigating using tab key or hovering over using the cursor
Accessibility
Can naviate through the sitemap using tab key, changes rectangle and text color on the one that you have selected.
Link to the validation page
Go to Sitemap Validation Report
Link to the page
Content Page
Technical Description
HTML & CSS
Created buttons that navigate to specific content of the page by using 'a' tag and id's. Created vertical rectangles to display information and pictures, all the rectangles are inside a container with 'flex-direction:column' styling.Used 'ul' to list points in the content.
Accessibility
Buttons are present at the top to navigate to the specific content of the page
Link to the validation page
Go to Content Validation Report
Link to the page
Challenges and Lessons Learned
Challenge: Navigating the sitemap using keyboard
Initially I put all 'a' tabindex=0 to navigate but it required me to change the html order of 'rect' groups, later I modified to tabindex=1,2,3.. according to required order which did not require me to change the html order
Compliance
Discuss how the pages you have created are compliant with Janet regulations governing web page publication. This includes demonstrating your understanding and application of these regulations. Be realistic and truthful.
References
- Photo by Kelly Pexels (2025) Pexels Available at: https://www.pexels.com (Last accessed: 8 Mar 2025).
- Photo by Kindel Pexels (2025) Pexels Available at: https://www.pexels.com (Last accessed: 8 Mar 2025).