Web Development Labs - Blog

In this tutorial, we will learn about the very basics of Adobe Illustrator and see how to create a new file, how to setup a file, and some very basic options that every designer must know. Contributer: Faizan Company: Web Development Labs www.webdevelopmentlabs Submit your feedback here: www.webdevelopmentlabs/flow/surbey Our Facebook Page: fb.com/officialWDL Other Playlists: Muft or asaan tareekay se seekhen #HTML, #CSS, #JavaScript, #Angular 6, Angular CLI, #jQuery, #Bootstrap. 📘LEARN HTML -- [ https://www.youtube.com/playlist?list=PLa9CM2i1zaCptC-1nRcl-DUvEnRD1gi0i] 📕LEARN CSS -- [ https://www.youtube.com/playlist?list=PLa9CM2i1zaCq6onaOHHgSkllzKSWFdU7V ] 📗LEARN JAVASCRIPT -- [https://www.youtube.com/playlist?list=PLa9CM2i1zaCp27vPPYHZpeU9lXkjqDQeV ] 📘LEARN BOOTSTRAP -- [https://www.youtube.com/playlist?list=PLa9CM2i1zaCp-yDhsVKkfXYWuWEKh1m2A ] 📕LEARN ANGULAR -- [https://www.youtube.com/playlist?list=PLa9CM2i1zaCow3HD428sLMUj1xtQRCOEi ] 📘OVERVIEW O...

In this tutorial, we will learn how to use the bootstrap container and container-fluid classes to make website responsive. Company www.webdevelopmentlabs.com Give your feedback here: www.webdevelopmentlabs.com/flow/survey

In this tutorial, we will understand the basic concept of bootstrap, how to use it with HTML to make websites. Company: http://www.webdevelopmentlabs.com

Introduction to JavaScript (Very Easy English) Frontend Development Course JavaScript is a languages that runs in the web browser to create interactive experiences for the user. In this introduction to javascript tutorial in very easy english, I have compared JavaScript with CSS and PHP, and descibed how they all are different. company: www.webdevelopmentlabs.com File: https://stackblitz.com/edit/js-v1-bksbqe App: https://js-v1.stackblitz.io/

In this tutorial, we will learn how to download bootstrap in your system, how to use bootstrap in HTML, how to add bootstrap dependencies for beginners. We have also tested bootstrap various aspects and identified the purpose of each dependency.

In this tutorial we will learn how to use jquery and how to read jquery API documentation. As a Bonus, I will also explain what is API that is application programming interface. jQuery is a javascript based framework that simplifies the development tasks for a web developer. JavaScript and jQuery can be used side by side without causing conflicts. The two most widely used methods of jQuery are fadeIn and fadeOut. These methods are applied to a selector to take effect. FadeIn method smoothly displays the selected element, whereas fadeOut method smoothly hides the selected element from the view. In order to understand these methods we have done two things. First, we have used these methods in our project; secondly, we have learned to read the API documentation of jQuery. We do not read the entire API Documentation; instead, we only read specific parts and areas. For example, we read the definition or description of the method; then read the parameters; then see the examples; use ...

In this tutorial, you will learn about JavaScript functions, how they are created and used in an object. You will also learn about arrow functions and their usage in a JavaScript project. FILES Basic Functions https://stackblitz.com/edit/js-cba8jz Arrow Functions https://stackblitz.com/edit/js-nv9vye As the word Function itself means that some action is performed so is the real purpose of this JavaScript aspect is. Functions are meant to perform following actions: 1 - value display -> DOM (display website) 2 - value popup -> alert() 3 - value change 4 - value assign 5 - object create 6 - variable create 7 - new function 8 - simple and complex calculations In this tutorial, we will not cover all the purposes but we will do see how the value is displayed in the DOM, how an external value is changed and also see how parameters are used to make interactive applications in JavaScript. The code is super easy, but you need to pay great attention at what is being ...

In this lesson we will understand what is a JavaScript object, how its created and used in an example project. PROJECT FILES https://drive.google.com/open?id=16P7bMZ43Nr64zj0U_7obeCE0uCo-y1eE We are using an example project which is a resume website that includes portfolio. This portfolio does not contain any images, title or description INSIDE the HTML. Rather it is in a separate data file. What we have to do it fetch data from this file based on what portfolio DIV is clicked. The information of that portfolio will be displayed in a modal. This modal is created only once and displays the data according to the clicks. We will create different objects in our reference file where each object will represent one set of actions (or properties). For example, we will reference the complete modal and its buttons, links, icons, image inside an object and use it smartly to write our logic. If we will not follow this approach, we will fall into writing too much codes with too little impac...

In this lesson we will learn of Front-end development, we will learn about JavaScript Arrays. After understanding about the JavaScript Arrays we will utilize them in the project. JavaScript Array is a named container like a variable, but it stores more than one value. Each value is separated by a comma, and enclosed in square brackets. Each value in the array can be called separately and utilized to form other forms of data structures. In our resume project we have utilized the array mechanism to store references of HTML Elements. These HTML elements will be referenced in our actual JavaScript code where program logic is written. PROJECT FILE https://drive.google.com/open?id=1gCGmFr7oFiwuugHJPfzIZk3qnqpfT9gv

In this lesson, we will understand what is a variable, how its created and used along with jQuery. REFERENCE FILE https://drive.google.com/open?id=1FJP... Variable is a value-holding container. Means, it's just a name that can hold a value like your name, age, date of birth, etc. But why do we create a variable? There are number of reasons, but the following are important to understand: 1. So that we can use this in different locations of our application. Reason? Because we cannot write our name a million times by hand (or even copy paste). Reason? Because it's time consuming and error prone. Variables improve our work and project efficiency. 2. We need to manage all the instances from one place. For example, we have used a variable thousand times in different places. Now changing the value of the variable once will update every other instance. Variables provide us greater control over our content. Now how to create a variable? That's really simple. Just writ...

[ARTICLE COMING SOON]

ARTICLE COMING SOON

Article coming soon

Article coming soon

S3 V6 - Class and ID (URDU) Tutorial | Phase 1 S3 V6 - Class and ID (ENGLISH) Tutorial | Phase 1 Understand and learn concept of Class and ID in Urdu Tutorial. files - - https://goo.gl/QTY6E8 This article elaborates the difference between CSS Class and ID . To understand the difference, consider the example of a group children in a school; they are categorized into classes as Grade 1 - Red, Grade 1 - Blue. The problem of this categorization is that if they all are made to stand together as a crowd then an outsider cannot identify the grade colours of the students. An outsider can only identify when they see them sitting in their respective classes. In this condition, if the outsider is asked " Hey outsider, please identify which students belong to grade 1 - red!" They would of course reply "No. How can I identify the students when they have no proper identifier?" The management now decides to change uniforms of each class according to their colour...

Have a look at the project that we will create in pure CSS in phase 1. The project is entirely CSS based and does not involve any JavaScript code for interaction. [WILL BE UPDATED SOON] -- please wait for it :)

When developing a website, you must proactively decide its structure before starting the coding. But what does the Web Structure mean at the very first place? Website Structure can be defined as follows: When you talk about the structure of a website, you are talking about its components , their working , their location , their inter-dependency , and their interaction with the user. The design of the Website Structure does not include code. Generally, the design includes, wire frames, sketches, mock ups, lists, flow charts and other visual aids. What is a component? Well, it can be defined as follows: Components are the useful or functional parts of a website Every component has a particular purpose and function. For example, navigation bar of a website has a purpose of providing navigation links to the user. But some, components are versatile and have multiple purposes. For example, a header of website can contain a navigation bar, a search bar, a login form...

There are three ways to incorporate, embed or attach CSS with HTML web page: 1 - Inline CSS 2 - Internal CSS 3 - External CSS All of the above methods have their own specific syntax and implementation.  Inline CSS Inline CSS is added as an attribute to any HTML element . The name of the attribute is style. It is added like this: <div style=" " ></div> In the inverted commas, you have to enter the property-value pairs, like this: <div style=" color: red " ></div> Internal CSS Internal CSS is added as an  HTML element  under the HEAD tag of HTML web page. The name of the element is <style> . It is added like this: <html> <head> <style> h1 {color: red;} </style> </head> External CSS External CSS is added as an  HTML element   under the HEAD tag of HTML web page. The name of the element is <link> . It is added like this: ...

You read it right. You are telling the world that you have got a website that do wonders and magic for your 'valuable' customers, and when that valuable customer visits your website they are unable to find dunk out of it. Pardon my words, but this is how most people are doing marketing of their websites and web applications. If this is how you are going to do it, then it's better not to do it at all. I always remind my team, marketing begins when your development and design team starts working on your website; it does not start when you start the marketing campaign. The reason: when you announce that you have a website, please visit my website, get benefited from my website before its too late, and all those fancy catchy lines you use for your website, then you better make sure that when your customer visits your website they are able to explore and enjoy your website instead of feeling lost and finally frustrated. If you are not taking care of the user experience of your...

A few years back, 'Web Development' term was used for the process of developing a website. This was when web development just started to gain popularity. However, with the growing need of having browser based experience within the applications, developers started a new venture called web applications. The reason for its popularity was quick development, increased manipulation of media and content, and of course the aesthetics. Despite of its popularity, security remained its main concern for the data-critical organizations. After a while, developers managed to flawlessly handle the security concerns of the organizations. During this time span, Web Development semantically comprised of both website and web application development. During the past few years, into this group joined another term called Mobile Apps. Just recently before this addition, native apps was widely looked for, but now organizations have realized that the power of a native app is achievable in lesser cos...