FED Exam

Project Exam 1

The end of a journey

Goal

To put into practice the skills learned over your first year of studies. You will demonstrate your ability to interpret a brief, design a soultion and build a website that provides value to your stalkholders. These are the industry related core skills needed to practice the craft of front-end development. You will use all your skills in HTML, JavaScript & CSS to build a stastic HTML website that is responsive, accessible, and meets the needs of your stakeholders.

Learning by examining a light bulb

Duration

You have five weeks in total.

Learning outcomes

  • To be able to build a website using HTML, CSS and JavaScript.
  • To be able to use a Headless CMS to store content for your website.
  • To be able to use a REST API to fetch data from a Headless CMS.
  • To be able to use a JavaScript to add functionality to your website.
  • To be able deploy your website to a hosting platform.

Learning by examining a light bulb

Knowledge

The Candidateā€¦

  • has insight into industry-relevant standards for project and product preparation, presentation and delivery
  • can update his/her vocational knowledge within front-end development accumulated through the courses in the first and second semester

Skills

The Candidateā€¦

  • can apply knowledge to practical problems within the field of study with focus on the development of dynamic web solutions
  • masters relevant tools, techniques and expressions for developing dynamic web solutions in accordance with guidelines for universal design
  • can study and document his/her own project and identify issues and what measures need to be implemented

General Competence

The Candidateā€¦

  • has developed an ethical attitude in relation to practicing the discipline and the ability to create trust and relationships with colleagues from adjacent fields and to clients
  • can carry out work in web design and develop simple interactive web solutions, either individually or as part of an interdisciplinary group
  • can build relations with his/her peers and work towards a common goa

Restrictions

  • You must use HTML, CSS and JavaScript to build your website.
  • You cannot use a JavaScript framework or Metaframe or library (React, Vue, Svlete, etc) to build your website state or view.
  • Please comment on the code when you use any code from Stack Overflow or other websites.
  • You can use all other aids.

Brief

You and your buisiness partner want to create a blog website to share your thoughts and opinions on a particular topic. The purpose of this website is to gether insights into your customers and to build a CRM list for your future product. You have decided to use a Headless CMS (Airtable, Strapi, Contentful, WordPress, etc.) to store the content for your website, and you will be using a REST API to fetch the data from the CMS. You will be using JavaScript to add functionality to your website.

You have been tasked with creating a blog website. You can choose the design and topics covered on the blog, but it should have at least the following section:

  • Home Section
  • About Section
  • List of blog posts section
  • Blog post specific details section.
  • Contact section.

The design must represent your brand design. The layout can be any of your choice but must be responsive and accessible. Only the contact sectuib Forms must be validated using JavaScript.

Remeber your buisiness partner is not a expect in web development, so you must make sure that the website data is easly to change and retrieve.

Click here to start your Github Classroom Exam

A website design

Home Page

The home page should have a ā€˜Latest Postsā€™ section which uses a carousel (slider) for users to click to view more posts. For example, by default the user can see four posts, then they can click an arrow on the right to view the next four posts, and click it again to view the next four posts. The user can also click back to view results they had previously seen. This must be implemented for desktop at least, but if you want a simpler layout for mobile, you can change it from being in a carousel.

Blog Page

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

Blog Specific Page

The content of the blog specific page should be dynamically built using a query string parameter based on whatever link the user clicked. The title of the blog specific page should 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 should appear giving the user a bigger view of that image. Clicking outside the image should hide the modal.

Contact page

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

  • Name (Should be more than 1 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)

Please use JavaScript for validation, show error messages if the values in the textboxes do not meet the requirements.

Headless CMS

The content for your website will be stored on remote server/API using a Headless CMS. Itā€™s important to note that we are only using the CMS to provide an API and add content for the blog. You should not submit a link to the CMS dashboard, but build your website using HTML, CSS and JavaScript and making a call to the CMS API to fetch the data.

The project has two aspects:

  • API from your Headless CMS (Backend)
  • Your website built with HTML, CSS and JavaScript (Frontend)

You will need to add at least 12 blogs for your website. You can use lorem ipsum for paragraphs if you need, but headings, images etc. should all make sense.

Note that this is an exam, and therefore tutor support will be limited as per the study plan.

Level 1 Process

  1. Decide on the theme for the blog youā€™re going to make
  2. Create a prototype of the website using Figma
  3. Use the GitHub repo created by GitHub Classroom for your files and deploy to Netlify
  4. Build your website using HTML, CSS and JavaScript making a call to the CMS REST API to fetch your data.
  5. Install Hotjar on your website.
  6. Ask users to test your website, and adjust based on their feedback and any insights from Hotjar.
  7. Write a report documenting your project (template provided in this repository).
  8. Submit your report as a PDF and a link to both your Netlify deployment and your GitHub repo.

Level 2 Process (optional)

  1. You can 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 your API so you have the details saved.
  3. Allow users to submit comments on a blog post, and post this data to WordPress

Required Delieverables

  • A link to your deployment production website (Netlify/ Vercel/ GitHub Pages)
  • A link to your Public GitHub repo
  • A PDF report of your project (Template provided in this repository)
  • A link to High fidelity design (Figma)

Optional Deliverables

  • A link to your report.
  • A link to your gantt chart or Kanban project board.
  • A video summary of you explaing your project.
  • A link to Low fidelity design (Figma)
  • A link to Prototype (Figma)