All posts filed under “HTML”

All the HTML-related tutorials, ideas and various posts in Stampede Constructs

April 30, 2015   |   Less than a minute reading time
comment 0

Responsive Data Tables: A Comprehensive List of Solutions

Since the adoption of responsive web design, various approaches have been developed for establishing tables that can scale well in different viewport sizes. In this very informative Sitepoint article, web developer George Martsoukos compiled a list of JavaScript-based responsive data tables solutions with accompanying Codepen demos that may come in handy for your responsive website design and development. The reviewed solutions are:

  • Bootstrap’s Responsive Tables
  • Foundation’s Responsive Tables
  • Stacktable.js jQuery plugin
  • Tablesaw jQuery plugin
  • RWD-Table-Patterns
  • FooTable jQuery plugin
  • DataTables jQuery plugin

Deciding on which solution to use depends largely on the type/size of your data and how they will be fed into the table (static or dynamic) as well as considering whether or not you need extra features such as sorting and filtering. Hit the buttons below to learn more or jump straight to the demos.

View More View Demo

April 17, 2015   |   Less than a minute reading time
comment 0

How to Create a Chrome Extension in 10 Minutes Flat

In this Sitepoint article, web developer John Sonmez showed us how easy it is to create a Chrome extension in just 10 minutes. Chrome extensions consist of HTML, CSS and JavaScript. Like regular websites, the UI are build using HTML and CSS while the extension logic are handled via JS that taps into the Google Chrome JS API. Finally to plug these files as a Chrome extension, you need a manifest file called manifest.json that describes your plugin in the way that Google Chrome understands. Take a couple of minutes to follow John’s tutorial and you’ll end up with a basic website speed analyzer extension that provides a really nice base for further customizations and tinkering. Hit the button below to learn more.

View More

April 15, 2015   |   Less than a minute reading time
comment 0

Creative Gooey Effects

In this Codrops post, web developer Lucas Bebber demonstrated an advanced experimental gooey effect using SVG filters that can be used on a variety of web interactions. With SVG Filters we can modify a given source graphic with special effects and use the result as an input to another filter declaration, creating an infinite range of possibilities for effects. Read more to understand how the whole effect is constructed and check out the demos to get some ideas on how the gooey effect can be applied elegantly in real world applications.

View More
View Demo

April 3, 2015   |   Less than a minute reading time
comment 0

X-Type – An HTML5 Game

Survive as many boss fights as you can in this cool looking space shooter created by Dominic Szablewski using HTML5 and JavaScript for his Chrome Experiments project. The game engine comes in the form of Impact JavaScript Game Engine which is also a creation of Dominic. On desktop browsers, players use keyboard and mouse while in mobile devices the game outputs a virtual joypad for controlling your ship movement and targeting. Read the developer’s blog for some technical background story of this HTML5 game or let’s get loose and see how many level you can survive!

View More Play Game

March 27, 2015   |   Less than a minute reading time
comment 0

Media Queries: width vs device-width

If you are new to the world of responsive website development, you have probably seen at least the most basic media query expression using width. Besides width, there is also device-width which expands to min-device-width and max-device-width. Although it’s unlikely that you are going to use device-width, it is important to have a good understanding about the difference between width vs device-width. For a rough idea, take a look at the main image used in this blog post above. For a more detailed and technical explanation, check out this Sitepoint article by web developer Ryan Reese as he attempts to shed some light on this topic accompanied by simple code demos. Hit the button to learn more.

View More

March 13, 2015   |   Less than a minute reading time
comment 0

HTML and CSS Cheat Sheet (Infographic)

Calling all beginners who wanted to be a website developer or designers looking to dabble in HTML and CSS, web hosting company Bluehost has just the infographic for you. According to Bluehost, even with interactive drag-and-drop web-building tools such as WordPress and Weebly, it is still important to know some basic coding when building websites. They are right! If you haven’t used HTML and CSS before, or if you consider yourself a beginner, take some time to familiarize yourself with these basic coding languages using this cheat sheet.

View More

Sinousgame - A Games Created Using HTML5
February 14, 2015   |   Less than a minute reading time
comment 0

Sinuous – A HTML5 Game

Sinuous is a simple yet addictive game created using HTML5 by Hakim El Hattab. A game with a single objective: avoid colliding with the red dots. You can gain power-ups by picking up the the bigger non-red dots such as for slowing down the game speed and magnetic force field around your cursor. Do try this HTML5 game and see how many levels you can last!

Play Game!

hmtl
January 24, 2015   |   Less than a minute reading time
comment 0

What is the Correct Method to Make Linked Header?

This short blog post by Chris Coyier discusses an interesting point about linked header HTML structure. To put header inside anchor link or to put anchor link inside header tag?

Link inside header:

	<h1>
		<a href="#">Header 1</a>
	</h1>

Header inside link (valid structure since HTML5):

	<a href="#">
		<h1>Header 1</h1>
	</a>

Both methods are just fine but turns out majority of web developers still prefer the original and more semantic way of coding HTML with the link sitting inside the header.

Hit the button below to read the entire post and don’t miss the comments section too.

View More

Filed under: HTML

 

checkout
January 23, 2015   |   Less than a minute reading time
comment 0

Checkout Styling Ideas

A while back, Codrops author Mary Lou created this cool morphing buttons demo. In her latest UI-themed post, she reapplied the UI concept to an e-commerce website to spice up the shopping cart view right before the user begins the checkout process. This simple but elegant idea helps create a pleasant and natural purchasing experience for users. The effect was accomplished using CSS transforms and transitions, which requires modern browsers. Hit the button below to learn more and view the demo.

View More   View Demo

Filed under: HTML

 

Unicode Symbol
December 19, 2014   |   Less than a minute reading time
comment 0

Unicode Symbols as Replacement for Font Icons

When we think of pretty font icons like arrows, hearts and stars, we think of font icon services like FontAwesome or Fontello. If you are developing a website using only simple shapes, you actually can use unicode symbols as replacement for font icons. The unicodes are essentially part of your operating system so you don’t need any special library or plugin and you treat them like regular text. For example, to change the icon size, simply change the font-size values as usual. Danny Markov from Tutorialzine has shared a very good article on how to use unicode symbol codes. However, unicode symbols have limited icons or symbols. If you want to use many icons in the future for the same website, Fontello is the best option based on my experience. Hit the button below to view the tutorial.

View More

Filed under: HTML