Course Assignment

Goal

To apply knowledge of CSS Frameworks and SASS/ Tailwind to build a responsive front end for a social media application.

Get Started

Brief

For this project you will work in teams. You are tasked with creating 3 pages in HTML a CSS Framework of your choice:

  1. Home page
  2. Profile page
  3. Login page

The Homepage should have a feed of posts from the user’s contacts, a search bar, and a form to create a new post.

The profile page should have a profile image, details about the user, a list of the user’s contacts, their posts and a form to post to their wall.

The login page should have a form to login to the application. Make sure to include HTML form validation and use /profile as the action attribute.

You will only be working on the visuals for this project at this stage, forms do not need to submit data, for example.

Submission for this project will follow the pattern used in professional development. You are required to seek feedback from your peers as well as the teachers in order to complete this assignment.

Framework options

Some popular frameworks that work with react are. You are free to use anyone of your choice, these are just popular suggestings.

Learning outcomes

  • To be able to build a website using Advanced CSS frameworks and libraries.
  • To be able to use a CSS with React.
  • To be able to build consistant UI patterns.
  • To demonstrate knowledfe of DRY principles development of stylesheets
  • can assess their own stylesheets in relation to the DRY principle
  • has knowledge of arranging stylesheets appropriately.
  • can assess and implement code from documentation on a CSS framework
  • can explain their choices for using the CSS framework and relevant tools for developing digital solutions
  • can reflect over his/her own application of the CSS framework in the development of stylesheets and adjust it under supervision, or in relation to the general development of industry tools
  • can find and refer to information on new versions of the CSS framework, relevant tools and assess the relevance in relation to his/her own projects

Restrictions

  • You must use A CSS framework to build your website.
  • You can use React or Vanilla JS. (Using React will reflect better on your CV)
  • Please comment on the code when you use any code from Stack Overflow or other websites.
  • You can use all other aids.
  • Design needs to be your own and not a template.

Duration

You have one week in total.

Delivery

For peer review, please submit a link to your repository to the Moodle forum. You should review 2 of your peers’ submissions.

Please submit your public GitHub repository URL along with any supplementary files such as wireframes. Your repo should have an active PR that the teachers will review.

Design files will not be included in your grade but help to provide additional context to the marker.

Please make sure to exclude node_modules by using a .gitignore file.

Required Delieverables

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

Optional Deliverables

  • 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)

Resources