javascript-html5-tutorial.com

Bootstrap Tutorial and RWD – responsive websites

January 17th, 2017

Dominik-W

Today a quick tutorial about Bootstrap and creating responsive websites. Actually a template of good start point for further projects. We will also talk about the techniques, which allow us to reach specific results. We also collected links to resources with valuable information.

Bootstrap Tutorial – responsive template by hand

As we know, Twitter Bootstrap (TB) is an open-source CSS framework. Incredibly simplifies and accelerates the creation of solid, nice looking web projects (UI). Mobile-first approach included.

So let’s get straight to the point and create a basic template. We want to get it ready to run in desktop, as well mobile browsers. The first detail will be to define the viewport (area visible for the user at one screen). More about HTML5 basics can be found here.

HTML5 document and including necessary files

Let’s create HTML5 document, and include jQuery, as well Bootstrap 3.3.7 (e.g. from https://www.bootstrapcdn.com).

CSS: visually consistent html5 progress bar in all browsers

October 28th, 2016

Mr. JavaScript

Today a few words about HTML5 progress bar, and more specifically about adding CSS rules to such an element, so it will be looking same in all the browsers. For example there may be a requirement at design level, to keep visually consistent html5 progress bars. The developer may be surprised about the default behavior of this element.

The same appearance of html5 progress bar in all browsers

Different web browsers displays html5 progress bar in a different way. Also the default styles are not same. If we want to get progress bar looking always the same, we need a small CSS trick. A ready solution below.

Useful tools for programmers: Yeoman

August 15th, 2016

Dominik-W

Finally, I’ve got a little bit of time for blogging, so today wanted to write a few words about one of useful tools for developers – Yeoman.

Yo man! Useful tools for programmers – Mr Yeoman

Why to do the tedious, repetitive tasks, if it can be done for us by machine, or in this case – by the program. Yeoman allows us to generate different kind projects, especially creating the structure of folders and the necessary ingredients, in order to the best practices and patterns.

It makes initial creation of necessary folders and files, as well the setup of dependencies.

For example we may create new AngularJS project, where we also want to have Bootstrap, Saas and other extensions, that our project will need.

Installation is based on npm, which for sure we have in our environment, if we have worked with node.js. There also Bower and Grunt will be necessary =>

Top 5 jQuery plugins and libraries – May 2016

May 31st, 2016

Dominik-W

The next portion of good jQuery plugins and JavaScript solutions from our library. Here we present a small ranking of top jQuery plugins from May 2016.

Top 5 jQuery plugins from May 2016

Ordered by popularity.

1. Style elements, use media queries to build a responsive menu in jQuery

In this tutorial you’ll style elements and use media queries to build a responsive menu in jQuery. A nice effect reached quickly.

Progress bar with CSS and HTML5 in a few lines of code

May 11th, 2016

Dominik-W

A progress bar in CSS for web project? Sure, and it without using images. Today short and to the point.

Create progress bar with CSS and HTML5

We can use HTML5 and Bootstrap, or define our own CSS styles.

Solution #1 – HTML5

Let’s add Twitter Bootstrap and jQuery to our web page, and a simple code as below.

...
  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)
    </div>
  </div>

Ready! We have a progress bar. The colors and progress step we define through CSS classes (e.g.: class=”progress-bar progress-bar-danger”) and properties (e.g.: role=”progressbar”, aria-valuenow=”100″). And besides, we set style width of an element.

More examples of progress bars below.

Top jQuery plugins – March 2016

April 3rd, 2016

Dominik-W

Hello! We added many new interesting positions to our scripts and plugins library. Here we present a small ranking of top jQuery plugins from March 2016.

Top jQuery plugins from March 2016

Ordered by popularity.

1. Multi-step jQuery form wizard plugin – jquery.steps

The first plugin is a nice way to implement forms in web application: multi-step jQuery form wizard solution. Turn multiple forms into a step-by-step form wizard with nice effects.

AngularJS Tutorial – a simple UI to control elements

March 12th, 2016

Dominik-W

Angular in practice! Today we have a small AngularJS tutorial, about creating small UI connected with dynamically created (refreshed) graphical object.

AngularJS Tutorial – control an element with Angular

In the basic course of Angular, we focused on information. Now it’s time to see it in a real example. Today’s simple tutorial in small steps will help us with this.

Step 1.

Let’s create HTML5 document and include AngularJS library.

Step 2.

Define an element, on which we will operate from the level of UI. In our example we will create a simple element using CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;
}

Learning AngularJS – a basic course part III – summary

March 5th, 2016

Dominik-W

In the 3rd part of basic Angular course, we will continue topics from the previous part, as well we will touch next related topics.

Further learning AngularJS

Let’s start with filters. It’s a yet another Angular feature, which takes off a part of tedious work from the programmer. Let’s see them in action, when formatting various kind of data.

AngularJS filters

Even in the previous part we could see how simple in use (but useful) the filters are. For example:

...
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
...

av-top5-jquery-bootstrap-show-hide-password

Learning AngularJS from scratch part II

February 6th, 2016

Dominik-W

Today we will continue learning the Angular JS framework, by getting to know better the most important parts of AngularJS application, as well by analyzing small practical examples.

Learning AngularJS – further steps

The previous part describes basic aspects of this great framework.

We already know that AngularJS is a JavaScript language framework, and it extends HTML through ng-directives. The previous part of this course shows also a simple example with data-binding. We are also aware of many useful directives, for example ng-init:

<div ng-app="" ng-init="firstName='Joe'">
  <p>The name is <span ng-bind="firstName"></span></p>
</div>

Let’s add AngularJS expressions to this. They exist in double brackets, e.g. {{ expression }} and on them AngularJS can execute its magic. The expressions can also be stored in the ng-bind=”expression” directive.