Posts

How we make the custom Drag and Drop through pure Javascript code with HTML5.

-
Image
If we used plugins for Drag and  Drop functionality then page is very complex and load time is more. So, always used minimal Jquery plugin for web page. We analayze, develop website minimum JS plugins used and clean, clear and minimum css code using for webpage. Used new technology image like webP,svg and progressive. Provide custom JS code for Drag and Drop. Create two panel one is Drag location means which you have Drag property like image and text and second is Drop location when you have put the Image and text on desired location. Simple copy the code and paste the code and check it.  <!DOCTYPE> <html lang="eng"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drag And Drop Functionalty With Custom JS Code</title> <style> *{padding:0; margin:0;} body{font-family:Arial, Helvetica, sans-serif;} .container{margin:25px auto; width:1000px; box-sha...
Post a Comment
Read more

Angular for beginners. Enviroment setup for Angular.

-
Image
I want to discussed with you, how to start first project in Angular. step by step i will expalain you how we satart angular first time. Steps:- 1. Install Node 8.x or later NPM 5.x or later     2. Install Angular CLI 6 or later         npm install -g @angular/cli [Installing first time]         npm install -g @angular/cli@latest [For upgrade]    3. For best coding editor tool Visual Studio Code.    4. Open command line.    5. Create the new project.        ng new angularProject -d        ng new angularProject --skip-tests        Project is successfull created. Now run the project.   6. Go to the project directive.   7. ng serve -open   8. Project is show on browser.
Post a Comment
Read more

How to make custom slider with next and previous arrow with jquery. Simple jquery code you have used to make custom slider.

-
Image
See the given below code. <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Slider With Next previous Arrow</title> <style type="text/css"> *{padding:0; margin:0;} .container{width:1000px; margin:0 auto;} .container .slider{width:100%; float:left; border:1px solid #ccc; box-sizing:border-box; position:relative; overflow-x:hidden;} .container .slider ul{position:relative; padding:0; margin:0; list-style:none;} .container .slider ul li{width:1000px; float:left;} .container #next{position:absolute; top:50%; right:0; cursor:pointer; background-color:#fff; font:bold 15px/20px Arial, Helvetica, sans-serif; padding:5px;} .container #prev{position:absolute; top:50%; left:0; cursor:pointer; background-color:#fff; font:bold 15px/20px Arial, Helvetica, sans-seri...
Post a Comment
Read more

How to use CSS Flexbox.

-
Image
Flex is the css3 property. Flexible box or flexbox is complete control over the alignment, direction, order and size of our boxes. If you used display:flex;  justify-content: space-around; The justify-content property also lets you distribute items equally inside a container. Flex used alignment, direction, order and size. Flex is dependend on three values maximum, minimum and fixed. Write flex property in css flex: 0 0 0; If you write flex: 10px 0 0; It means how much grow the iteam rest of the iteam. If you write flex: 0 10px 0; It means how much shrink the iteam rest ot the iteam. If you write flex: 0 0 10px; It means specifies the initial length of iteam. If you used flex property in you webpae also you know about how flex is used and effect on webpage. Some of flex property you may used on webpage. display: flex; to create a flex container. justify-content to define the horizontal alignment of items. align-items to define the vertical alignment of items....
Post a Comment
Read more

Discuss about git Basic command

-
Image
We are discuss about git command it can help you. When you first time used git on your pc. Some below command which have helpful for first time git user. git init   -   This command is used for create new local repository. git clone   - This command is used for create   existing copy of local repository. git add [filename] – This command is used for one or more files add on staging server. git commit –m “commit message” -   This command is used for commit message if any changes on staging server. git commit   –a   - This command is used for added files and commit any files on server you have changed. git push   -   This command is used for merge the changes on master brarnch. git status    -   This command is used for show all status of changes. If you can any changes on git it will be show all status. git checkout   -b   -   This command is used for create new branch and switch to it. ...
Post a Comment
Read more

Why developer are used webP Image for webpage

-
Image
WebP image is developed by Google to be able to create light weight and better looking image quarliy. WebP image is new technology   image format. It’s make webpage faster and less load time when page is render on web browser. WebP image is reduced twenty five percent instead JPEG and PNG image type format. WebP image is light weight image format. It’s help you page speed rank is better user other format image like JPEG and PNG. WebP natively support google chrome, Firefox, IE Edge,Opera browser and other tools and software libraries . In other hand I recommended, If you have used JPG image for webpage reduce the image size in photoshop in 70% optimization and check the progressive mode.
Post a Comment
Read more

Welcome to our Blog. Exploring Web Technologies.

-
Image
Welcome to our Blog. Exploring Web Technologies. We share you all UI/UX and Development stuff.
Post a Comment
Read more