Overview

The goal of this project was put into practice what we had learnt at the end of our first year of studies. For the brief Level 1 was compulsory but Level 2 was optional.

Brief

We had been tasked with creating a blog site. We could choose the design and topics covered on the blog, but it should have at least the following pages:

• Home page
• About page
• List of blog posts
• Blog specific pages
• Contact page

Home page

The home page should have a 'Latest Posts' section which uses a carousel (slider) for users to click to view more posts. The user could also click back to view results they had previously seen.

Blog page

The blog posts page would show the first 10 blogs, and the user should then click to view more results which then show underneath the first 10 blogs.

Blog specific page

The content of the blog specific page would be dynamically built using a query string parameter based on whatever link the user clicked. The title of the blog specific page would change based on the blog that has been clicked on e.g. “My Blog | An Article I Wrote”.

If images on the blog post page are clicked, a modal would appear giving the user a bigger view of that image. Clicking outside the image would hide the modal.

Contact page

Create a contact us page, there would be 4 textboxes on this page.

• Name (Should be more than 5 characters long)
• Email address (Must be a valid email address)
• Subject (Should be more than 15 characters long)
• Message content (Should be more than 25 characters long)

Had to use JavaScript for validation, show error messages if the values in the textboxes did not meet the requirements.

Wordpress

The content for the website was stored on a WordPress installation used as a Headless CMS. It's important to note that we were only using WordPress to provide an API and add content for the blog. We would not submit a link to a WordPress site, but build your website using HTML, CSS and JavaScript and making a call to the WordPress REST API to fetch the data.

The project has two aspects:

• API from the WordPress installation
• Website built with HTML, CSS and JavaScript

We needed to add at least 12 blogs to the website. We could use lorem ipsum for paragraphs if we needed, but headings, images etc. should all make sense.

Level 1 Process

1. Decide on the theme for the blog you're going to make
2. Create a prototype of the website
3. Installed WordPress on our web host and added the blogs on the admin panel.
4. Use the GitHub repo created by GitHub Classroom for your files and deploy to Netlify
5. Build the website using HTML, CSS and JavaScript making a call to the WordPress REST API to fetch the data.
6. Install Hotjar on your website.
7. Asked users to test your website, and adjust based on their feedback and any insights from Hotjar.
8. Wrote a report documenting your project.
9. Submited a report as a PDF and a link to both your Netlify deployment and your GitHub repo.

Level 2 Process (optional)

1. We could try adding a sort, filter, or search to the blog posts page allowing users to find the blog post more easily that they're looking for.
2. Post the data from the contact form to WordPress so you have the details saved.
3. Allow users to submit comments on a blog post, and post this data to WordPress