Web Pages with HTML/CSS


Project 9 - Non-profit Blog - due March 10, 2022

Project 9 - Non-profit Blog


Balance pursuing your interests with serving others. Meaning is found by making a contribution to benefit someone else.

Select a cause worth investing in. Identify an organization that is a leader for that cause.

Build a one page market website for that organization. Use all of the technical and business skills you learned in BACS 200.

This page will be used to gather interested people and connect them to the organization. You must research the organization and create a marketing pitch that tells their vision.

Focus on producing a high-impact website that tells a compelling business story.


Types of organizations to consider

  • Charities
  • Non-government organizations
  • Justice-seeking organizations
  • City or county governments
  • Chambers of Commerce
  • Universities
  • Schools
  • Churches
  • Religious organizations
  • Hobby Clubs
  • Political groups
  • First responders
  • Veterans' support groups
  • Addiction groups

Design a simple but powerful web page to engage others.


By doing this work, you have created a valuable tool that may help the organization.

Connect with the group you seek to serve and show them the work that you did. Meet with the leaders or send them a link to your page. Offer to make the content available to them free of charge.

Make any changes to the content that they desire to maximize the benefit. Your actions may have a profound impact on the organization. Who knows where it might lead?

In the past, this project has opened doors for many student. By engaging with the community you discover more about your own interests and connect with some great people. A web design project gives you instant credibility and is an excellent way to expand your sphere of influence.

This project also acts as a proof-point of your design capability when looking for a paying job.


Elements of a successful page

  • Capture the value proposition in 7 words
  • Describe the compelling vision in 50 words
  • Discuss the three strategies that will support the visions
    • These may be clear from published material
    • They may also be created by you as a suggested strategy that the organization might use
  • Tell how people can get involved
    • Give three concrete next steps for reader to choose
  • Describe how people can get in contact with the leaders
  • Visual appeal and first impression are vital to capture readers
    • Clean simple page layout with a logical reading order
    • Use images to convey emotion


  • Select four different Bootstrap components from the Examples page
  • Apply each of these to your non-profit page

Source Code

  • Create your page at bacs200/nonprofit.html
  • Use your page template built on Bootstrap to create a new page
  • Commit all of your code to your Github repository

Test Your Code

  • Test the simple page before your put anything interesting in it
  • Publish your page and test it


  • CSS Styles must be declared in a linked file
  • CSS Must be validated
  • HTML Must be validated
  • Validate all links



  • Page is located at correct URL (bacs200/nonprofit.html)
  • All pages validate HTML and CSS and links
  • All JavaScript widgets work
  • All links work properly
  • Other pages are working properly


  • Page shows required business content
  • Page is beautiful
  • Business message is clear and compelling
  • Page shows marketing carousel with photos
  • Overall impression is professional