\nMake ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.<\/p>\n
2. Goto Anything<\/strong> Triggered with Ctrl+P, it is possible to:<\/p>\n Type part of a file name to open it. 3. Distraction Free Mode<\/strong> 4. Split Editing<\/strong> 5. Plugin API<\/strong> All this functionality, combined with a great theme like Material Up<\/strong> from equinusocio<\/strong> on GitHub makes it even more exciting. You can find this theme here<\/a> and add it to the packages folder.<\/p>\n Also a good optimization of the editor would be the following settings under Have a look at how Sublime looks like:<\/p>\n Dreamweaver is Adobe’s standard editor for building web pages. It is, in fact, a very powerful program that is thought to be helpful in a lot of aspects. You can design and develop responsive sites from scratch or with built-in templates, preview them in real time on your mobile devices and quickly extract web-optimized design elements from Photoshop documents directly into your projects.<\/p>\n As of 2015 updates, Adobe Dreamweaver comes with the following enhances and new features:<\/p>\n 1. Batch export from PSDs<\/strong> 2. Code faster<\/strong> 3. Preview on any device<\/strong> 4. Live view and edit<\/strong> 5. Live Guides<\/strong> Well, Dreamweaver is a vast ocean of options and tools for ‘coding the web’, and you might wanna use it in large scale projects.<\/p>\n Visual Studio is a bit different, because it offers tools for so many programming languages that you might get lost trying to work on your HTML. However, it makes sense to code HTML in visual studio when considering websites that use several technologies and programming languages, so that you don’t change editor frequently. Talking about featues, it has most of what the above editors have combined, although you may find it a bit difficult to find them because of it’s complicated UI. Here’s what Visual Studio looks like:<\/p>\n Those three editors are world’s most used and by far the best. However, you might be interested in trying even other editors. Light and minimalistic editors, that are also good for using are:<\/p>\n 1. Atom<\/a> Click on the names to follow the official links to their websites to learn more.<\/p>\n HTML has such a strong bond with CSS that you will be understaning as you get more and more experience. While it would take some time to create specific elements, and grids in html, and furthermore, a lot of code, frameworks enable a full suite of already defined classes to which properties and values have already been given. It makes it so easy to get going fast in a way that’s really convenient. For example, you just add classes and id’s to your html elements and you set up layouts and elements in seconds. Below we’ll take a look at two most used frameworks of css and also give you a list of other frameworks you can also try.<\/p>\n Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Twitter Bootstrap is the nowadays standard for front-end developers that continues to redefine the modern web in terms of lightness, optimization and speed.Over the last few years, Bootstrap has become an increasingly popular front-end development framework. More and more developers and designers continue to get on board. Evidently, there\u2019s a reason for that. The Bootstrap framework is feature rich and offers several benefits to those using it. Below we’ll have a look at what makes it so unique and useful:<\/p>\n 1. Speed of Development<\/strong> 2. Responsiveness<\/strong> Creating mobile ready websites is a breeze with Bootstrap thanks to the fluid grid layout that dynamically adjusts to the proper screen resolution. There is virtually no work that needs to be done to achieve proper responsiveness.<\/p>\n Using Bootstrap\u2019s ready made classes, you can specify how many spots in the grid system you want each column to occupy. Then, you can specify at which point you want your columns to stack horizontally rather than vertically to display properly on mobile devices.<\/p>\n 3. Consistency<\/strong> Mark also describes how Bootstrap was built using one core concept: pairing designers with developers. Doing so is what made Bootstrap successful at Twitter, and why it continues to be successful on the web.<\/p>\n Put simply, Bootstrap ensures consistency regardless of who\u2019s working on the project. In addition, results are uniform across platforms so output remains the same whether you\u2019re using Firefox, Chrome or Internet Explorer.<\/p>\n 4. Customizable<\/strong> As you can see, there are several benefits to using Bootstrap. The framework allows for rapid, responsive development that is consistent and well supported by the development and design community. As the framework continues to develop, the reasons to use Bootstrap keep mounting. If you\u2019ve overlooked this framework, it\u2019s probably time to give it a try.<\/p>\n Get to know and download Bootstrap from here<\/a>.<\/p>\n Foundation is a great alternative to Bootstrap for professionals. It is an advanced, responsive front-end framework. The framework is mobile friendly and ready for you to customize it any way you want to use it. Here are some key features that will help you have a better understanding of it:<\/p>\n 1. Interchange: Foundation\u2019s secret weapon<\/strong><\/p>\n Interchange uses media queries to dynamically load responsive content that is appropriate for different users’ browsers. Hiding the content \u2013 which is generally bad for loading times, SEO and accessibility. 2. The medium grid<\/strong><\/p>\n This was actually an \u2018experimental\u2019 feature of Foundation 4.3, but is fully supported and documented in Foundation 5. One of the issues I had with Foundation 4 was that columns had the same width ratio for all screen sizes. Adjusting column widths on smaller devices before v4.3 meant hacking the Foundation styles, which always felt weirdly uncomfortable\u2026<\/p>\n A fully functional medium grid will be great for those situations where a 9-and-3 column combo looks good on a wide-screen but would look better as 8-and-4 on a smaller screen (e.g. you\u2019ve probably seen a 3-column block \u2018squeeze\u2019 text on tablet).<\/p>\n 3. All new style<\/strong><\/p>\n One of the best features that made Bootstrap 3 great for designers is the flat, simple style. By stripping things back, they made it much easier to customise. Foundation 5 has also moved more towards this blank-canvas mentality. The default UI in Foundation 4 was cool, but a bit of a hassle to re-style. It was also instantly recognisable as Foundation to other designers, which can be a bit awkward, especially if you\u2019re trying to make your design look unique!<\/p>\n To improve the user-experience on mobile devices, further hardware acceleration support has been added into Foundation 5. This means smoother animations, less flickering of content and a generally improved mobile user experience.<\/p>\n 4. A new command line tool<\/strong><\/p>\n Foundation 5 aims to optimize the development process by making it super easy to get started building with a brand new command line tool. The new CLI will allow even faster project building It\u2019s a similar approach to Bootstrap 3\u2019s simple development environment, leveraging popular tools like Grunt and Bower, to help speed up the development process even further.<\/p>\n They\u2019ve also beefed up the back-end CSS pre-processing. Foundation 5 uses Libsass, which is built in C\/C++, meaning it\u2019s five times faster. This will dramatically speed up Sass processing \u2013 great for big projects \u2026or slow computers.<\/p>\n Get to know and download Foundation from here<\/a>.<\/p>\n Well, you might get comfortable with Bootstrap or Foundation, but what if not? Well, here’s a list of other great css frameworks you can use:<\/p>\n 1. Semantic UI<\/a> It is now up to you to decide which one is best for you after having all the information provided.<\/p>\n Designing a web page can be a rather difficult task. In this section, you will be presented to some helpful websites.<\/p>\n 1. Adobe Color<\/a><\/strong> 2. CSS Matic Gradients<\/a><\/strong> 3. CSS3 Patterns Gallery<\/a><\/strong> 1. Typekit<\/a><\/strong> 2. Google Fonts<\/a><\/strong> – Test Fonts Online<\/strong> While it is very useful to you to learn and set up your own HTML projects because that is the way you learn, there is also a shortcut, that should be taken into consideration after you get some experience on coding. We’re talking about templates, and here I’ll show to you two websites that I found helpful to kickstart your web project.<\/p>\n Open Designs<\/a> have a 7m+ gallery of HTML templates, totally free, that you can use on your own preferences.<\/p>\n MafiaShare<\/a> is another great website for templates designed by skillful people. The templates are of a very high quality and you can download for free for personal use or credit the author if using on a larger scale.<\/p>\n PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.<\/p>\n Dojo is a javaScript toolkit that saves you time and scales with your development process. Provides everything you need to build a Web app. Language utilities, UI components, and more, all in one place, designed to work together perfectly.<\/p>\n WebStorm is a lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.<\/p>\n HTML5 Kickstart is a powerful css and js framework that will help you make comprehensive progress fast and easy.<\/p>\n Less Framework is a CSS grid system for designing adaptive web\u00adsites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.<\/p>\n Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!<\/p>\n
\nUse Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words.<\/p>\n
\nType @ to jump to symbols, # to search within the file, and : to go to a line number.<\/p>\n
\nWhen you need to focus, Distraction Free Mode is there to help you out. Distraction Free Mode is full screen, chrome free editing, with nothing but your text in the center of the screen. You can incrementally show elements of the UI, such as tabs and the find panel, as you need them.<\/p>\n
\nGet the most out of your wide screen monitor with split editing support. Edit files side by side, or edit two locations in the one file. You can edit with as many rows and columns as you wish. Take advantage of multiple monitors by editing with multiple windows, and using multiple splits in each window.<\/p>\n
\nSublime Text has a powerful, Python based plugin API. Along with the API, it comes with a built in Python console to interactively experiment in real time.<\/p>\nPreferences > Settings-User<\/code>:<\/p>\n{\r\n\"bold_folder_labels\": true,\r\n\"color_scheme\": \"Packages\/material-theme-master\/schemes\/Material-Theme.tmTheme\",\r\n\"draw_minimap_border\": true,\r\n\"font\":\r\n[\r\n\t\"subpixel_antialias\"\r\n],\r\n\"font_face\": \"DejaVu Sans Mono\",\r\n\"font_options\":\r\n[\r\n\t\"gray_antialias\"\r\n],\r\n\"font_size\": 11,\r\n\"highlight_line\": true,\r\n\"highlight_modified_tabs\": true,\r\n\"line_padding_bottom\": 1,\r\n\"line_padding_top\": 1,\r\n\"save_on_focus_lost\": true,\r\n\"scroll_past_end\": true,\r\n\"shift_tab_unindent\": true,\r\n\"tab_size\": 4,\r\n\"translate_tabs_to_spaces\": true,\r\n\"trim_trailing_white_space_on_save\": true,\r\n\"word_wrap\": true\r\n}\r\n<\/pre>\n![\"Sublime](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools1.jpg\")
<\/a>1.2 Adobe Dreamweaver – All in One<\/h3>\n
\nSave time by quickly extracting web-optimized images from Adobe Photoshop documents in multiple resolutions and formats.<\/p>\n
\nNew code editor themes, real-time code validation with Linting and Autocomplete with Emmet support make writing code in Dreamweaver faster and easier than ever.<\/p>\n
\nTest and inspect websites on multiple devices simultaneously. Just type a short URL into your mobile device’s browser to preview your sites.<\/p>\n
\nDreamweaver enables you to see live preview of the page you are coding as well as edit the page itself instead of the code. So for example you can change text and images right from the graphical UI of the webpage and changes get reflected right into your HTML.<\/p>\n
\nWith Live Guides, you can accurately move HTML elements, along with their associated code, simply by dragging and dropping.<\/p>\n![\"Adobe](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools2.jpg\")
<\/a>1.3 Microsoft Visual Studio for Ambitious Web Projects<\/h3>\n
![\"Visual](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools3.jpg\")
<\/a>1.4 Alternative Editors<\/h3>\n
\n2. Notepad++<\/a>
\n3. Visual Studio Code<\/a><\/p>\n2. Frameworks for Productive Coding<\/h2>\n
2.1 Bootstrap – World’s Best CSS Framework<\/h3>\n
\nUndoubtedly one of the biggest advantages of using Bootstrap is the speed of development. If you\u2019re looking to push out a new website or application quickly, you should definitely consider using Bootstrap. Rather than coding from scratch, Bootstrap enables you to utilize ready made blocks of code to help you get started. Combine that with cross-browser compatibility and CSS-Less functionality, many hours of coding can be saved. To achieve the fastest route possible, you can also purchase ready-made Bootstrap themes and modify them to suit your needs.<\/p>\n
\nMobile devices continue to grow in popularity year after year. Cisco predicts that global mobile data traffic will increase nearly 11-fold between 2013 and 2018. The need to have a responsive website is becoming increasingly important.<\/p>\n![\"Bootstrap](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools4.jpg\")
<\/a>
\nBootstrap was actually founded on this principle. It was originally developed by a few Twitter employees as a framework to encourage consistency across internal tools. Co-Founder Mark Otto later realized it had potential beyond just an internal toolkit and released the first open-source version in August 2011.<\/p>\n
\nBootstrap can be tailor made according to the specifications of your project. Developers have the ability to pick and choose the features that are needed and the rest can be tossed. This is easily accomplished using the Bootstrap customize page<\/a>. Simply tick off all the features you don\u2019t need and your custom version of Bootstrap will be ready for download. How cool is that?<\/p>\n![\"Customize](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools5.jpg\")
<\/a>2.2 Zurb Foundation – A Compelling Alternative<\/h3>\n
\nResponsive design in the past has worked fine with content and presentation that remain exactly the same across all devices. Unfortunately, if you want content to differ on any viewport width it would normally involve either:<\/p>\n
\nUsing server-side user-agent sniffing to detect mobile devices \u2013 which can get really messy, difficult to debug, and can create numerous edge cases. So a plugin that can deliver different content client-side is an enormous help \u2013 making Interchange the feature I am most excited about.<\/p>\n2.3 Alternatives to Bootstrap and Foundation<\/h3>\n
\n2. Pure by Yahoo<\/a>
\n3. UIkit by YOOtheme<\/a><\/p>\n3. Websites for Web Designers<\/h2>\n
3.1 Colors, Gradients and Patterns<\/h3>\n
\nAdobe Color, formerly known as Adobe Kuler, is an internet application from Adobe Systems that lets you try out, create and save various colour schemes, each of which consists of a set of five colours. It is available in browser-hosted variants, and in desktop versions using the Adobe AIR runtime.<\/p>\n![\"Adobe](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools6.jpg\")
<\/a>
\nIn general, CSS Matic offers ultimate CSS tools for web designers. What we found was that gradients were a top feature of this website, and maybe the best on the internet with very nice gradient designs and explicit CSS\/SASS code to place in your own files.<\/p>\n![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools7.jpg\")
<\/a>
\nThis is what you have been looking for if you were searching for patterns to enhance your backgrounds on the web. It includes around 40+ patterns which are fully-compatible with your modern browsers and are created only in CSS. So it is very convenient for usage instead of js patterns or images.<\/p>\n![\"CSS3](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools8.jpg\")
<\/a>3.2 Fonts – Resources and Testing<\/h3>\n
\nTypekit is a subscription font service that brings thousands of fonts from foundry partners into one library for quick browsing, easy use on the web or in applications, and endless typographic inspiration.<\/p>\n![\"TypeKit](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools9.jpg\")
<\/a>
\nGoogle Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially \u2014 in print, on your computer, or in your websites.<\/p>\n![\"Google](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools10.jpg\")
<\/a>
\nThere is a great website on the internet which provides a revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop. It is called FontDragr and you can browse it from here<\/a>. Now, just starting draging fonts to see how they loko like.<\/p>\n![\"Test](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools11.jpg\")
<\/a>4. Templates – The Game Changers<\/h2>\n
4.1 Simple HTML Layouts<\/h3>\n
![\"Free](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools12.jpg\")
<\/a>4.2 Advanced and Professional HTML Templates<\/h3>\n
![\"Professional](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools13.jpg\")
<\/a>5. Other Resources to Consider<\/h2>\n
5.1 PhoneGap<\/a><\/h3>\n
![\"PhoneGap\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools14.jpg\")
<\/a>5.2 Dojo Toolkit<\/a><\/h3>\n
![\"Dojo](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools15.jpg\")
<\/a>5.3 WebStorm<\/a><\/h3>\n
![\"WebStorm](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools16.jpg\")
<\/a>5.4 HTML5 Kickstart<\/a><\/h3>\n
![\"HTML5](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools17.jpg\")
<\/a>5.5 Less Framework<\/a><\/h3>\n
![\"Less](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools18.jpg\")
<\/a>5.6 Initializr<\/a><\/h3>\n
![\"Initializr](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools19.jpg\")
<\/a>5.7 Maqetta<\/a><\/h3>\n
![\"Maqetta](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/html5-devtools20.jpg\")
<\/a>