Web Site Design

      ______ WEB SITE DESIGN (Front End) _______
Coding your own website from the ground up is fun and enlightening.  You do have to get the syntax perfect for it to work. That's why most learning systems and development environments give you immediate preview. 

  • HTML5/CSS3   These are the fundamental languages for coding the user interface (front end) of websites and other web based applications.  HTML is a simple language that holds and organizes the text, links and images on your website into headers, paragraphs and other groupings.   CSS is to design the visual layout;  CSS starts simple but has lots of more intricate features that you can use make the text, images and design elements sing together.  To learn HTML5 and CSS3 online try Codecademy (free) W3Schools (free) or other online schools.  I like Codagogy's inexpensive courses because they are quite clear, and also show you how to develop and launch web sites into the real world. (currently for women only)

  • Javascript is a simple, versatile language that can make your website interactive getting input and information from the user and from the internet.  You can learn Javascript at many excellent online sites, including Treehouse ($),  Khan Academy, CodeHS and Codecademy.   
     
  • Here's a very clear, step-by-step guide to setting up your own website : http://websitesetup.org/  by @RobMening
  • Fun idea:  Lean to code websites by coding websites -- 30 websites that get cooler and cooler.  30Websites.com 

  • Thimble https://thimble.webmaker.org/en-US/  Thimble makes it ridiculously simple to create your own web pages. Write and edit HTML and CSS right in your browser. Instantly preview your work. Then host and share your finished pages with a single click.  From Mozilla, a non-profit that believes everyone should be able to make and share with the open web. Also, do take a look at webmaker.org.
  • WebMaker  webmaker.org   WebMaker from Mozilla (formerly called "hackasaurus") makes it easy to mash up and change any web page like magic. You can also create your own webpages to share with your friends, edit videos, make apps and more, all within your browser.  Great set of tools here including X-ray Goggles, Thimble, AppMaker and Popcorn.   Additional resources

  • Codepen codepen.io/pen/   lets you try out HTML/CSS and also Javascript and see what happens immediately. It also has a showcase/demo of lots of very cool work, like this  or this.  Here's how they describe it:  CodePen is a playground for HTML, CSS, and JavaScript. Build demos with our in-browser code editor. Share what you build. Explore and learn from other’s code.

  • jsfiddle jsfiddle.net also lets you try out HTML/CSS and  Javascript and see what happens.

  • Blogs:  If you'd like to warm up to true web site design without starting from scratch, you might like starting with a blog.  Kidblog (designed for classroom settings) has lots of great security and tracking features.   Blogger (through any gmail account) or Wordpress give you considerable design flexibility, and as you learn more you can get in and augment the actual code.   For instance, this website uses Blogger as a platform.  Wordpress is so versatile that 20% of the web sites use it for starters.  Here's a good list of Wordpress resources for beginnersl

   ______ useful resources for WEB SITE DESIGN & DEVELOPMENT _______
As you learn more about HTML and CSS you may want to use some of these references and other resources.  An impressive range of information, tutorials articles and references can be garnered by Googling relevant keywords and sorting through the results.  Found a favorite?  Let us know and we'll add it in.  

No comments:

Post a Comment

Subscribe to: Posts (Atom)