All posts filed under “HTML

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

Exploring the Mall in 3D
comment 1

Exploring the Mall in 3D

Ever found yourself stuck in a mall waiting and you noticed an interactive digital directory to toy with? Instead of actually trying to find a location, you end up just fiddling with the UI to test its functionalities and response time. You’re not the only one, welcome to the group! We’ve found ourselves doing the exact same thing.

Codrops has come out with an attractive Interactive 3D Mall Map. We fell in love with this immediately due to it’s clean visuals and smooth transitions, definitely something to take a look at.

Take note however, the writer Mary Lou has mentioned that:

This is a highly experimental proof-of-concept. 3D and viewport units support is needed for this to work.

Check out the post Check out the demo

Ink Transition Effect
comment 0

Ink Transition Effect

Transitions maketh Interaction. Any website or mobile application without any transition would seem dull. The complexity of transitions can be as simple as a fade-in effect to something complex like the Call of Duty: Ghost loading UI Interface . Here’s an Ink transition inspired by Sevenhills, Claudia Romano has said :

“By using a PNG sprite and the steps() timing function in CSS, we can create video effects and use them as transitions”.

So what are you waiting for? Hop on the Transition train for a better future! Hola us for any ideas and comments on transitions!

See how it’s done Checkout the demo

VR Fox
comment 0

Mozilla, Web Virtual Reality, and A-Frame

With virtual reality (VR) on the rise, many companies are seeking out to get onto the hype train in anyway possible. Even Mozilla has meddled in VR to an extent. Enter WebVR, an experimental Javascript API that provides access to Virtual Reality devices in your browser.

Along with trying to create an open standard for virtual reality, Mozilla has created a Web Component-based solution for creating 3D visualizations: A-Frame. The community for A-Frame have done a great job making the 3D experience easy for yet visually powerful.

Read more about Mozilla and VR

comment 0

Foundation for Emails 2

Ink (also called Foundation for Emails) is a HTML email development framework that is built around the best email practices. In the era of smartphones, people are frequently checking their emails on their mobile devices and that means the need for a responsive approach to emails.

Enter Foundation for Emails 2, Ink’s successor. This upgraded framework is mobile-ready and allows developers to quickly create responsive emails that work (even on problematic email software like Outlook).  Developed in 2015, this new version focuses on quicker layouts, colors and styles. Foundation for Emails 2 borrows many components, best practices, and workflows from Foundation for Sites. Foundation developers new to HTML emails will feel right at home with this..

More details on 2.0

Flexbox for Comments Section
comment 0

Flexbox: How to Create a Responsive Comment Section with HTML5 and CSS3

Flexbox (Flexible Box) is a method that aims to provide a more efficient way to build powerful dynamic layouts by efficiently laying out, aligning and distributing space among items in a container. It can be implemented on all sorts of modules but is best on smaller sized web apps.

If you ever needed it applied on a comments section of your website, here’s a detailed explanation on how it can be done.

More details

comment 1

How Good Are Your HTML and CSS Comments?

For those who code, commenting is an important practice to always keep in mind. It’s useful for flagging issues or labeling certain areas of code so that yourself and other developers will know what’s going on with the code. It is not uncommon for developers to inherit someone else’ code from years before. This article will test how well you’ve been commenting thus far.

How Good Are My Comments?

Filed under: HTML

 

Ionic
comment 1

Getting Started With Ionic

As a web developer, have you ever wanted to build a mobile app quickly using what you already know? Ionic was made for this very purpose. It is a framework that allows you to build hybrid mobile apps using HTML, CSS and JavaScript. Hybrid apps have benefits over pure native apps in that it has a faster speed of development and also access to 3rd party code.

Ionic is also a completely free and open-source framework which makes use of AngularJS for creating highly interactive apps. All you need to do is install the node and get started.

Let’s build some mobile apps!

HTML Questions Challenge by Alexander Dawson
comment 0

HTML Questions Challenge by Alexander Dawson

If you think you know HTML and have a good handle on modern web standards, you should try this 15 HTML questions challenge by Alexander Dawson from sixrevisions. The questions will test your familiarity and understanding of HTML5 as well as related markup languages like XML and microformats. There is no time limit and score-tracking for this challenge, so take your time. Hit the button below to accept the challenge.

Challenge Accepted

Filed under: HTML