Temporarily Remove Any Element from a Webpage with Your Browser

There are parts of a webpage which you do not want to really use. For example when you see a Facebook public post or profile, it also shows a login box, which you might not be interested in.

We can do this with Dynamite Extension for Chrome browser or Nuke Everything Add-on for Firefox.

For instance in the example below, I will be removing the highlighted element or part from the webpage I am viewing.

I am using Chrome extension Dynamite to show how it works. Just right-click on a selection select Dynamite icon and select hide element.

The end result that element from the webpage is removed immediately.

Ideally, these are very useful tool for web designers to check how the webpage would look by removing certain elements.

You might also like to check out the following extensions which are helpful for web designers.

Do try it out and drop in your comments.

Link: Dynamite on Chrome | Nuke Everything for Firefox

Striking.ly lets you create beautiful Webpages in seconds

Chances are you don’t really know web designing, but you want to create a little website for you – which can act as a landing page or even a resume/portfolio of you.

While there are many website builders available on the web, most of them aren’t simple or free or not quick. Striking.ly wants to change this.

strikingly-dashboard

Creating a webpage is really simple – to get started, you need to signup for a free account. After you do that, you’ll be shown around six predesigned templates (which are really neat) for your webpage.

Hit preview to see how the template looks, select it and you’ll be asked for details like page name, URL etc.

You can edit pretty much anything on the template – including text, images, videos etc. Though, you won’t be able to edit the HTML source. You can also do some SEO like adding meta tags, page description etc.

The service is free, but there’s also a Pro version available which will let you access features like custom domain, Google Analytics, more bandwidth storage, etc. The free version will be enough for starters.

Link: Striking.ly

Related: 5 Great sites to Learn HTML/CSS

5 Great Sites for Beginners To Learn HTML/CSS

Recently, I’m on the verge of learning basic web designing. It all started with the idea of making a landing page for myself from scratch, without using sites like About.me. I ended up discovering sites which can be very handy for beginners who’re trying to code.HTML5

1. Codecademy

This is one of the best things I’ve stumbled upon this year. Codecademy is where you learn code by actually writing it, i.e. by completing exercises which are created by experts of those field. This year, they launched a free initiative named Code Year, calling everyone to learn the basics of coding.

The site lets you track progress, achieve badges and other cool stuff. If you’re stuck at some particular exercise, you can post your doubts in the forums, there are some helpful people out there! You can grab exercises related to Javascript, JQuery and of course CSS3. They also seem to add lessons related to Python, in future. The best thing? All this is free.

Link: Codecademy

2. Dochub

How about an instantly searchable documentation of all major programming languages? That’s Dochub. You can easily find documentation for various programming languages online, but it’s all scattered, and it’s not fast. Dochub solves this. Also, you can get the local version of the website from the Github page.

Link: Dochub

3. Mozilla Developer Network

Mozilla Developer Network(MDN) provides a great in-depth documentation for CSS and Javascript. It’s more like Wikipedia for web developers (you can even edit the wiki, and changes will be reviewed). Bonus is that, you can also learn about making Firefox addons and HTML5 apps, which are cross platform.

Link: Mozilla Developer Network

4. 30 days to learn HTML and CSS

If learning coding by reading documentation or books doesn’t work for you, then consider taking this free course. It’s a series of video tutorials by Jeffery Way, of TutsPlus. Of course, the tutorials are really basic, so if you want something more advanced, you should consider paying for Treehouse, a subscription based learning platform for web and and even iOS developers.

Link: Learn CSS

5. Read Blogs

Blogs related to web designing are in plenty. Starting with the TutsPlus network, till Smashing Magazine, there are so many blogs dedicated to this niche. Most of them will rank well on Google, if you search for anything related to web designing, that’s the best way to find good blogs.

I’m sure there are many more sites which fall under this category, and I’m no web designer. So, do you know any free resources for learning web designing? Write them in the comments.

Preview Google Fonts on Current Webpage You are Viewing

Web designers spend a lot of time looking up different fonts on their website that can be used. Fonts are very important for two reasons. First is that a good font allows users to read content on the website without any issue. Also the font styling usually should also fit in with the general theme of the website.

If you are using Chrome, Google Font Previewer looks like a great extension. It allows the user to look up different fonts and styling on the website you are viewing on your browser.

Google Font Previewer Features

Download the Font Previewer extension on your Chrome browser. Now while on any page your are viewing, you click on Previewer icon.

  • A pop-up will allow you to tweak the fonts family and text styling to play around on the webpage your are viewing.
  • We can even specify a CSS selector and most impressively a HTML code is ready for developers to paste into their website.

If you are looking up fonts for your website – this extension is a probably the most handy one around on Chrome. Do give it a try and drop in your comments.

Link: Google Font Previewer

Related: 4 Tools to Compare Installed Fonts

Learn HTML with the help of Mozilla Webmaker

Before I was a blogger, I was not exactly into HTML. I know a smattering of HTML and found W3Schools as a good resource for someone who is new to learning web designing.

Mozilla has launched Webmaker, which actually allows users to get regular tutorials and projects that will teach coding and designing for the web.

Why should one sign up with Mozilla Webmaker?

Mozilla first will users with some free tools to learn how to create webpages. Most of them should be compatible with Firefox browser.

Many practical projects at starter level will be made available. This actually makes a lot of sense for people teaching themselves HTML, CSS and more.

Mozilla wants everyone to be a coder!

It seems that Mozilla’s mission with webmaker is to make everyone into a programming geek. I think that is not possible but it will help people who want to learn something to atleast a decent level, so when they look at say a HTML code, they are not completely overwhelmed.

What do you think of Mozilla’s latest initiative? Do drop in your comments.

Link: Mozilla Webmaker

4 Tools to Preview and Compare Installed Fonts

If you’re a designer or even a site owner, then you will be having lots of fonts installed on your system and obviously you will feel irritating about which font to choose when designing a logo or choosing fonts for your site. Luckily, there are many tools which can help us in comparing fonts installed on a PC. Through this, you can visualize all those fonts installed on your PC, so it eventually saves you a lot of time!

#1. Wordmark.it

This is the best among the three sites I have found for previewing fonts! It also provides PRO accounts through which you can save selections for later reference, toggle between upper case and lower case previews etc. Luckily Wordmark.it is providing PRO accounts for free (free for first month of use), you just need to signup to get the PRO account.

#2. Font Picker

Font Picker is available in web as well as desktop versions. To run the desktop app, you need to have Adobe AIR installed on your PC which you can get here. The desktop app is almost similar to the web version. Click the “cross” button beside a font so that you will be left with a small list of desired fonts. It would be better if there was a feature to save font selections for later reference (like, in Wordmark).

#3. FontMatrix


This is one of the best font managers for Windows, besides general tasks like previewing, installing and uninstalling fonts; it can also extract fonts from PDF files and images! It gives complete information of each font including its type, family and even its designer! Another innovative feature is, if you like a font, then you can find other fonts which are similar to that. It supports Windows, Linux and Mac (OS X).

#4. NexusFont

It has a very sleek interface resembling Mac OS X. You can create sets so you can preview all similar fonts under one set, for example I have created a set “Hand Writing” and grouped all the Hand writing fonts under it, so the next time you’re looking for a good Hand writing font, you don’t need to search.

There are many more tools for Windows but I reviewed the best ones that I found useful. Do drop in your comments.

Additional Tip:

If you’re running Mac (OS X) then you might want to checkout FontCase. :-)

[Online Tool] Get Suggestions from Google to Improve Page Speed

The loading speed of a web page is a very important parameter for any webmaster. The point is a website should look have a great and simple design along with a lot of interactive options.

Google_page_speed_labsSometimes the amount of coding done a theme for a site does affect it’s loading time. Google as you know, ranks some sites higher than others because loading speed is also plays a part in page ranks.

Use Google’s Page Speed online tool which carries out an analysis of page speed and also gives detailed advice.

Page Speed Features

Page_Speed_analysis

  • Just enter any URL for which you want a report to be created.
  • Click on “Analyze Performance” and get details of your websites rating as far as Page Speed is concerned.
  • It also gives advice on improvements to your website which will help page to load up faster.

If you liked this post you can also read up on best practices for writing efficient CSS for faster page load and also check up loading speed of multiple sites.

Do drop in your comments.

Link: Page Speed Online

Get plain white simple design with all websites viewed on Chrome!

Chrome_logoAs a blogger I end up visiting several websites. Many of these are blogs. Websites are often designed with many inputs about a lot of different things. For example a blog design might put more emphasis on links, social media widgets so that readers find it more interactive. Some blogs which are niche blogs, often end up having a very attractive design. Sometimes these designs are not good or even distract the reader’s attention from the content.

As I use Chrome as my primary browser, I found Plain Clothes extension very handy to convert all websites I am browsing into a plain white simple design.

PlainClothes_design

While viewing a website, you will see the plain clothes icon at the right hand edge of the address bar. It will show up next to the bookmarking star symbol. Click on the icon and it will toggle between normal and plain clothes view.

If you are reading a lot online then having this extension is a good idea. I personally use it while reading through a blog. This way I can only concentrate on content and not get distracted with the design. Also it might help designers to look at their designs in such a threadbare way, to get more in-depth ideas on design.

Do try out Plain Clothes on Chrome and drop in your comments.

Link: Plain Clothes

Vote for rtCamp’s Website on WPBeginner Gallery

This is a cross post from the official blog of the rtBlogs network.

rtCamp’s website design has been one of the many achievements of the company since its inception. Recently, its website design got featured in the WPBeginner gallery.

WPBeginner Gallery

WPBeginner gallery is a place where you can browse through beautifully designed WordPress websites for inspiration and ideas. rtCamp’s website has been added to this gallery among other well designed websites.

WPBeginner provides tutorials on WordPress for WordPress amateurs along with downloadable WordPress themes and plugins.

After visiting rtCamp’s website, one might think that it was designed in Flash. It has however been designed using pure Javascript and CSS standards with complete WordPress in the back end!

Vote for the rtCamp Website!

You can rate the website’s design by clicking on the star rating.

So what are you waiting for? visit the link below to rate. Give us your feedback about the website through your comments :)

Link: Vote for rtCamp | rtCamp Official Website

How to discard certain part of an image in Photoshop

As you can see in the image below, I am going to remove the tree from the 1st image to make it look like the image on the right. It looks like a difficult task but anyone who knows Photoshop a little will be able to edit the image, in just 2 easy steps.

In the below image I am going to discard certain part from the image without affecting its beauty. It’s a simple tutorial you can do it easily.

before-after

  • First take an image in Photoshop and duplicate the layer for backup.

content-aware

  • Select the part which you want to drain out from the image. You can use quick selection tool or Lasso tool to make selection, here I used the Lasso tool.

make-selection

  • Go to Edit menu select Fill(Edit –> Fill), you will get the following window pop up make sure Content-Aware is selected click OK.

apply-content-aware

  • And its done, isn’t it a child’s play?

content-aware-applied

More Examples :

example-1

example-2

Do you like this tutorial? Please share your view through your comments.