Charity website help

Development Code
1

There's a certain person who wishes to establish a 'christian' charity organization and needs a website. She wants it specifically to be 'Flash'y and interactive. The sort of stuff you see on Nvidia's website for example, with fading dropdown menus or other animations, pretty CSS buttons and titles (and javascript n' stuff)

I'm almost totally new to web design save for a few basic stuff I did in html in school.

Like this

I know it's a horrible test page but I just started learning html and networking in general. The attributes we used in school are considered 'obsolete' by html5 standards. I don't care about hosting at the moment as I could host it myself if I need to, and if she wants a proper domain it would be cheap-ish (but I'm doing this for free).

I have no idea how to do that on my own and I need some resources to learn. I know about w3schools and just a few minutes ago started and finished the basic html bit of code academy. After I make a pretty page like the demo I'll need some sort of bulletin board or comment system or something so she can add articles easily, and I know I won't be doing that any time soon.

May you experienced folk point me in the right direction? I'm not looking for books or paid courses, any free resources re good.

2

looking at the source code of your page, you're still using "old" practices such as inline css and font size tags. look at front end frameworks like bootstrap (getbootsrap.com) to help you with layouts. it will require jquery (javascript framework) which give you dropdowns and effects. browse around the web. if you like something, for the most part, you can view their source code. it can give you ideas of how things are created or at least tell you what kind of utilities/framework they used. here are some things i use.

  • getbootstrap.com for layouts
  • jquery.com
  • http://fortawesome.github.io/Font-Awesome/ for icons
  • http://validator.w3.org/ if you want to validate your html code
  • http://getfirebug.com/ to check for common errors and i use to inspect code as well
  • http://www.sublimetext.com/ cross platform IDE, it's a shareware but it continues to work w/o a license. if you like it, buy it to support the devs.

hope that helps

3

While the above is all good things to learn...

" I'll need some sort of bulletin board or comment system or something so she can add articles easily"

They wont overcome the above hurdle

 

My suggestion..

Wordpress + snazzy theme + Some tinkering by you = job done

Recent site I made

http://www.matchdaydigital.co.uk/

And don't let anyone tell you wordpress is shite, its only as shite as the person using it :D

 

4

Wow, thanks a bunch

5

That site is sort of what I'm after. So it's mostly wordpress?

Thanks

6

download wamp

have a look through the free themes first

I used divvy for the above which is a commercial theme (although I dont think it costs too much for what you get)

7

If this is for a not-for-profit organization, I believe you could totally use a template from a site like http://html5up.net/ (according to their creative commons page).  They have a lot of good dynamic templates, with separate CSS for multiple display form factors (desktop, tablet, phone).  I am currently completely overhauling my personal webpage that I've been modding/maintaining for over 7 years by highly customizing one of their templates.  It might be a better solution than starting from scratch.  You can still learn plenty of tricks and new things by looking at templates.

8

While the above link is awesome (i have used a few of them myself) I think seeing as you are going to hand this over to somebody none technical (and correct me if I am wrong on this) then your best bet is still wordpress.

Look at the divi theme from elegant themes, it does a good job of simplifying the template editor into something even my mum and dad can use.. which says a lot.