Saint Louis Software Banner

SaintLouisSoftware

This site only has a single code base for both desktop and mobile. Rather than doing things the old-fashioned way of looking at a user agent and deciding which site to serve a visitor, the site’s designed in such a way that it is intended to look good on a wide range of devices, with different aspect ratios, resolutions, and screen sizes.

If you’re on a computer, try resizing your browser window and scroll up and down to see the different effects at different resolutions, aspect ratios, and levels of scrolling through a page.

Here are some of the modern features that went into this site’s frontend:

  • HTML5
  • CSS3
  • Media queries
  • Modal boxes
  • Image lightboxes
  • Collapsable hamburger menu
  • Sticky navbar
  • Responsive design
  • Bootstrap classes
  • Responsive columns and rows with breakpoints
  • Transitions
  • Fluid images
  • Hidden overflow images (for a different visual effect)
  • Quote boxes
  • Carousels
  • Glyph icons
  • JavaScript and jQuery
  • Including aesthetically-pleasing fonts rather than being limited by fonts installed on the visitor’s device
  • Visual hints at interactivity, such as lightening or changing the cursor on hover

I eventually want to get more into frontend frameworks such as Angular for making single-page applications (SPAs).

Here’s what I made it with:

  • Namecheap for the domain, hosting, and SSL
  • cPanel X
  • Softaculous
  • CloudLinux
  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Bootstrap
  • FontAwesome
  • Proxima Nova
  • Tether
  • ShareThis
  • Google Analytics
  • Disqus
  • Open Graph Protocol
  • Google Custom Search
  • Cloudflare, including caching and security and CDN features
  • Various minifiers and compression tools
  • PHP
  • Google Recaptcha
  • Visual Studio Code
  • W3 Validator
  • Facebook OGP Debugger
  • GIMP
  • Google AMP
  • Pingdom for monitoring site performance and uptime

You can check out the saintlouissoftware.com GitHub repository here.