Coding makes you think better

I started coding at the age of 12 then i came to know about how a computer works , My father brought me a Intel Celeron D PC , the first thing that i used was Paint . Then on,  i started exploring the world of programming then i learnt about a programming language called C.I learnt the basics and created my first Hello World program. What i think is that each and every people should start coding cause “Hello World is not the end and there is more to it”.

The programmers of tomorrow are the wizards of the future.


There is a beautiful program called Scratch and the website code.org can help you alot learn programming .

Advertisements

Boxify Deconstructed #1

Before starting you should check out my previous post on what are the essential things that you need before starting a website or any front end dev ie Designing . Since we have a Mock site Boxify it’s just that you need to download so that you get a kickstart .

First thing first you need a foundation for that we will be using the basic Boilerplate model you can download it from github.

boxify deconstructed

This is what it looks like after applying the boilerplate content ie the index.html file in the boilerplate folder . including the you need to add some other ingredients to add a nice flavor to it . lets see the changes

boxify deconstructed after change

You can see that we have made some additions to our old file like JS and some CSS(bottom and above resp). these are the changes .Have a look at their official websites .

1# Modenizr

2# Bootstrap

3# Jquery FancyBox

4# Flickity

5# Animate.css

6# font-awesome

7# Boilerplate

Boxify – Theme Deconstructed Series

Boxify is an HTML theme developed by Peter Finlan you can see this on  http://tympanus.net/Freebies/Boxify/ . I will be deconstructing this theme and explain you how to develop these kind of themes with easy and what are the things that we required to create such themes .

Starting with my setup i will be using Bracket Text Editor you can use Sublime or Notepad++. boxify theme deconstructed rittam debnath

For this you need to have the good knowledge of HTML and CSS in one of the post i mentioned some websites from where you can learn these lang’s easily .

How to download flickr photos when disabled by the author?

flickr image oneToday i made my account in Flickr so that i can use some photos for my project . Surprisingly for the above pic the owner didn’t allow me to download it . i thought its just a warning to not to download the image but really on right click on the image you will not get save image as instead you’ll get Save as .. where it’ll ask you to save the whole page in HTML format . but i didn’t want to download the whole page i needed the image .

flickr image two how to download flickr image when disabled

Then i thought why not try it in another way , letmme check the src code , then i happen to see a line of code where it’ll link the actual image to the server database . The line number would be around 500 to 560 (approx) where it appears on clicking the link the original image will appear then you can download the image in a regular fashion .

how to download flickr image when disabled

The above tutorial was only for educational purpose.

Top 3 Image Compressor that can save MB’s

stockvault-antique-typewriter-close-up133438

The above image cost around 1.56MB , with the help of some online image compressor i was able to reduce the size of this image to around less than 300 KB ie around 80%(approx) reduction . So here are the top 3 image compressor that can save MB’s .

1# Compress.io

2# TinyPNG (has PNG but does the job for both PNG and JPG)

3# CompressNow : Great thing about this is that it lets you to choose the reduction percentage . performance wise it gave much better results.

Top Youtube Channels you need to follow for Dev’lopers

Every Beginner needs tutorial at some point of life . So here is my top youtube channel list that you can follow to learn new and updated things in the world of Website Development and Designing .

1# LearnCode.academy 

Gives you a brief introduction of every concept he teaches , One of my best playlists were Github and Twitter Bootstrap .

2# New Boston

Brief ,Easy to understand , motivates , conceptual but doesn’t tell you how to move to the advance stage .

3# DerekBanas

Nice and Descriptive  my best playlist was Java .

4# LevelUp Tuts

Best one is the CSS3 , SASS (Syntactically Awesome Style Sheets) .

5 # DevTipsForDesigners

All the Basics are awesome.

6# NewWorldOps

Photoshop Tutorials for Make Up and Editing .

7# al3rfa

This shows a playlists series of Lynda photoshop tuts on Webdesigning .

That’s all . Tell whether you like it or not, or else do you want to add some channel then please comment down below .

Top 5 Things that i need for developing a Website

Developing a Website starts when you finish Designing it . To design the first thing that come to our mind is Photoshop , Yup its the Default tool that you need but what else . In my Book i have 5 things that i need the most to write a website .

  1. Photoshop (obviously) : Its fun and easy to use .
  2. Illustrator ( the only Difference b/w Ps and Ai is that Photoshop measures the Canvas in Pixels where as Illustrator in Vector it basically means that enlarge the canvas it’ll not pixallate ).
  3. After that i convert the PSD’s into Html by snipping each element from photoshop See the Video 
  4. Good Text Editor : I use Sublime Text 3 ( it prompts me every time to say to register the software but i click cancel every time it does that ) its fast , Cool , Friendly , Customizable , and there are thousands of plugin available so it’ll be the best companion for you.
  5. Browser : Chrome , Firefox Developer Editon .

Things you should take care off:

  1. After creating a Website it’s recommended that you check how your website looks on different type of browser . Now the problem is that how will you maintain so many Browsers in one Desktop . To solve this there is a Website called BrowserStack . Which will give you the screenshots of different Browsers.
  2. Should adapt the concept of Responsive Web Design. See the Video
  3. Research Well :  Explore sites like Behance.net , GraphicBurger .