Est. read time: 4 minutes | Last updated: December 17, 2024 by John Gentile

Contents

Overview

A good starting point might be to check out the tutorials and reference over at w3schools.com or the Grab Front End Guide or Google Web Fundamentals.

User Experience (UX)

Page Layout

Examples

  • HTML5 Boilerplate
  • HTML5 UP
  • jQuery-menu-aim: jQuery plugin for dropdown menus that can differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu’s contents.

Icons

Content

Markdown

  • GiHub-Style Markdown Cheatsheet
    • To see a complete list of syntax highlighting for various languages in GitHub Markdown, see the supported tags in linguist
    • If using Jekyll, the Rouge syntax highlighter is used. To wrap a block of text to be syntax highlighted you must use liquid tags around the text:

{% highlight ruby linenos %}

def foo
  puts 'foo'
end

{% endhighlight %}

A full list of applicable short names for syntax highlighting can be found on the Rogue wiki. Note that a custom/unique syntax stylesheet might need to be used to color the applied syntax classes the lexer applies.

  • To embed LaTeX or other MathJax capable equations and symbols, use $ symbols like $ \some \math \commands $ to put rendered equations inline
    • Use double $$ symbols to have a formula appear on it’s own new line
    • For kramdown, double dollarsigns actually represent math that will go inline with text. To have math statements appear on a newline (i.e. not inline), use escaped dollar signs such as \$\$ 5 + 5 \$\$
    • It’s also useful to use online LaTeX editors like CodeCogs
  • kramdown Syntax: kramdown is used in Jekyll
  • LaTeX

Graphing & Charts

Fonts

Code & Tools

npm Packages

Google Tools

  • Analytics: Easy website tracking and analytics that can be added to any website (including this one).
  • PageSpeed Tools: Analyze websites and pages and recommends actions to make pages faster and more optimized.

Frameworks & Site Generators

Frameworks

  • Node.js is a JavaScript runtime built on Chrome’s V8 engine that is light and efficient.
  • Django is a high-level Python web framework that promotes rapid development and design.
  • Vue.js JavaScript framework for building web user interfaces.
  • Mobirise generates static website content (HTML + CSS) in a quick and easy interface
  • Electron cross-platform JavaScript framework for building desktop and web applications with JS, HTML and CSS.

Jekyll

Jekyll is a static site generator that can easily create scalable websites using a combination of pages with YAML Front Matter and Liquid tags/expressions for dynamic generation.

An alternative- and faster- framework is Hugo

SEO (Search Engine Optimization)

The goal for many websites is to attract the most amount of viewers (and the right targeted audience) as possible. Since most people start their information finding journey on search engines, websites should optimize their design to better be categorized by search engines and/or show up higher in search results. The main drivers of a site with good SEO is:

  • Lots of Good Content: Search engines purposefully rank and categorize websites and their content based on what humans want and are looking for. Therefore, the most important part of SEO is to write lots of valuable content that is inline with the purpose of the website. This means writing lots of informational pages that people will want to read.
  • Linking & Layout: Sites that are easier to crawl and are determined to be easy to use for end users rank higher. This means having nicely structured menus and links that network together your site help here.
  • Structured Data: Structured data is used by search engines to get useful metadata about your website beyond traditional <meta> tags in your header. This can come in a large variety of forms depending on your intended audience and site type but generally inserting JSON data in Schema compliant forms or using the Facebook Open Graph Protocol tags is enough here.
  • Site Speed: The time it takes for a site to load is not only a metric for users in the usability of a site but search engines also quantify this to rank websites (with faster load times ranking higher). There are some basics to optimizing site speed, such as minimizing resources or server side improvements, but a quick and thorough way to check what parts of a site could be improved is to use site speed tools such as:
  • Encryption: As more and more users expect some level of encryption when interacting with websites they visit, search engines give an indexing boost to websites that provide HTTPS encryption.
  • Mobile Friendly: Similar to having a fast, easy to use website, as mobile device use increases across the world, search engines are purposefully ranking “mobile friendly” sites higher than sites that do not have responsive designs or are heavy on ads and external content. Projects like Google’s AMP (see examples here of AMP) and Progressive Web App Checklist provide guidelines for creating websites that are well suited for mobile users.

Hosting

There are many, many options for website hosting, especially depending on your website needs (e.x. performance, static vs. dynamic websites, cost, etc.). This site is benefitting from hosting on an Amazon Web Service S3 bucket and content distribution with Amazon Cloudfront. This allows for super fast and cheap static website delivery as well as a simple solution for HTTPS website hosting.

References



Maintained by John Gentile • Found a problem on this site? File an Issue
This work is licensed under a Creative Commons Attribution 4.0 International License.