- HTML5 and CSS3
- Web frameworks
- Static site generators
- Hosting your site
HTML5 and CSS3
- Dive into html5 http://diveintohtml5.info
- Html5up http://html5up.net
- CSS3 Generator http://css3generator.com
- HTML5 Rocks http://www.html5rocks.com/en/
- 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.
- The Grid
- Plugins with a number of Widgets
Static site generators
----- Header ------ ----- Navigation ---- ---- -------- side content bar ---- ------- ------- Footer -------
- 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.
sudo gem install jekyll jekyll new my-awesome-site jekyll serve
_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.
--- layout: page title: FabAcademy permalink: /about/ ---
pip install pelican markdown mkdir -p ~/projects/yoursite cd ~/projects/yoursite pelican-quickstart
Title: Title Date: 2010-12-03 10:20 Category: Review This is a test
cd ~/projects/yoursite/output python -m SimpleHTTPServer
- 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
Hosting your site
- 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
Fab Academy Archive
- 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!!!