Creating a landing page website with scrolling pages using jquery will be discussed in this tutorial.

The website model that will be created can be used for a company profile website, just adjust it to your needs. The website design in this demo may look like a website with a flat design theme, because the colors used are similar to the colors commonly used in flat design, the colors used in the demo that we will make are taken from the colors in the tutorial-webdesign.com logo

one page scroll
Display to be created

Inspiration

What we are going to make is actually inspired by Apple’s iPhone 5s and iPhone 5c website, where on the website every time we scroll, the page will move pages by detecting the mouse when scrolling. And that’s the effect we’re going to try to create.

HTML
We start by creating an HTML structure for the website layout that will be created

If we see that there is nothing special about the markup, there we only create a header and three for sections which will later function as pages, so there are 3 pages.

Website headers

In the head and /head sections we insert Jquery (javascript framework), OnePageScroll.js (jquery plugin), and the Righteous & Voltaire font that we embed from Google Web Fonts.

Javascript(Jquery)
because we use jquery one page scroll as a plugin to make it easier for us to make the layout effect change per page when scrolling. So at the end of the html code we insert the following code:

$(“.main”).onepage_scroll({
sectionContainer: “section”
});
There it is clear if we specify the section tags in the .main class which will be used as website pages.
besides the sectionContainer option, there are other options like:
easing to define the slide effect,
animationTime for the animation time,
pagination to show page number or not

More options can be seen in full on the OnePageScroll.js github page

CSS
So that the page looks neat, we beautify it with CSS, here we deliberately create three sections so that it is easy for you to change according to the needs of each page.

Creating a Slideshow With Css and Jquery is easy and not as difficult as imagined, in this tutorial we will briefly discuss how to make it.

A slide show is a presentation of a series of still images on a projection screen device or electronic display, usually in a prearranged order. Each image is usually displayed for at least a few seconds, and sometimes for several minutes, before being replaced by the next image.

slideshow-jquery-css

There are 2 slideshow models that we will create here:

Opacity Slideshow (the process of changing images that disappear slowly and alternately).
Flip Slideshow (change process shifts sideways).
Opacity Slideshow
Opacity Slideshow will show the effect of changing images that slowly disappear and are replaced with new images, this can be made by using the opacity set with css.

HTML Structure

Figure 1 Picture 2 Picture 3 Picture 4

div#twd_opa is used to hold the image, while p#twd_opa_controls is used to specify a clickable button to change the image.

The new CSS Variable feature, One of the most frequently asked, most wanted, most awaited requests by web designers is “Can CSS declare variables?”. And finally that question has been answered by the W3C. After a lot of discussion, finally the CSS Custom Property to define variables in css can be implemented. This feature of course allows css code writers to specify variables to be used repeatedly in css documents.

To try it you can use Mozilla Firefox Nightly from version 29 or later.

References to variables can be made in property values ​​using the var() syntax.

css-variable
Image Credit : IaRuth

Custom properties that declare variables must all be named starting with var-. Custom property values ​​must be unique. All can take almost any token stream, as long as it’s balanced.

For example, an author would declare some common values ​​in the style rule that match the root element, so that they would be available for every element in the document.

:root {
var-theme-colour-1: #009EE0; // Blue
var-theme-colour-2: #FFED00; // Yellow
var-theme-colour-3: #E2007A; // Red
var-spacing: 24px;
// var-xxxx to create another variable, the variable condition must be prefixed with var-
}
For Cross Browser maybe you can use the following syntax.
:root {
/* Cross Browser */
-webkit-var-theme-colour-1: #009EE0;
-moz-var-theme-colour-1: #009EE0;
-ms-var-theme-colour-1: #009EE0;
-o-var-theme-colour-1: #009EE0;
var-theme-colour-1: #009EE0;
…
…
-webkit-var-theme-colour-2: #FFED00;
…
}

Variables can be referenced at any element position in the value of other properties, including other custom properties. The variables in the stylesheet above can be used, for example, as follows:

h1, h2 {
/* Cross Browser */
color: webkit-var(theme-colour-1);
color: moz-var(theme-colour-1);
color: ms-var(theme-colour-1);
color: o-var(theme-colour-1);
color: var(theme-colour-1);
}
h1, h2, p {
margin-top: var(spacing);
}
em {
background-color: var(theme-colour-2);
}
blockquote {
margins: var(spacing) calc(var(spacing) * 2);
padding: calc(var(spacing) / 2) 0;
border-top: 2px solid var(theme-colour-3);
border-bottom: 1px dotted var(theme-colour-3);
font-style: italic;
}
Next create the html syntax as follows.

The title of the document

A witty subtitle

Please consider the following quote:

Text of the quote goes here.

then the result is like this:

css-variable

Variables are resolved based on the value of the variable in the element property with the variable reference applied. If the H2 element has style=”var-theme-colour-1: black” above it, then H2{color: var(theme-colour-1);} will by default be resolved using the value in :root.

A variable reference can also include a fallback for use in cases where the variable is not defined or is invalid (due to being part of the variable reference cycle). The first rule in the stylesheet uses variables which are written as follows:

h1, h2 {
color: var(theme-colour-1, rgb(14, 14, 14));
}
which will result in a dark gray color if the theme-colour-1 variable is not defined on any of the heading elements.

So a brief introduction about using variables in CSS, for more info please read the official W3C document

The new CSS Variable feature, One of the most frequently asked, most wanted, most awaited requests by web designers is “Can CSS declare variables?”. And finally that question has been answered by the W3C. After a lot of discussion, finally the CSS Custom Property to define variables in css can be implemented. This feature of course allows css code writers to specify variables to be used repeatedly in css documents.

To try it you can use Mozilla Firefox Nightly from version 29 or later.

References to variables can be made in property values ​​using the var() syntax.

css-variable
Image Credit : IaRuth

Custom properties that declare variables must all be named starting with var-. Custom property values ​​must be unique. All can take almost any token stream, as long as it’s balanced.

For example, an author would declare some common values ​​in the style rule that match the root element, so that they would be available for every element in the document.

:root {
var-theme-colour-1: #009EE0; // Blue
var-theme-colour-2: #FFED00; // Yellow
var-theme-colour-3: #E2007A; // Red
var-spacing: 24px;
// var-xxxx to create another variable, the variable condition must be prefixed with var-
}
For Cross Browser maybe you can use the following syntax.
:root {
/* Cross Browser */
-webkit-var-theme-colour-1: #009EE0;
-moz-var-theme-colour-1: #009EE0;
-ms-var-theme-colour-1: #009EE0;
-o-var-theme-colour-1: #009EE0;
var-theme-colour-1: #009EE0;
…
…
-webkit-var-theme-colour-2: #FFED00;
…
}

Variables can be referenced at any element position in the value of other properties, including other custom properties. The variables in the stylesheet above can be used, for example, as follows:

h1, h2 {
/* Cross Browser */
color: webkit-var(theme-colour-1);
color: moz-var(theme-colour-1);
color: ms-var(theme-colour-1);
color: o-var(theme-colour-1);
color: var(theme-colour-1);
}
h1, h2, p {
margin-top: var(spacing);
}
em {
background-color: var(theme-colour-2);
}
blockquote {
margins: var(spacing) calc(var(spacing) * 2);
padding: calc(var(spacing) / 2) 0;
border-top: 2px solid var(theme-colour-3);
border-bottom: 1px dotted var(theme-colour-3);
font-style: italic;
}
Next create the html syntax as follows.

The title of the document

A witty subtitle

Please consider the following quote:

Text of the quote goes here.

then the result is like this:

css-variable

Variables are resolved based on the value of the variable in the element property with the variable reference applied. If the H2 element has style=”var-theme-colour-1: black” above it, then H2{color: var(theme-colour-1);} will by default be resolved using the value in :root.

A variable reference can also include a fallback for use in cases where the variable is not defined or is invalid (due to being part of the variable reference cycle). The first rule in the stylesheet uses variables which are written as follows:

h1, h2 {
color: var(theme-colour-1, rgb(14, 14, 14));
}
which will result in a dark gray color if the theme-colour-1 variable is not defined on any of the heading elements.

So a brief introduction about using variables in CSS, for more info please read the official W3C document

Web Design is always interesting to watch and follow its development.
From year to year there are many changes, for example this year is very lively with Responsive Web Design and Flat Design, 2013 is even called the year of Responsive Web Design. Because you could say 2013 was the transition period for the web layout paradigm that can be opened on almost all screens.

typography

Related article: Trend Web Design 2012 version of TWD

Here are 10 Web Design Trends in 2013

Responsive design
Web that can adjust its appearance according to the width of the device screen (device)
flat design
The type of design is flat, in the sense that it has no shadow (shadow), uncomplicated texture, no bubble effect, does not use various effects.
Static headers
Websites whose headers are in a fixed position, such as Facebook and Twitter this year
Parallax
A type of web design that uses the effect of moving from several layers at different intervals (speed).
Infinite scrolling websites
The website layout when scrolled down will never run out, because when it reaches the bottom, other data will be loaded again. *does not use paging)
Support for HiDPI (Retina) displays
Websites that already support Retina Display (apple devices)
Typographically-led designs
Websites that really take advantage of the power of typography as a support for web appearances, with WebFont this is getting crowded
Circular design elements
With the start of support for CSS3 Border Radius by modern browsers, the use of rounded shapes for web elements is increasingly being used.
CSS3 animations
The web that uses CSS3 capabilities to create animations, with CSS3 and HTML5 added makes it easier for Web Developers to create animations for the web, without the need for Flash.
Supersized buttons
The display of the button is large enough to make people focus directly on the button.
Those are some of the things that were quite trending in the world of web design in 2013.

Creating effects with css is increasingly prevalent nowadays, by using CSS filters we can create effects that we usually find in Photoshop, even effects like Instagram we can create with CSS3 capabilities. This CSS filter is relatively new, and is still rarely used.

css3 filter effects

In this tutorial we will try to create an effect with CSS Filters combined with CSS Animation so that it will produce an interesting image color transition effect. Unfortunately, it only supports webkit browsers like Google Chrome or Safari.

Usage: This effect can be used to beautify the Header, Images on the gallery website, and more.

Related article:

Creating Black and White Images With CSS Filters
Creating Instagram Effects with CSS3 Filters
Let’s just start by creating an html file.

HTML
In this paper I only show one div, although in the demo there will be many divs because to enhance the appearance of the demo, but basically there is only one div that has an effect.

What you need to pay attention to there is only giving column1 class, because that column will be effected with css.

CSS
To give effect to the div containing the image, we give the effect using the following css

you can see there we only use contrast and grayscale effects, for other effects you can use such as invert, sepia, blur, etc.

Demo

For those of you who can’t wait to see the results that have been made, click the demo link below or download the code from github.

DEMO (Webkit Browser: Chrome/Safari) | DOWNLOAD CODE

So, hopefully useful for those of you who are studying CSS3.

4 Tutorial, Web Design, Web Development 54 Comments

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

Boss Tut Web

An Indonesian Illustrator

Creating Headers
Creating Website Content, here we learn to use the display css functions: table , table-row, and table-cell to create columns that are flat in height in the .box class, almost similar in function to the table tag that we usually see How I Work

Step 1: Sketch.

Pencils Graphite (H) on 17×14″ Strathmore Windpower Bristol

Step 2: Inking.

Inks Windsor Newton Series 7s (0-2), Copic Technical Pens, White Out. Scanned at 1200DPI (Bitmap)

Step 3: Coloring.

Finish Treatment: Photoshop Gradiant layers, hue/adjustment layers. Diffusion achieved using solid fill layer based on color channel, blurred and reduced to 20% Opacity.

The code above is for the How I Work part
Creating a Gallary Section, this gallery section is adjusted according to the rules of the Magnific Popup plugin

Creating a Testimonial Section
Testimonials from ‘Steve Jobs

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Labore, voluptates, neque. Nesciunt, iste, soluta

The code above is for the Testimonial Section
Creating Footer Section

Demo (on desktop & mobile) | Download Code
That’s all for this tutorial, hopefully it will be useful for all of you, if you have any questions, please write them in the comments section.

greetings web design indonesia

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 web design & development Indonesia

The trend of mobile devices, which are dominated by smartphones around the world, is still rising. According to data from IDC in 2013, smartphone vendors shipped 1 billion smartphones worldwide. This trend is also followed by an increasing trend in the use of native applications provided by smartphone vendors through application stores (Apple App Store and Google Play). Through the application store, users of these two devices can download the desired application and then install it on their respective devices.

Along with the growing popularity of native applications pioneered by Apple, it encourages application developers to create various applications, as well as business people to participate in making their applications. The mobile web which has been an alternative for smartphone users in accessing the web is starting to lose popularity, smartphone users are starting to switch to native applications with various advantages it has.

native_app

In this article, I try to make a brief overview of native application and mobile web, so that it can give an overview of native applications and mobile web.

Native Apps and Mobile Web
Native apps or native applications are smartphone application programs made with a particular programming language to run on a platform. For example, native apps that run on iOS, Android or Windows Phone platforms.

Mobile web is a website that is optimized to be accessed by mobile browsers.

Cost
Native app development and maintenance costs more than mobile web development and maintenance. This is even more evident if the development of the native app is also developed on several platforms at once such as iOS, Android and Windows Phone or on other lesser-known platforms. This is different from the mobile web which runs on top of the browser so it does not require development on different platforms.

Development Time (Development)
Native app development takes longer than mobile web development. This is due to technical factors, native app development is more complicated than mobile web.

Performance
The performance of the native app is certainly more satisfying than the mobile web because it was developed to run specifically on their respective device platforms. The hallmark of a native app is its speed in accessing data compared to the mobile web, and this is the advantage of a native app.

Programming language
Native apps on iOS are built with Objective-C programming language, Android with Java and Windows Phone with Visual C++.

The mobile web is built with HTML5, CSS3, JavaScript and server-side languages ​​such as PHP.

Distribution
Native apps require distribution through their application store, Apple App store (iPhone, iPad) or Google Play (Android device) which are owned and controlled by the vendor. Users of each of these devices can easily access the application store via their device, select the application they want, then download and install it.

Mobile web is basically a website that is optimized for smartphones, so users just type a URL name to access it without having to download and install it on their device.

Platforms
Native apps are made to run on platforms that exist on devices, whether iOS, Android, Windows Phone.

The mobile web is how websites are made to be accessed by browsers.

Index
Native apps can’t be indexed by search engines like the mobile web, because native apps are basically applications that “live” on the device.

Advantages
Native app: what stands out from the native app is its fast performance, user-friendly, has a good user experience, visually appealing side, guaranteed in terms of quality and security because it is controlled by each vendor.

Mobile Web: with the principle of “develop once run everywhere” means relatively cost-effective development compared to multiplatform native apps. It can be distributed freely to users without having to get approval from certain parties as native which must get approval from vendors through the App Store and Google Play. Vice versa, users do not need to search first in the application store to access the mobile web.

Weakness
Native app: more expensive development and maintenance costs are clearly a consideration, these costs will automatically increase if the development is carried out on a multi-platform basis. Updates that are made periodically to the native app will create conditions where there are different versions used by users of the native app.

Mobile Web: relatively slow performance compared to native apps. Not yet fully support all browsers on HTML5 features make the mobile web inconsistent in appearance in different browsers. Not able to be mobile

Creating Tabs With CSS

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

Web Design.com Tutorials

CSS Tabs

<h3>Welcome TWDers</h3>
<p>Content....</p>

About TWD

Content….

Contact TWD

Content….

Social Media

Content…
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 an 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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
backgrounds: #5B264E;
font-family: “Open Sans”, “Arial”;
}
a{
text-decoration: none;
colors: #000;
}
a:hover{
color: #B7977B;
}
play {
background: #FFF;
width: 500px;
margins: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
font-size: 13px;
}

/* Important codes */
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDD;
}
label:hover {
cursors: pointers;
text-decoration: underline;
}

tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {

display: block;
}
input:checked + label {
border-top-color: #B7977B;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
}
CSS Code for Tab
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

Thus our tutorial this time, greetings web design & development Indonesia.

If you are interested in being a guest writer on this website, please register immediately and write your interesting articles that are fresh and have never been posted anywhere before.