Skip to content

Instantly share code, notes, and snippets.

@MWins
Last active January 25, 2017 14:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MWins/b1db9b0d2c120b5da603 to your computer and use it in GitHub Desktop.
Save MWins/b1db9b0d2c120b5da603 to your computer and use it in GitHub Desktop.
Web-Dev-how to build a website

A quick answer would be :

notepad++ - any text editor. html/php/css

ms paint - make quick wireframes for sites here.

photoshop - alter images, create graphics or full design previews if that's your thing.

get WAMP or MAMP to setup a local webserver for development work.

FTP Client- filezilla. Lets you upload files to the webhost.

Webhost - These cost per month, only needed if you want to have a web presence.

CPanel - Most common webhost control panel, will use to add domain names, create databases, setup ftp users, etc.

Domain Registrar - Register a domain name, etc.

Browser - check.

Google.

Tech stuff, any CSS libraries (your own or 3rd party), JS libraries and/or HTML5 templates. If the site's going to be dynamic (using a scripting language like PHP or Ruby), you need to find out what frameworks or libraries would be useful to the project.

That should suffice for what programs to use. You can explore other options (like IDE's) later.

Short summary, skipping steps:

  • Site Purpose.
  • Pages required.
  • Content required per page.
  • Media required per page.
  • Identify interactive elements per page
  • Select Navigation
  • Wire-frames for page archetypes
  • Write HTML/CSS
  • -meta tags
  • -header
  • -navigation
  • -footer
  • Setup analytics.
  • sitemap
  • upload to webhost via FTP
  • test in supported browsers
  • bill client

Obviously, this process differs based on the size of the project and the number of people involved. Either way, the project as a whole goes smoother if you keep track of progress.

Simple Example:

  • Site Purpose : place holder site for a product launching in 2 months.
  • Pages Required : Frontpage , About, Investors, Details
  • Content/Media:
  • Front page
  • product description
  • product pitch (focal element)
  • product Image
  • About
  • company info
  • contact info
  • company logo
  • Investors
  • contact info for investing
  • any legalese statements
  • Details
  • Product details

  • Product tech specs

  • product Image(s)

  • Interactive : hover effects for navigation and hyperlinks within body context *Navigation: standard menu bar after logo

*Wireframes : shouldn't be necessary since it's going to be a full page or two column split page.

*HTML/CSS : use a reset at least. write out the specific html for the site or use a framework.

Note here, if you are using php or html as the file extension it changes how things are done. If you opt for php, you can include repeated elements (header,footer,navigation). Whereas with html you will have to have it in each file. Either way, create a page template and work from it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment