- HTML5 and CSS3
- Web frameworks
- Static site generators
- Hosting your site
HTML5 and CSS3
Html is the basis of the world wide web. With HTML5 a lot of features were introduced into the language, most importantly the Canvas element, native HTML5 Video (no more flash), and a lot of new tags for semantic formatting of content.
Where HTML describes the content of a web page or application, CSS describes its looks. With the new CSS3 you can style everything, adding shadows, creating gradients and even radically changing the content style based on the screen size and orientation.
Mobile-first responsive design is the current trend in web design. This means making webpages which can look good on mobile devices and on desktops too from the same source.
Since 95% of communication on the internet today is based on this technology you need to master it. At least to the point where you can write on your own a webpage, style and publish it.
Great links to learn more about HTML5 and CSS3:
Dive into html5 http://diveintohtml5.info
CSS3 Generator http://css3generator.com
HTML5 Rocks http://www.html5rocks.com/en/
Learning jQuery is easy, follow any of these guides:
Node.js is used often with the Express.js framework, which makes it easy to write web services, do authentication etc.
When developing web pages and web apps you usally write over and over the same code, for example you always have a navigation bar, you need to have buttons, panels, dialogs, forms etc.
In the old days you had either to do this every time, or to write yourself some kind of library of reusable components in order to save some work.
Today there are several frameworks which already provide you with some pre styled elements that you can just copy and paste to use directly into your pages.
You can download the Bootstrap distribution from http://getbootstrap.com
Boostrap can be seen as several components:
The CSS styles dealing with general typography and how text is styled. The Bootstrap CSS allows also to format tables, forms, button, images, and so on.
The Reusable components which include icons, toolbars, navigation lists, dialogs, breadcrumbs, etc.
It’s not mandatory to use components if you don’t like, for example you might just use the grid.
On top of Bootstrap you can use several custom themes, like one contained in http://bootswatch.com, where you simply add a new CSS over the one provided by Bootstrap to get new styling.
Many sites also provide snippets of code for common use cases built using Bootstrap, one of these is http://snipplicious.com. Search for “bootstrap snippets” to find more.
Finally if you like to have a complete template, including bootstrap plus some ready to use pages you can check http://startbootstrap.com.
A great resource for learning how to use Bootstrap is to watch:
Learn Twitter Bootstrap in 2 Hours: https://www.youtube.com/playlist?list=PLKlA1QwYBcmcEUUBSmkl8_kgwn-_zuy-W
Foundation is another popular alternative to Bootstrap providing similar elements. Some people prefer it because is less bloated and eventually faster.
You can download Foundation from http://foundation.zurb.com
The Foundation Getting Started Guide provides documentation on the Framwework.
In particular you have access to:
- The Grid
- Plugins with a number of Widgets
On Zurb University you can find a number of ready to use snippets and templates based on Foundation framework.
Static site generators
If you tried to develop a full static site with or without one of the frameworks mentioned above, you will have noticed that a lot of the code is repeated over and over.
For example a website organized like the following:
----- Header ------ ----- Navigation ---- ---- -------- side content bar ---- ------- ------- Footer -------
Requires you to duplicate for each page the Header, Navigation, Sidebar and Footer Blocks. Furthermore you have to keep track of all links and make sure to update them every time something changes on the site.
Usually you can solve these problems using a Content Management System (CMS) like Wordpress or Drupal. These software packages come with templates that take care of most of these tasks. And the dynamic parts of your website, like menus are dynamically rendered from a database. But CMS software is difficult to maintain and even more to keep secure, and quite slow too. Malicious users can hack your site or in the best case put it offline. And it usually takes few seconds before your homepage shows up.
On the other side static sites are very fast, nobody can hack them, there is no security backdoor, and they don’t need any upgrade during time. Plus they’re small to download, and you can work on them offline too.
Static site generators try to bring you the best of both worlds. Like CMS you have templates, so you can focus on the content and compose pages from reusable snippets. And they produce static sites exactly like you would do by hand, just better, because it’s difficult to have broken links and so on.
Static site generators work like this:
- You start with a basic folder structure, with folders where you put your pages, usually as Markdown documents, and folders containing templates and includes.
- You can change the style of the site by editing templates and CSS
- You add in your content
- You “compile” the site, producing a “static” folder
- You copy the contents of the static folder on your server, either by FTP, SSH or Version control.
Every time you want to update your site, you just do steps 3) to 5).
Markdown is not a site generator, but we talk about it because most site generators use this as one of the accepted formats for writing content.
This page you are reading is written in Markdown for example. See the source for an example of Markdown.
Basically Markdown is made of text files that, when compiled, can be converted in HTML and several other formats.
Additionally they are quite readable by themselves, as the formatting rules are made to allow people to read it as is without any conversion.
A full guide to Markdown formatting is at http://daringfireball.net/projects/markdown/syntax, but you can also find convenient to read the Markdown Cheatsheet.
Many text editors support Markdown natively, and they add a nice preview panel.
Check out http://dillinger.io or search for “Markdown Editor”, you will find a ton. Once you learn it, you will never use MS Word again.
Jekyll is the most popular Markdown based web site generator. You can download it from http://jekyllrb.com.
Once you have all of this installed:
sudo gem install jekyll jekyll new my-awesome-site jekyll serve
At this point you can open your browser to http://localhost:4000 and see your site preview live. Once you are done with your site you can create a final static version of it with
This will make a _site folder containing your site code.
Jekyll will generate a folder structure like the following
_config.yml _includes _layouts _posts _sass about.md css feed.xml index.html
- _config.yml is where you edit your site config, things like the title, your name etc. You can also define new vars here and show them into the templates
- _includes contains the parts of the templates which are repeated over and over. You will include them in your template
- _layouts contains the main layout of the site and you can add other, for each different page type. In this site I have a layout for news, one for pages and one for classes
- _posts is where you put the “news” or “blog”. These are different from pages because are compiled into date - based folders and shown in the homepage in date order.
- the about.md and any other page you want to create are plain text files.
The only thing that makes about.md special is the header on top of the file:
--- layout: page title: FabAcademy permalink: /about/ ---
The layout row tells which file from the _layout folder should be used for this page. The title is the title for this page, shown also in the top menu. Finally the permalink tells which address should be associated with the page.
You can also use folders to define your pages, putting an index inside it: for example if you want a tutorials page, you could create a tutorials folder and an index.md page into it.
Jekyll is very popular, and some people created plugins and themes for it. If you want to use a theme, or to develop your own, you can find lots of good examples at http://jekyllthemes.org.
The Freelancer Theme is interesting because it uses bootstrap.
To use Freelancer, clone its git repository and just run jekyll serve inside the created folder.
Octopress is directly derived from Jekyll. It adds some nice features which make it more suited for a blog, like search, a post calendar, source-code synthax coloring, etc.
As of now a new version of Octopress is in final development stages. See here
If you are looking for an alternative to Jekyll / Octopress, or have trouble with Ruby you can have a look at Pelican.
This tool is based on Python language, which makes it a bit less prone to software version troubles.
As explained in the Pelican great documentation you can install it with:
pip install pelican markdown mkdir -p ~/projects/yoursite cd ~/projects/yoursite pelican-quickstart
Pelican doesn’t come with much example content. You need to create a post befor using it. Create a file ~/projects/yoursite/content/test.md
Title: Title Date: 2010-12-03 10:20 Category: Review This is a test
Then generate the site with
Pelican doesn’t have a built in webserver. But with Python you can run one easily. Go into the site folder and run:
cd ~/projects/yoursite/output python -m SimpleHTTPServer
then open the browser to http://localhost:8080
Pelican also comes with a number of themes
PanDoc is not stricly a site generator but a multi purpose tool for converting documents from one format to another. If you write your content in Markdown, you can use Pandoc to create HTML, PDF, DOC, RTF, etc.
You can download PanDoc from the site http://johnmacfarlane.net/pandoc/
These are the supported file format, and PanDoc converts FROM any of these TO any of these.
- HTML formats: XHTML, HTML5, and HTML slide shows using Slidy, reveal.js, Slideous, S5, or DZSlides.
- Word processor formats: Microsoft Word docx, OpenOffice/LibreOffice ODT, OpenDocument XML
- Ebooks: EPUB version 2 or 3, FictionBook2
- Documentation formats: DocBook, GNU TexInfo, Groff man pages, Haddock markup
- Page layout formats: InDesign ICML
- Outline formats: OPML
- TeX formats: LaTeX, ConTeXt, LaTeX Beamer slides
- PDF via LaTeX
- Lightweight markup formats: Markdown, reStructuredText, AsciiDoc, MediaWiki markup, DokuWiki markup, Emacs Org-Mode, Textile
If you don’t like the options above for creating your site, this could be a useful tool to write your own. :) Someone did it already
Hosting your site
Static sites can be hosted basically everywhere. Starting from any Hosting providers, your Dropbox Public Folder, to Amazon S3 Buckets.
GitHub offers a great free static site hosting service. You can have a personal or a per-project static site.
Personal site works likes this:
- You create a repository on Github named yourusername.github.io (replace yourusername with your username)
- You commit and push your static site to this repository
- Your site is visible at yourusername.github.io
More info on GitHub Pages here.
Fab Academy Archive
Fab Academy hosts personal sites using Mercurial. More on this in the following weeks. Get your site ready by then!!
- Get familiar with HTML and CSS, create some pages
- Create your on site with one of the tools mentioned here, creating at least and About page on you
- Host and upload your site using GitHub Pages
- Extra credit, create your own theme for your site
- Start thinking about your final projects!!!