Posts

Showing posts from March, 2019

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