This bootstrap template is intended to help you deliever a amazing website which delights your end-users. Feel free to change, remove or start your own project from scratch. Please replace any text which starts with an _.
This is a vanilla website that displays a list of items fetched from an API.
This project was bootstrapped with Vite.
Your deployment is done via static hosting provider (Vercel is recommended). YOu can update your deployment pipeling by editing the vercel.json.
https://docs.google.com/document/d/1YB4l8uM5cz6ISp0hwG-4P4bzcQErkQE3fP7w7J6PCTY/edit?usp=sharing)
In the project directory, you can run:
- install the project node module dependencies $
npm i - Runs the app in the development mode.
npm run dev - Open
http://0.0.0.0:5173/to view it in the browser.
All of these todo's must be done to pass the asssignment.
- A error message is present when the End-user encounters a error while viewing the index page.
- A error message is present when the End-user encounters a error while viewing the details page.
- As a customer I can view the title of the item on the browser tab for a details page.
- As a customer I can view validation message when they input an incorrect name.
- As a customer I can view validation message when they input an incorrect subject that is less than 15 characters.
- As a customer I can view validation message when they input an incorrect Email address.
- As a customer I can view a validation message when they input an incorrect physical address that is less than 25 characters long.
- As a customer I want to be able to view the latest blog posts on the home page.
- As a customer, I want to see a list of the first 10 blog posts on the blog section, so that I can quickly scan through the content and decide which posts I want to read.
- As a customer I want to be able to view a list of all blog posts on the blog section.
- As a customer I want A responsive website that can be As a customer, I want to ensure that the website is responsive and accessible so that I can access it on any device and easily navigate through it using any accessibility tools I need.
- As a customer, I want to see a clear and visually appealing design on the website, so that I can easily read the content and engage with the website.
- As a customer, I want to see a carousel/slider on the home page to display the latest blog posts, so that I can quickly access and view the latest content.
- As a customer, I want to be able to click on a blog post and be taken to a page with specific details about that post, so that I can get more in-depth information about the topic.
- As a customer, I want to be able to click on images in a blog post and see a larger version in a modal, so that I can view images in greater detail.
- As a customer, I want to be able to easily contact the website owners through a contact form, so that I can reach out with any questions or feedback.
- As a customer, I want to see error messages when I fill out the contact form incorrectly, so that I can correct my mistakes and successfully submit my message.
-
End-user can search for a specific item.
-
End-user can filter the list.
-
End-user can sort list by;
- Name ascending order
- Name descending order
-
Confirmation modal after custumer submits a successful contact form.
-
End-user can auto-fill the contact form using the browser auto-fill.
-
End-user can auto-fill the contact form using a password manager.
-
Validation still works when End-user uses copy and pastes into input fields.
-
End-user can see a postive feedback when they input correct info and pass validation.
-
End-user can experience pleasant animations.
-
End-user needs to prove there are human using a captcha feature on the contact form.
- Each item in the list has a staggered animation.
- Contact form success modal fades in.
-
End-user can view a custom favicon.
-
CSS uses variables
-
Code is dry - There are no repeating functions, variables.
-
My commit messages are relavant and make sense. How to write good commit messages
-
As a stakeholder, I want to view the website analytics.
-
As a stakeholder, I want to show my customers a disclamer on the website, so that they are aware of the terms and conditions of using the website.
-
As a customer, I want to ensure that my personal information submitted through the contact form is kept secure and not shared with any third-party entities.
-
As a customer, I want to be able to sort, filter, or search the blog posts, so that I can quickly find the content that is most relevant to me.
-
As a customer, I want to be able to submit comments on a blog post, so that I can engage with other readers and share my thoughts on the topic.
-
End-user experiences a complete custom UI design.
- Is user-friendly
- Effective use of the pillars of design
- Typography
- Colour
- Composition
- Art Direction
- Motion
- Adhered to principles of design
- Contrast
- Balance and alignment
- Emphasis
- Proportion
- Hiearchy
- Repetition
- Ryhthem
- Pattern
- Negative space
- Movement
Make sure you go through this checklist before submitting your project to Moodle.
- All pages have a meta description.
- All pages have a valid title.
- All pages import the correct css files.
- All pages import the correct JS file.
- Details page URL includes a query param.
- My website makes a GET request to an API to get a list of results.
- My website makes a GET request to an API to get details of one result.
- Input fields have the following attributes;
- All images have an alt tag;
- A name,
- A placeholder,
- A aria-describedby,
- Required
- I have not copied Javascript code.
- I have not used a Javascript library.
- Removed all unused files.
- Named all images properly.
- Committed all my code to github.
- My repo is publically viewable.
- I've submitted/ written a report.
- I've removed all todo notes in code.
- I've removed all console logs in code.
- Code is formatted correctly.
- There are no red underlines in VSCode.
- There are no error messages in the terminal when I run the project.
- My code is indented correctly.
- I've checked my report for grammer & spelling using grammerly or chatGPT
- I've used used conventional commits
- I've checked off every todo in this README.
- https://web.dev/learn/forms/
- https://fed-vocational-astro-course.vercel.app/en/html-css/module-2/forms
- Vite - Next Generation Frontend Tooling
- Prettier - An opinionated code formatter
- Eslint - Find and fix problems in your JavaScript code
- Open-props - Supercharged CSS variables.
- Animate.css - Just-add-water CSS animations
- Alexander Bjerketvedt (@alexvedt
- Monde Sineke (@S3ak)