SUSTAINIFY

Akila Wijerama , Feedback Page, Team Page (Student-3)

Feedback Page

Technical Description

HTML

In the Feedback Page implementation I use class "input-group" to get the user input for name,Email and Mobile-Number. I added some place holders to enhance readabilty and required-title for show some custom instruction to show to user. When it comes to exception handling which user enters some wrong credentials it shows Custom Error message with class="error". I added "fieldset" and "Label" attribute to other sections to get the user input. Program is enhanced with radio button for get specific answers from user and I added the default select as yes for both radio buttons. When it comes to text area field as CW expected to get the word count respectively when user enters. To enhanced the efficiency of the backend server I put maxlenth attribute as 500 which user can't type more.Yes for now we are not using any BackEnd server. Next we have the selection which user can select any options. For get the rating from the user I added some emojis and put some text allign with it when emoji is not readable user can read the text. When it comes to getting files from user I add type="file" for that. When it comes to getting the datetime-local I added default selected value as CW specified. I added some user agreement as we taking some personal details from the user. Now at the end I put Java Script I have to use some Java Script especially for getting the word count from user. Here I put id = "textarea" in the relavent text area fields. Other HTML attributes are go with "header" and "footer" refer pageEditor_ST2.html

CSS

In the Feedback Page CSS I added video in the background video it's fixed to the page and it's covers entire page. I added container box which all the elements go in that box and I can change it characteristic by it, when opening the page I added some transition which user can see the fadein. When user in some text field I use focus to that It may helps to user to see what box is selected. Fieldset and the Label is used to keep space between the relavent fields. I added specific input for radio button which I can change it. When it comes to button I put "Send" and "Reset" Send button deosn't have any functionality because it doesn't link to any BackEnd server. Error handling is one of keyfeature when it comes to forms. Here I use some CSS styling to it, Yes we can do it by Java Script too but HTML 5 is advanced when it implement by CSS there is a some difficulties. I hope to tell more about it in the challenges

Java Script

For get the word count for textfields I use Java Script thiis I used as internal Script I used word length to count the words and it shows the word count under the relavent text fields

Accessibility

Accessibility is one of key features in the page. I use some accessibility for some screen readers especially when it comes to website it self there are some built in Accessibility featues like reading the page. Users can change the tab by header and footer which provide links to relavent web pages accordingly. You can refer it by pageEditor_ST2.html

Link to the validation page

Click here

Link to the page

Click here

Team Page

Technical Description

HTML

In the Team page I added some background video for better visual experience. I use row and columns for keep the card respectively accordingly to the screen and centered it. Every card have class called row and column which describes it placement. I used some class hover-text for when cursor moves there hover the additional detais to each member in here there is a contribution to there tasks in web page. I add some transition to enhance user experience when cursor moves the card text hover from the bottom.

CSS

I use styling to make the program more visually engaging with the user. This wrapper class is used for keep the content within the headr and footer. Section is used to adjust the box elements in the page. h1 is the main topic for each members name row and columns is used to keep gap between each cards. I used some hovering effect to each card as well. Here it goes as when user moves background color is changed to #ffcc00. I used this color from our color pallete.

Accessibility

Team Page is rich accessibility featues such as when user moves cursor it automatically shows the contribution of each memeber this helps to user to identify the relavant contribution of each members. Other Accessibility featues are describes same as the Feedback page whih I mentioned earlier.

Link to the validation page

Click here

Link to the page

Click here

Content Page

Technical Description

HTML

I gathered information on Smart Planning in Sri Lanka. I put some title and background picture for id goes as h1 element as the main topic, other sub topic elements are goes with h2 attribute. I used some ul to create an undordered list to put some paragraphs. section attribute used for the seperate the section between subtopics. Every subtopic have some images which relavent to it. In the second topic which descibes Smart Driven Transportation I added two images.

CSS

In the content page I use white bacground which user can read the articles without distrupting. wrapper class works same as I mentioned earlier. section class give some gap between the articles. container is used to adjust the text area accordingly. Images are used to increase more desprective approach to talk about the sub topics and I put it as gallery view. For future referece I added each image a class which is not essential for now but if we need to add more pictures in the page it can be helped and it's easy to identify which increse the readabilty of the program. When it comes to transition I used it for when opening the tab it comes from bottom to up which increase user's visual experience

Accessibility

In the content page I added some links which opens other websites that I referenced it helps user to read more about the topic if they are interested. Other accessibility featues are same as I mentioned earlier

Link to the validation page

Click here

Link to the page

Click here

Challenges and Lessons Learned

The biggest challenge I face when implementing the feedback form. In the feedback form it is more advance than other pages I created. I have to use Java Script to get the word count. While making the pages I mostly avoid Java Script. We started Java Script just now when creating this webpage which I don't have any experience on that I learned it from youtube tutorials and the Linkedin learning. I used documentaion to learn it. I learned a lot about Java Script from making the Feedback Page

Team page has lot of animation with it like when cursor moves it should shows the Description of each team member. HTML is pretty easy for making Team page I used some tools like Figma to create it. When it comes to CSS it's the most challenging part I faced in the Team pages. I put some hovering effect where CW specified as it is. I learned a lot of CSS attribute from this page

Content page is especially based on HTML which has lot of Description about my conten topic. I implement this at the last I gain a lot of experience from team page and feedback page it helps me a lot to make the content page. It's doesn't have any rich CSS attributes like I used for Team Page. Where I focused on user's readabilty. Here I'm facing some problem some reader's prefer dark background when reading some articles. I tried to add in built in dark background toggle but it requires more knowledge on CSS. Finally I tried to adhere to CW specification and try my best to do it as it says

Compliance

When developing my pages for Sustainafy, I ensured compliance with Janet’s Acceptable Use Policy (AUP) by following ethical, legal, and technical guidelines for web publication. This includes adhering to GDPR for data protection, implementing WCAG accessibility standards, and ensuring that all content is appropriate and non-disruptive to the network. By following these regulations, my pages promote inclusivity, security, and responsible web usage, aligning with best practices for educational and public-facing websites.

References

Links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

Go top