Design and create a blog, using WordPress as a headless CMS for the post content, as part of our end of first year exam for Noroff.
The aim of the project was to create a blog website and fill the site content using WordPress CMS. With optional additional aims to create a good user experience for the blogger adding content as well as update all the pages content through WordPress. The website needed to be responsive, looking good on all screen sizes, easy to navigate and take into account accessibility. The technical project requirements were to include;
- A post slider on the home page, atleast for desktop screen sizes.
- On the blog list page 10 posts were to be displayed with a show more button for additional posts to be displayed
- On a specific post page, clicking on any images would expand that image in a modal.
- A contact form using JavaScript for validation.
This is the handed in version of the project. The page content is pulled from WordPress. The blogger can update content on all pages on the site through the WordPress interface with no need for any coding knowledge. The readers can comment on posts, and fill in a contact form which is caught by the Flamingo plugin.
Development Stages
- Design website in adobe XD.
- User test XD prototype.
- Create website using HTML, CSS, and JavaScript.
- Create and configure a WordPress installation to server as the CMS for the site.
- User test and improve the design.
- Download the zip of the project or clone the repo with GitHub desktop/the terminal in vsc:
git clone https://github.com/Anclagen/First-Year-Exam-Project-Blog.git- Open in Visual Studio Code and use the Live Server Preview extension to view the site and its content as is.
This project requires no contributions. Although any suggestions and feedback are welcomed to help me improve in future projects.
Copyright (c) 2022 Alexander Barrett
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
LearnWebCode, “WordPress REST API Authentication: Application Passwords”, 30 Mar 2022. https://www.youtube.com/watch?v=e_thybKPKHc
WebAIM, “Invisible Content Just for Screen Reader Users”, Last updated: Sep 25, 2020. https://webaim.org/techniques/css/invisiblecontent/
Benjamin Johnson, “Accessible icon buttons”, Sep 02, 2020. https://benjaminjohnson.me/accessible-icon-buttons
Dev, “When role="button" is not enough”, 18 Sept 2020. https://dev.to/tylerjdev/when-role-button-is-not-enough-dac
CSS-Tricks, “KeyboardEvent Value (keyCodes, metaKey, etc)”, last updated: Aug 14, 2019. https://css-tricks.com/snippets/javascript/javascript-keycodes/