It's always a great thing to help others. Maybe you're already helping out in a dog shelter, handing out food for people in need, collecting used cloth for charities or separate garbage to keep our planet clean. All little matters.
In fact, there are many NGOs (non-governmental organizations) specialized for some good cause. In this project, you'll have the chance to help one of them.
Choose an organisation who you'd like to help with a new website. Some of them already have great sites, this time, try to find one who lacks a site or has one, but an old, not so useful one. If you cannot find such a website, you can also try to recreate an existing one.
- How to plan a landing page.
- How to create a wireframe.
- How to implement a whole website.
- Use CSS to build responsive websites.
- Build layouts.
-
Choose an NGO, which could use a better website and replan their page in a way that it clearly explains their cause and the working of their organization and convince the visitor that the NGO is legit and trustworthy and it is worth supporting.
-
Like any real life project, an NGOs website should be also planned well. Acceptance criteria for this task to be considered done:
- There is a mid-fidelity wireframe created and saved in the repository (as an image)
- Plan each NGO subpage. This can include:
- Information about past project.
- The NGO history.
- The team, or current employees.
- A contact page.
- Anything else that makes sense for the given NGO.
-
You need to build the home page.
- There is a
home.htmlfile that contains the HTML of the home page - A navigation bar contains links to the other pages
- A navigation bar contains a NGO logo in the left side, that when clicked leads to the home page
- The main content contains information about the NGO, with images, text and a cool layout
- There is a footer that contains the following links to contact (facebook, twitter, email), copyright and navigation in the page
- There is a
-
Build at least three more pages, to describe the NGO.
-
You have great freedom on this project. Follow the linked articles on how a great landing page looks like and implement what is necessary for your chosen NGO to gain conversion.
- There is a nice and clean landing page for the selected NGO
- Use only native HTML and CSS, no 3rd party stuff, nothing else
- All pages should be responsive look good on multiple laptop screens
- At least the homepage should be responsive and look good on both the desktop and mobile screens
- Files should be organized according to their purpose, in separate folders
- Proper git usage is REQUIRED. This means:
- All code MUST be on the
mainbranch of your repository - Multiple commits should be created, each with descriptive messages
- All code MUST be on the
- Code MUST be formatted properly, according to the prettier rules. You can use the VSCode plugin for this. You can even enable format on save from it
- This project will be evaluated against four pillars:
- Visual style. This includes how the application looks, how it responds to screen resolution changes, and how friendly and easy to use it is.
- Code correctiveness. Is the code following the standards properly? Or is it just a mishmash of things put there until it works.
- Content. The website itself need to have rich content, with pictures, text, and friendly navigations.
- Presentation. How are you presenting the project? Can you emphasize all its features and show the code that you used to create them?
- All of the existing courses on Moodle
- About Wireframing
- About Landing Page
- Floating documentation
- Flexbox documentation
- Flexbox tutorial
- How to use flexbox (you just need the Tutorial 2-9)
- Grid documentation
- Grid tutorial
- CSS grid fundamentals (you just need the Tutorial 3-11)
- Lorem ipsum
- Web design history
- Layout tutorial from nothing to flexbox