Project Exam 1

Blog Site Project

Goal

To apply the skills learned during the first year of studies by creating a fully functional blog site.

Brief

The task is to create a blog site with the following required pages:

• Home Page
• About Page
• List of Blog Posts
• Blog Post Specific Pages
• Contact Page

Home Page

• Features a 'Latest Posts' section designed as a carousel (slider) for desktop.
• Displays four posts at a time with navigational arrows to view more posts.
• The mobile layout can be adjusted as needed without using a carousel.

Blog Page

• Shows the first 10 blog posts initially.
• Users can click to load more posts, which are displayed below the initial set.

Blog Specific Page

• Dynamically built using a query string parameter based on the clicked blog link.
• The page title changes based on the selected blog post (e.g., “My Blog | An Article I Wrote”).
• Clicking on images within the blog opens them in a modal for a larger view.
• Clicking outside the modal hides it.

Contact Page

• Contains four text boxes: Name, Email, Subject, and Message.
• Validation requirements:
  • Name: More than 5 characters.
  • Email: Must be a valid email address.
  • Subject: More than 15 characters.
  • Message: More than 25 characters.
• JavaScript is used for validation with error messages for invalid inputs.

WordPress Integration

• Content is stored on a WordPress installation used as a Headless CMS.
• The site is built using HTML, CSS, and JavaScript, fetching data via the WordPress REST API.
• At least 12 blogs are added to the WordPress installation with sensible headings and images.

Project Phases

Level 1 Process

1. Choose a Theme: Decide on the blog's theme.
2. Prototype: Create a website prototype.
3. Install WordPress: Set up WordPress on your web host and add blog content via the admin panel.
4. GitHub and Deployment: Use the GitHub repo provided by GitHub Classroom for your files and deploy the site to Netlify.
5. Build the Site: Develop the website using HTML, CSS, and JavaScript, and fetch data from the WordPress REST API.
6. Install Hotjar: Implement Hotjar for user testing and insights.
7. User Testing: Gather feedback from users and make necessary adjustments based on their feedback and Hotjar insights.
8. Project Report: Document the project using the provided template and submit it as a PDF.

Technologies Used

• HTML
• CSS
• JavaScript
• WordPress (Headless CMS)
• GitHub
• Netlify
• Hotjar

Link

• Netlify: https://sweet-speculoos-2088a4.netlify.app/

Contact

Feel free to reach out to me for any inquiries or collaboration opportunities:

• Email: vbpedersen@outlook.com
• LinkedIn: LinkedIn