learning to code

What do you want to learn?
Programming in general / making websites / making mobile apps?

There are 4 aspects to being a software solution developer
* Concept – what to make / how it will work / who uses it?
* Design – can you leverage whats in practice today – are you good with images and colours, have you a good understanding of usability?
* Familiarity with Platform – how are you going to build it?
* Programming – an ability that you gain from experience / familiarity with a language. A simple way to start is with a set of programming exercises and also seeing how things are done.

For platforms, you can choose from:
– Microsoft.Net (for desktop, windows mobile or web)
– php (a popular language for making websites)
– mobile specific (java for android / objective c for iPhone) / hybrid mobile apps

Elements of Web design
A website consists of a html page that is sent from a server to the browser and is rendered there.
A html page may reference to external files – css files, javascript files and images.
A page may be static / largely static / generated from server-side programming.

TIP: You can always look at the html / code of the page you are visiting in your browser by right clicking and saying view source.
Inspect element will let you see the tag hierarchically and analyse the style rules that apply / the resources that were loaded and debug javascript execution.

HTML – Hypertext Markup Language.

HTML uses tags to instruct the browser on what to render. For eg
<div id=”person” class=”box right”>
<p>lorem ipsum dolor sit amet constructeur.</p>

CSS – Cascading Stylesheets
CSS uses selectors to style tags. A selector can target a tag in 3 ways
– from its tag name
– from its class (using a . before the class) – multiple tag instances can have the same class
– from its id (using a # before the id) – only one instance should have 1 id

.box { border: 1px #666 solid; padding: 10px; }
.right { float: right: margin: 0 0 15px 15px; }
#person { color: #88c; }
p { margin: 0 0 10px 0; text-indent: 15px; }

Some parts of the page may respond to user events / time based ones. This is client side programming and is usually done with javascript / a framework in javascript like jQuery.

For example, the page at http://cselian.com/ does these things dynamically
– use a timer to cycle through the links (unless paused / pauseOnHover)
– swap in the contents on the right when the user clicks a link
– change the css class of the play button to show the pause image (use css sprite)
– depend on the layout of the html tags (div after a) for relating the content with the link (so $(this).next() is used to get the content.

Leave a Comment