BryanForesterCSSFeature

CSS: Web Technologies From the Beginning

CSS Overview - BryanForester.com

In this series I’m going to offer a few resources to help anybody who’s interested learn how to create basic web sites using HTML, JavaScript, CSS, and jQuery.  I’m not going to write tutorials since there are hundreds out there, I’ll just point you to what I feel are the most effective tutorials and let you go from there.  Part 1 covers HTML, the basic language of the web.  Part 2 covers JavaScript, the language that adds dynamic content on web pages.  Check those posts for some great resources and then come back here to expand your knowledge.

CSS

HTML creates pretty dull pages by itself.  The tags can be tweaked with attributes and organized with tables to achieve some impressive results, but to get really great layouts using strictly HTML, you’re generally stuck having to use a lot of images to create that perfect look.  JavaScript can also fiddle with the HTML elements and do special effects with positioning, but the real piece that’s missing here is a language to describe the desired layout to the browser.  That’s where Cascading Style Sheets come in.  CSS is another text-based language, like HTML or JavaScript,  that describes how elements on a web page are supposed to be laid out.  CSS is incredibly powerful and can create nearly any sort of layout and look that you can imagine, especially when combined with JavaScript.  JavaScript can be used to dynamically change the style of HTML elements.  CSS 3 is the latest standard.  This version of the language standard is very exciting since it adds support for things such as rounded corners, shadows, and gradients to the language itself.  The implementation on browsers is still somewhat sketchy, but it is coming together.

Resources

Code Academy has a tutorial that takes you through HTML, JavaScript and CSS.  You have to complete their basic track first, but it’s still an excellent way to learn.   A great reference, as usual, is W3Schools’ CSS Tutorial.  Another very useful reference site is EchoEcho.  Below are links to a few more great resources and tools.

Next

In the next part I’ll discuss jQuery and then I’ll share some of my experiences with these languages.

JavaScript

JavaScript: Web Technologies From the Beginning

 

 

In this series I’m going to offer a few resources to help anybody who’s interested learn how to create basic web sites using HTML, JavaScript, CSS, and jQuery.  I’m not going to write tutorials since there are hundreds out there, I’ll just point you to what I feel are the most effective tutorials and let you go from there.  Part 1 covers HTML, the basic language of the web.  Check that post to find some excellent HTML resources.

JavaScript

JavaScript enables the web browser to do some really awesome things.  If you learned HTML after reading the last post you’ll notice that with just HTML itself, you can’t really accomplish the level of interactivity demanded by modern websites.  JavaScript allows you to manipulate the elements in HTML to do things such as validating form information, animating parts of a page, and updating parts of the page on the fly.

All major browsers support JavaScript but some browsers need special tweaking in some cases, such as AJAX calls.  JavaScript itself is relatively simple to learn and examples are easy to find.  Since JavaScript, like HTML, is non-compiled it is written with text editors and is even visible in the source of web pages.  You can learn from other people’s code by finding a site that has a neat feature, right clicking on the page and selecting “view source” (or something similar, depending on browser).

Resources

The absolute best online tutorial for learning JavaScript is Code Academy.  This really cool site takes everyone, even absolute beginners with no previous programming experience, interactively through the JavaScript language  and providing badges and rewards for completing lessons.  A great reference is W3Schools’ JavaScript Tutorial.  Another great reference is EchoEcho.

Here’s another group of recommended books for learning and referencing JavaScript.

Next

In the next part I’ll discuss CSS and then jQuery and then I’ll have a share some tips on using these technologies in real world situations.

HTML

HTML: Web Technologies From the Beginning

In this series I’m going to offer a few resources to help anybody who’s interested learn how to create basic web sites using HTML, JavaScript, CSS, and jQuery.  I’m not going to write tutorials since there are hundreds out there, I’ll just point you to what I feel are the most effective tutorials and let you go from there.

An Overview

As a web developer I have a lot of cause to use JavaScript on nearly every project.  JavaScript is the language that co-exists with HTML to create websites that are responsive and interactive.  By default web pages built on HTML are very static.  They have pictures, text, links, some forms, and don’t really do much until you click a link or submit a form.  Through the magic of JavaScript web sites can interact with the user, conducting actions when the user moves or clicks the mouse, supply real-time updates and even provide functionality that other people create.  This is called client-side scripting.  Good usage of JavaScript creates the “Web 2.0” experience.  Facebook is an excellent example of client-side scripting.  jQuery is a library that takes JavaScript and simplifies it to make common tasks easier, provide a lot of excellent functionality, and make doing really amazing things very simple.  CSS is another language that can help the browser figure out how to display the HTML that it’s given.  Essentially it’s used to alter the style of web pages to create beautiful and unique design.

HTML

In their most basic form, web pages are nothing but text sent across the internet to our browsers.  (For the truly new, a browser is the program you’re using to view this web page, most likely Internet Explorer, Chrome, Firefox, Safari, or Opera.)  The browsers take the text sent to them and translate it into a page that the user sees and interacts with.  The basic language used to instruct the browser on what to display is HTML (Hyper-Text Markup Language).  It’s a very easy to learn language that describes the formatting of a page.  How the browser interprets the formatting is up to the browser, but generally conforms to a set of standards.  This means that pages can look different from one browser to the next, but should generally behave nearly the same across all browsers.  The beauty of HTML is that it is a non-compiled language.  This means that you can use any text editor (like Notepad or TextEdit) to write a basic web site.  My personal favorite is a free program called Notepad++ that provides “Syntax Highlighting” for HTML.  You also don’t have to buy a server or hosting to test and develop HTML pages.  You can create them on your desktop and open them in your browser.

Resources

There are a lot of resources for learning HTML, but I by far recommend W3Schools’ HTML Tutorial.  This site walks you through basic HTML and lets you try examples.  Also, check out their HTML5 tutorial.  This is the latest standard of HTML.  Another excellent tutorial site is EchoEcho.com.

For those of you who share my passion for paper and love to mark up a good reference book, you can find some excellent resources on Amazon. I’ve provided some of the books that have been been suggested to me.

Next

In the next part I’ll discuss JavaScript then move on to CSS, and then jQuery and then I’ll have a few tips and useful applications tying all the technologies together.