Showing posts with label less. Show all posts

web-designer Work Flow For Beginner







Hello Guys today I m gonna Share something for beginners & learning enthusiast like me.

this Article  Tutorial is about the Responsive Webdesign and Psd To html Conversion.

Now Days The Bootstrap is more popular for rapid Responsive website development.

For Beginners i would advice start with Grid System after you have understanding about html , css & Bit J query Stuff.

there are lots-off grid system available from traditional to modern foundation grid systems.

Traditional Grid Systems

1 .  960 Grid From http://960.gs/ 
2 .  Responsive Grid Systems  From  http://www.responsivegridsystem.com  
3.  1200px Grid From                 http://1200px.com/
4.  Golden Ratio Grid System    http://www.jonikorpi.com/golden-grid-system/
5. Modular Grid               http://www.thinkingwithtype.com/contents/grid/#Project:_Modular_Grid


New & PowerFull Grid System

1.  Bootstrap               http://getbootstrap.com/
2.  Foundation Zurb   http://foundation.zurb.com/
3. Skeleton                  http://getskeleton.com/
4. CssWizadry Grid   http://csswizardry.com/csswizardry-grids/
5. lamonade grid         http://lemonade.im/

start Exploring and engage with your most comfortable grid system.
After mastering any grid system you have power of responsive webdesign & you also can make your own grid system as well.

next i m gonna show you some Video Tuts Which help You To understand Psd To Html With Bootstrap Frame work Step By step.


Create Psd Design Of your Website.









Start writing markup and css
    







Check Responsiveness and Implement Design.




and You Nailed It.

after That make Sure You validate Your code here.     .https://validator.w3.org


Follow Best Css practices  here   https://css-tricks.com


Next Step is Learn Sass,Less  For optimize Your Css   Here  http://sass-lang.com

For Windows install sass , less Compiler          http://koala-app.com/

Mac You can Use      Scout  & codekit              http://mhs.github.io/scout-app/
                                                                            https://incident57.com/codekit/



You can Read site Optimization More Here!
http://www.techfistblog.in/2015/08/how-to-speed-up-your-website.html


if You have any confusion  , suggestion  please drop us in  a comment .





     Thank you For Reading .
If you like It please share & spread the word.










Popular Posts