Creating a sound menu or having a sound effect when the mouse hovers using HTML5 Audio is our discussion this time.

In the past we needed to use Flash to create sound effects like this, looking very sophisticated. But now with the presence of HTML5 which is sophisticated enough to make things easier, we don’t need to make it with flash, and we don’t need to also install Flash Player on our computers, flash players like this can also harm computers because they are vulnerable to malware insertion.

For inspiration you can see some websites that are made using HTML5.
html5 audio menu
Okay, straight to the topic, we will make a menu that when the mouse hovers it will make a sound, for that we need some ingredients 🙂 #LikeCookingSaja.

Resources
jquery
Sound files you can find in soundible
Robot pictures for background
HTML
First we create the HTML structure first, write it as below.

Playing videos on web pages is our discussion this time, where we will try to play files with flv, mp4, wmv, and other formats on web pages with the help of html5 and javascript plugins.

Playing videos on the website is sometimes difficult, but if you already know the right and powerful plugins then everything will feel easier.

Watching
Image By: waferboard

On this occasion tutorial-webdesign.com will try to play videos with video.js, Video.js is a javascript and css that can make our work easier, and already supports html5, even now video.js is called “HTML5 Video Player” although we can also call it “Flash video player”.

How to use it is quite easy, try following the steps below.

HTML
Create an html file with the name index.html, then between the head and /head write the following script

What you need to see there are two files, namely video-js.css and video.js, where both files are obtained from the official video.js website or the video.js github page

For the body, just write the following script

It can be seen that the script above uses the html5 tag, namely video and is added to the data-setup from video.js.

You can replace the following parts:

poster: (image that appears before the video is played).
Autoplay: true/false.
src: for PATH location and filename.
To make it easier we can also generate the desired code.

Making a web browser as an editor like notepad seems impossible, but in fact we can use the browser that we have so that it can become a text editor to take notes, or create html files.

This can be used to quickly take notes, usually rather than flipping through notepad it’s easier if we just click on the bookmark link we’ve created.

Back to the main topic, we can make a Web Browser like mozilla or chrome as an editor by writing the following short script in the Address bar.

Tips:

To try, just Copy Paste the code into the Address Bar in the Browser
Save in bookmarks for easy clicks quickly
Use Google Chrome To Try
Similar Articles

CSS Without HTML
Example 1: Standard Editor
data:text/html,
Copy Paste the script above into the Address Bar in your browser, after that try typing on the blank page that is formed, you can save what you typed by pressing CTRL + S or Menu File->Save

Changing the Editor View.

It turns out that we can change the appearance of the editor in the browser, we can make it similar to notepad, sublime-text and even we can make it like paper to write a diary.

Example 2: Like Notepad
With this we can add the prefix Text.

data:text/html,

TWDNotes:

Example 3: like Sublime Text
Sublime Text in Browser
Sublime Text in Browser

data:text/html,DoJS
Example 4: Diary / Text Notes
As we mentioned earlier, we can make it look like a paper diary that is ready to be written, please copy and paste the following script into the URL Address in the browser.

Jquery is not new to our ears, jquery comes with many effects for our website and almost replaces the flash that used to be used to make our website feel alive with the effects that we can create.

kendo-ui

As there are many jquery enthusiasts, there are also many developers who develop and create their own jquery frameworks, such as JqueryUI, JqueryTools, Kendo UI and many more.

Now I don’t want to explain in detail what jquery is but just one of the frameworks that I also like to use, namely Kendo UI.

Kendo UI is an html5 & jquery framework that is quite complete with plugins to install on our website. Example:

AutoComplete.
Grid (Data Table).
WYSIWYG Editor
ListView
And many more.
Kendo UI provides free (free) and paid (commercial) products, for free kendo UI it is only provided for websites and for paid products it is provided for Mobile UI, DataViz, and Server Wrapper.
For examples and to see in full the features/plugins of Kendo UI, you can go directly to the Kendo UI website.

Choose downloads that are open source and free.

Now I will explain using kendoUI on our website.
First, friends, extract the Kendo UI file that you have downloaded in your website folder. Then enter this code to import components from Kendo UI.

Where CSS Kendo UI is the same as Bootstrap, MetroUI etc, which has styles for buttons and forms.
Okay after we import the Kendo UI component. Time to move on to the Kendo UI plugin.
This time I will give an example of a plugin, namely the DateTimePicker plugin.

Enter this code before:

[js] $(function() {
$(“#time”).kendoTimePicker();
$(“#date”).kendoDatePicker();
});[/js]

Then to display the plugin, enter this code:

Dates :
The code above will display a form that is ready to be used to select a date.
Date is the ID to call the Kendo UI date picker function declared above it: $(“#date”).kendoDatePicker();

example1
For another example, Kendo UI still provides many examples of plugins in the zip file that you download.
This is the full script above:

This tutorial will explain how to create a simple portfolio website using HTML5, CSS3, Jquery. In this case we are trying to create a web portfolio design for a cartoonist, illustrator, or artist. If previously we had created a one page website with a flat design style, now we will again create a one page website, it can even be called just a landing page.

Free Portfolio Templates Layout
Download

Web Portfolio doesn’t need to be too complicated, what is needed is information about who owns the portfolio, examples of work, and contacts who can be contacted, so it’s not too complicated actually creating a portfolio website.

Web Portfolio doesn’t need to be too fancy, it’s quite simple but the contents of the portfolio shouldn’t be simple ~ TWD

Simple tips to make your portfolio more crowded, one of which is to create a blog that is associated with the portfolio, so a blog as a visitor attraction. Hm .. we will not discuss in detail the problem of marketing here 🙂 , back to focus on the tutorial.

Before starting we should know in advance what we are going to make. The following is an example of a portfolio that we will create – DEMO

Ingredients

Just like cooking, making a website also needs ingredients, here are the ingredients we need, because here the author only makes examples, so the examples of his portfolio are taken from several websites, not personal ones.

jquery
CSS Reset from Meyer web
Google Fonts Montez & Sofadi One
Magnific Popup
Critters – Ohh Deer (Image for header)
Q2. What do you do in your spare time? (Image for the How I Work section)
Logan Evolution (Image For Gallary, just for demo)
File Structure

The following file structure has been prepared, the css files are placed in the css folder, the images are placed in the img, the images for the gallery are placed in the images folder, while the popup plugin is in the popup folder.

File Structure
File Structure

HTML Structure
Next we immediately create the HTML structure used. The HTML structure of the template created is already valid based on the W3 Validator.

Creating headers

Responsive HTML templates for free administrator pages are indeed a bit difficult to find on the internet, there are only a few of them compared to other types of templates such as templates for news websites or for portfolios.

Free Administrator Templates

Tutorial-webdesign.com this time will inform you of a free administrator template that is good enough for you to use in your project, of course the quality and features are quite qualified for a free template, which we can use without spending money.

AdminLTE once the template maker named the HTML template for this administrator page, this template was made with Twitter Bootstrap version 3, and of course it is responsive, so it still looks attractive when opened from your cellphone or tablet PC. This template was created by Abdullah, who is a student at the University of Tennessee Knoxville (UTK).

Some of the features in this template include:

Dashboard
Mailbox
Calendar
Invoice
Lockscreen
Login
Register
404 Error
500 Errors
Blank page
This template supports almost all modern browsers

IE 9+
Firefox 5+
Chrome 14+
Safari 5+
Opera 11+
Okay, what are you waiting for, we think you can’t wait to download and try it.

Live Demo | Downloads | Info
Hopefully this template can be useful for you, if you want to make a donation to the creator as a sign you can too, so that the maker is more enthusiastic about making free templates again.

See you in the next articles about the world of websites, greetings

Creating tabs is usually more popular using jquery, but actually it’s enough with css that we can create tabs that are no less good.

tabs-css

In this article, we will briefly explain how to create tabs using only css, without the help of jquery or other javascript.

HTML Structure
First, let’s create the HTML structure
It can be seen in the script above, to create the title of the tab we use input tags and labels, in this example we create 4 tabs, where each tab is given the ID tab1, tab2, tab3, tab4

Meanwhile, the content of each tab is created with section tags, each of which has the ID content1, content2, content3, content4.

Styling with CSS
After we create the html structure of the tab, of course it will not be in the form of a tab, it needs to be designed or styled using css, this is the css code that we use

The most important thing to note in the code above is the code that we marked with /* Important Code */ until the end.

Where is the code that changes the input tag to a tab, why use radio type input? because tabs usually only have one active section while the others will be closed, for that only radio type inputs are allowed to be selected like that.

So the logic is as simple as this: the section tag when loading will be hidden, when one of the tab IDs is active (one of the radio inputs is selected), the contents of that ID will be displayed, using the display:block command.

Demos and codes

You can see the demo and also download the source code at the link below

Twitter Bootstrap is a mobile first front-end framework that is lightweight and quite easy to use and helps speed up our work as web designers or web developers.

Bootstrap is currently the number one or most popular HTML and CSS Framework. Bootstrap is also a solution for those of you who want to create responsive templates, where templates can look good when opened on various devices. Many people already use bootstrap, some of them share their homemade templates for use by others who want to work faster.

For those of you who need a template to speed up work, here TWD displays 10 free bootstrap templates and of course they are responsive for all of you.

Every dynamic website requires a search form, this search form is very useful to make it easier for visitors to find the writing they want quickly.

Every website has a unique and different design, there are times when a designer is confused about where to place the search form because of the lack of space or the absence of a suitable place to put fields to type keywords. So now it is very trending that the search form is hidden and only displays the search icon (magnifying glass). When the icon is clicked, the form will appear and visitors can type keywords there.

expanding dropdown form search

In this tutorial we will try to model a search form like that.

Creating HTML Structure
First we will create the HTML structure first, here I will only write the header section so you don’t get confused, because the other parts are only complementary.

TWD

Web Design & Development Indonesia

Menu and Form
There we can see that we use the fa-search fa-4x class to display the search icon, which is wrapped in a div with the ID #searchtoggl. In order for the icon to appear, we must first include the css code from the awesome font in the head section of the website. You can read about the use of this awesome font briefly in the article Writing Icons for Website Design.

Beautify With CSS
So that the display looks attractive, we certainly need a css script, here we will only highlight code snippets from the search form and menu, because that is the most important part to form the appearance of the hidden search form.

It can be seen there that we use the display:none property on the ID #searchbar so that the search form is lost or not displayed when the website is first run. The form will appear only when the search icon is clicked, and to bring it up we need Jquery to process the trigger event on click, so when the icon is clicked jquery will change display:none to display:block so that the form is visible. And when the icon is clicked a second time then the form will disappear, because with jquery we change display:block back to display:none to hide ID #searchbar

Animation With Jquery
To change the css class easily, we need jquery. When visitors click on the search icon (magnifying glass) in the menu, jquery will change the original class from Font Awesome to .fa-search-minus. From a User Experience (UX) point of view this is fantastic as it helps to differentiate between hidden and visible search fields

Playing videos when scrolling on website pages is a trend right now, many modern websites apply it on their websites, we see this a lot on parallax websites.

It’s interesting to see the changes that are happening to the current website, the website is currently rich in features, many things can be applied to the website, effects are increasingly being used.

Related article:

Making Youtube Videos as Website Background
Tutorial to Change Background Color When Scrolling
Parallax Website With The Coolest Scroll Effect
On this occasion, tutorial-webdesign.com will explain a little about how to create a feature that is usually found on parallax websites, which will play the background video only when the mouse is scrolled.

scroll to play video

HTML Structure
As usual, we start by creating the HTML structure, it’s simple, we only need two tags in this tutorial which must be placed in the body tag, of course, for more serious website implementation, more tags can be used, because this is only for demo. we make it very simple.

Scroll to play video

CSS
Next we need CSS to make the text centered, and make the body height to 4000px, while the video is made in a fixed position and gives a cover value to the background-size so that it fills the screen and doesn’t change position when scrolled.