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 .
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.
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
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 .
3# Jquery FancyBox
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++.
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 .
Today 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 .
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 .
The above tutorial was only for educational purpose.
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 .
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.
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 .
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 .
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.
Photoshop Tutorials for Make Up and Editing .
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 .
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 .
- Photoshop (obviously) : Its fun and easy to use .
- 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 ).
- After that i convert the PSD’s into Html by snipping each element from photoshop See the Video
- 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.
- Browser : Chrome , Firefox Developer Editon .
Things you should take care off:
- 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.
- Should adapt the concept of Responsive Web Design. See the Video
- Research Well : Explore sites like Behance.net , GraphicBurger .