Connect with us

Website design

Cleanup CSS and HTML codes by Dreamweaver CS-6

Learn how to Cleanup CSS and html Codes. These simple ways to optimize and beautifier your html codes for search engine, Humans and reduce size of codes.

Published

on

Dreamweaver is one the finest code editor for designer and developer. Here you can create and manage HTML, CSS, JS and PHP files very easily. Sometimes we are doing coding as per our condition but Do you know your code is tidying or perfect structuring for search engine?

Advantages of Cleanup CSS and HTML Codes

The advantages of clean code in html and well organized CSS. If your code is immaculate, it will load more quickly and fast appear in the search engine. If your code is clean and well organized then search engine can understand your code and content of your webpage. It also help to your visitor for easily read content and view nice looking design.

Easy ways to clean up and reduce size of your code

Dreamweaver provide you automatic source formatting features where you can just select your code and apply this method. It will magically clean up your code of html.

How to formatting and beautifier html code?

If you are using Dreamweaver CS6 then not need any extensions or plugin for formatting codes. You can simple ways to formatting html code.

  1. Open Your Dreamweaver.
  2. Click on Code View in Document tab.
  3. Click on Commands menu then select “Apply Source Formatting”.
  4. Now your Code is looking cool.

How to cleanup and beautifier CSS code?

This methods to you can reduce size of CSS codes. Follow these easy steps which can give your features to optimize your CSS scripts.

  1. Click on Edit menu
  2. Select Preference or use keyboard Shortcuts “Ctrl + U”.
  3. Select left side menu : Code format
  4. Advanced formatting: click on CSS button.
  5. Popup CSS Source Format Options.
  6. Unchecked each property on separate line.
  7. Click on and Apply.

 

CSS and HTML Code optimization

Online optimize your CSS and JS scripts

Code Beautifier: this is one of the best online code formatting and optimization website for CSS and JS.

Clean CSS: just copy and paste your code it will automatic beatify your CSS code.

ProCSSor: it is superb and simple way to format your CSS, HTML, and JS codes.

 

 

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Website design

6 Best Web Development Tools that’ll Improve Your Coding

Published

on

Do you want to resolve web bugs from your website? Well, you do not know which is the best web development tools.

In this article, I recommend you some high-quality web tools, which can help you to solve HTML errors, Jquery, and design bugs.

I have written some perfect Web developer tools for Web designer and developer. In this post, I will show you the best tools to solve HTML tags, layout fixing, and Jquery bugs.

There are many software and add-ons are available in the market. What you will learn from this post,

  • List of Top Web Development tools

Best Web Development Tools

 

 #1. Google Web Developer Tool

Google web Developer tool is a part of Google Chrome. It is most popular and free to use. Almost every web programmer is know about this tool.

Google Web Developer tools is very handy and easy to use. If you want to change web pages colors, and structure, it allows you to edit.

Google Web Developer tool to you can do live preview, edit and solve errors.

it will open by “F12” Shortcut key in Windows and Mac.


Advantages of google Web Developer tool:

  • Easy to Debug
  • Inspect: to select any element in the Webpage
  • Jquery Debugger
  • Search Line Numbers
  • Responsive Check: Toggle Device Mode
  • Page load time information
  • Real Time Edit and Debugging
  • Easy to Copy / Paste codes

#2. FireBug tool:

  • Showing JavaScript Errors
  • Console to test error
  • Inspect HTML Code
  • CSS Code View and Edit real time
  • Testing New Things

You may download from : FireBug Web Development Tool

#3. WEB DEVELOPER: Chrispederick

1. Quick, Handy and Compact Web Development tool
2. it is available for Google chrome, Firefox and Opera
3. Easy to debugging JavaScript and CSS Codes
4. Outline Information
5. Resize
6. Images
7. Color information

You may download from: Chrispederick Web Development Tools

These three tools are my favorites which I am using. I am going to also show you some other interesting tools for design and development website.

#4. HTML Validator

HTML Validator is one of the advanced tools which allows you to optimize html codes and check html validation form W3C validation.

Do you know about what is HTML validation? If do not know no worries, it is html rules which is apply on html codes.

This is one the best add-on for HTML validation, which is available in Firefox add-ons.

If you want to identify html errors in a webpage then this add-on is best for you, which is show you error list in preview section.

Also check html validation from W3C.

#5. app.telemetry Page Speed Monitor

This is a new extension for developer and designer which is show you html page is load time.

HTML page load time is very important because it is improving your google ranking.

If you want to rank your website fast. You should have light weight page, which is fast loading and quick opening. App.Telemetry extension will help you, and show you page improvement area and errors.

It is available for Google chrome and FireFox.

#6. Page Load Time

Page load time extension is available in Google Chrome browser. This is a SEO Extension which is show you page load time.

This is very helpful extension for developer and designer who want to make SEO friendly website.

It will show you which file loading fast and slow. You can easily improve your website.

You may download from: Page Load Time

I hope you like this post. I am sure these best web development tools can help you for improve your web design and development skills. If you like this post please share with your friends and family.

Continue Reading

Website design

How to optimizing images for the Website

Photoshop to optimizing images – if your website’s images are not optimizing then your website is losing visitors and taking lots of time to loading.

Published

on

Optimizing images is one the best thing for loading fast website. Website browser support many file formats like jpeg, gif, and png. If you website is loading more time then visitor leave your website and find other website therefor you need to optimize your images for the web which makes your website faster and quick responsive. Today I will guide you how to make great quality images and light weight images for your website.

You May also read: How to optimize WordPress website

Best ways to Optimizing images for various file formats

JPEG:  “Joint Photographic Experts Group” is a standard and most common format for the web. You can adjust image’s Quality 1 to 100 which give features for maintaining images quality. This file format is used for photo gallery and big images for the site.

GIF: Graphics Interchange Format” is manage for animating images. It is normally created by color pattern that indices (0 – 256) colors.

PNG:Portable Network Graphics” it is used for only when you want to add transparent images for the net like logos and icons.

Photoshop has exclusive and greatest features for optimizing images for the web, it allows you to reduce size and make up standard images. Your website is loading quickly therefor visitor can get information quickly and it’s also support to search engine to crawler data from your website

Here take the easy way out methods which can support you to optimize jpg, gif, and png file. You can also manage your images and check image size and image superiority.

Photoshop to optimizing images for the web

1. open Photoshop

2. open images into Photoshop

3. use keyboard shortcut alt + Shift + Ctrl + S

Follow these video to optimize jpeg, gif, and png images.

 

 

These methods to you can optimize images with maintain qualities for your website design projects.

Continue Reading

Website design

How to manage website in Dreamweaver CS-6?

Published

on

Dreamweaver is one of the best code editor software which can help you to develop website very easily.   If you are making website with dreamweaver then you should know dreamweaver’s outstanding features. Here you will learn how to manage files and folders by dreamweaver? Today I will share with you how setup your website in dreamweaver CS-6, Manage contents, and assets?

When we make website that time we have lots of files and folders. It’s very difficult to manage all things like images, scripts files, and other assets files. If you are managing your file and folder with right manner then you can edit or modify your website very easily. If you are not managing website and its assets that time it’s a complex job to update website.

Do you know Basic structure of website?

It is the collections of files and folders like CSS, Images, HTML, Scripts, and other programming language files. You can see easy way to manage your files and folders.

Setup and mange website

The Basic Rules of file naming Conventions.

  • No Spaces

When you create new file and use space into your file like “About us.html”. It will make some problem to link your file on the server. So when you make or create file for website make sure it will sort and simple for example about.html because user can easily remember the link of your website.

  • Separate words with Hyphens

When you create new file and want to make it separate that time use hyphens for example “name-keywords.html”. If you do not use hyphens, underscore or numbers that time search engine cannot understand your link. So use hyphens that will guide to search engine about links.

  • Avoid Uppercase letter

When you create new html file don’t use uppercase letter into your files. It will make some problem to find page on the server because some server are using case sensitive.

How to define or setup a website in dreamweaver cs6?

These simple and easy ways to manage your website. Follow step by step.

  • Click on Site Menu
  • Click on New Site…
  • Select Site in left side of menu
  • Type your Project name in Site Name
  • Click on Folder icon and set your project path then select your folder.
  • Click on Save button

Now your project is managed by Dreamweaver.

 Why it is important for manage website?

Here you can manage your files and folder at the same place. You can create folders and create files such as html, js, css and php file. When you rename the file name that time it will ask you want to update links in all files. If you want to delete or edit any files so you can do it very easily.

This is the best method which can help you to manage your project easy way.

If you like this post then please comment us, Share with your friends.

Continue Reading

Trending

Copyright © 2021 Labstech.