User Guide For Using The Web Design Template: Fill & Download for Free

We often heard that web development is easy to get started, is that true? In recent years, the web front-end framework is emerging in an endless stream, like React, Vue, AngulaJS all attract a lot of attention, and many big companies are paying more attention to front-end development that makes the web front-end developer is the one of the hottest jobs in the world.Many people, especially young people are eager to get in this industry, but how long does it take to learn web development? How long does it take to become a front end developer and make money from it? Here I wanna talk about my own experience to give your guys a little hint.1. Web design basic concepts and principles ( at least 10 days)You must master the basic concepts and theoretical knowledge of web design before you get started. You should know about: What is a static page? What is a dynamic web page? What is the overall layout of the web page? What is the design principle of web design? What are the basic elements of the web page? What can't do or not to do of web design? The more basic web design concept you know, the easier you can develop a web page without making mistakes.As we know, web design trends always change, to master the basic web design principles can lay the whole fundamental of a website. At the same time, you may need to know some basic SEO knowledge to make a friendly website. I really recommend you guys to read some web design books rather than watching online video tutorials, a good book absolutely make you benefit. Here are some web design books which are recommended by leading designer in this industry.How to make a web page more easily:HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETTHow to make web design more functional:JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETTHow to learn front-end development:Best UI/UX Design Materials for FreeDOWNLOADLEARNING WEB DESIGN: A BEGINNER'S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINSMust read usability book:DON'T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG2. CSS + HTML + JavaScript (1 month)Compare with Javascript, HTML is nothing hard, but the label language and format specification; CSS is relatively complex, It involves some browser compatibility issues. But to combine these two can achieve a lot of web page effects. If you only grasp some basic code language, but not actually take practical action, it will be difficult to master it. When I started to learn Bootstrap, I just put the responsive web page which was created by Bootstrap to the existing electricity business project. Bootstrap is a really good tool to get started. I can solve the basic problems on my own after reading their official website documents, you can try it.JavaScript is harder than HTML and CSS. But, you know that Brendan Eich created the JavaScript language just for 10 days, so its syntax is not very complicated than you think. I believe you will be able to master the basic syntax soon as long as you study hard.I think the best web development learning material is Mozilla Developer Network (https://developer.mozilla.org). It covers all knowledge about HTML, CSS, JavaScript, whether you are a beginner or veteran, it is very useful to all the web developer.3. Must to master some Web development tools (15 days)Tools can make your work more efficiently, and to choose the best tools, you may need to consider how fast and quick that you can master it. There are a lot of video tutorials you can learn on their official website and Youtube. Here are some basic web design tools that you must know:Web page editor: Sublime TextSublime Text is an excellent editor. It has the elegant interface, smooth operation, automatic support syntax highlight and with rich plug-ins, it's my favorite one. I do not recommend to use the powerful IDE immediately for beginners, it’s hard and difficult to learn at first and may crush your confidence.Picture editor: PhotoshopAdobe Photoshop is an image processing software which is developed and distributed by Adobe. Photoshop mainly to deal with the pixels of the digital image, using it can edit and draw picture effectively. PS has many functions, it involves the image, graphics, text, video, publishing and so on. Photoshop is very professional, but also slightly complicated. If you are a professional graphic designer, you must master this tool. As a front-end developer, you need to work closely with the designer, learning to use the PS will get you more design ideas when you develop the web page and can communicate with web designer more easily.Web prototype design: Mockplus (with the lowest time cost)As a web developer, it is absolutely necessary to master some prototype design knowledge, which is one of the most profitable things I have invested.Mockplus is a very easy-to-learn web page prototyping tools. With drag and drop, you can achieve a simple interaction easily. There are a lot of project types: free projects, web projects, custom projects, and of course, APP project. It provides the largest web project size: 3000 * 6000, and with 200 built-in components and 3000 icons will make your design more easily. I really like the new feature-"repeater", it's easy to use and save me a lot of repeated design time.Web design collaboration : Mockplus iDoc (Make teamwork more efficient)Sometimes we have to design with our team, and collaborate with developers/product managers/project owner. How to hand off design more efficient? Mockplus iDoc can help you.Mockplus iDoc is a powerful product design collaboration tool for designers and engineers. It goes beyond the design workflow and helps teams with the design hand-off. It greatly facilitates the handoff by taking designs from Photoshop, Sketch, Adobe XD and exporting them into a format that can easily generate code snippets, specs, assets, style guides, interactive prototypes, etc.4. Build your own Website (at least 1 month)When you master the basic web design principles and also did some basic exercises, you can start to join the actual project to improve your development skills as soon as possible. It’s a good start to use Jekyll + GitHub Pages to build a static blog for yourself, they don’t require any back-end development.If the template can meet your needs to build a website, then it may only need to take a few hours to create it. Just like Wordpress. How much time do you need to build a website is totally decided by your satisfaction of the site. If you want to develop a new site and also with beautiful web UI design, good content, it takes 1 month at least, or even longer.5. Never stop learning Web design knowledge (all the time)Front-end development is different from the back-end development, is a direct user-oriented position. Your results can be directly displayed by the user. I think to master some of the design knowledge and grasp the current web design trends are also necessary to a developer. With more web design ideas will make a better web page that user will please. Learning can’t stop unless you want to be a lousy one. And here are 15 web design blogs that I highly recommend to all of you, and some UI design recourse you may already know is Dribbble and Behance. Spend one or two hours every day to read and watch, you will benefit a lot.10 Web Development learning course websitesTreehouseLyndaUdemyCodeacademyWPSessionsTuts Plushttps://www.khanacademy.org/CSS TricksEloquent JavascriptCodrops4 most popular web development community sitesStackOverflow.comHackernewsRedditDzoneConclusion:Web front-end development is the process which needs to keep learning. In recent years, the complexity of front-end development is getting higher and higher. This article is only for those people who want to enter into front-end development industry and cannot find the direction. How long does it take to learn web development? After reading this step by step guide that you can find a junior development position. Whatever you do, learning is fundamental, hope this article can help you guys.Maybe here is another article that you may be interested in:How to Choose to Be a Web Designer or a Web Developer?

The points are given to know the principles of web design and to know more information visit this article.Webdesign: 8 main principles of website designToday we find a myriad of templates, themes and other designs proposed to adapt to different CMS market, which offer an ergonomic and attractive website, but are however little differentiating.Some basic tips for thinking about your website.If your creativity and your inspiration are just waiting to be expressed, do not rush into it.Making mistakes in webdesign will affect the way a person will perceive your work.So you have to learn to avoid them.With a few key tips, it's easy to create an effective and ergonomic website.Structuring contentThe pages of a site must be legible for the visitor.So you do not have to overload them.If we had to schematize as simply as possible a web page, we would have first the header, which generally includes the logo, the menu of naivgation and a title of page, then the body of page, possibly structured in one, two or three columns, and finally the footer, which includes elements of address, navigation or identification.Then comes the definition of your tree, then your page templates, and finally for each type of page, the zoning of the different elements. The rule of three clicks is one of the rules that can be inspired in terms of basic ergonomics in the creation of a site. As well as basic principles like text readability or contrast.What basic structure for your pages?Prioritize informationThe creation of a site is also an opportunity to express your creativity. However, you still need to comply with certain pre-established codes, including UX design, or user experience.Each element must be hierarchical in a logical order, a clickable element must be identified quickly, your forms and other "call to action must be clearly visible.It is also important not to overlook white spaces.They will air the site and make it more enjoyable for the visitor.In a general way, adapt to the current codes of the web, and take example on the "big" sites: useless to think to revolutionize the webdesign, privilege functional ergonomics.What types of elements and what layout?A fundamental reflection.Responsive or "mobile first"?Today, your website will not only be visited on a computer.Mobile traffic is estimated at around 50%, and this figure is increasing year by year and will even explode according to recent analyzes .So you must make sure that the design of your site is "responsive", it must fit perfectly on smartphone and tablet. So you have to think about the computer version as well as the mobile version. You will also need to optimize all your content (image, text, etc.) so that it is more easily accessible on mobile.Fortunately, most templates for CMS (Worpress, Joomla or Drupal) are available in a responsive version. If you choose to create your own template, you'll have to think about it.It is also possible to design your webdesign according to the "mobile first" principle, which is to think by thinking about mobile browsing before other types of screens. Several screens, several ways to see a site ... The principle: consistency and readability, on all media.An appropriate color codeColors are very important in all your creations.They each represent an emotion in particular and influence the perception of the user. So you need to choose them with meticulousness and logic. There is a color theory to teach you how to choose and assemble them to get your message across effectively. Harmony in contrast, in camaieu ... The online tools allow you to avoid visual faults.Be careful not to multiply the colors that you will use in your site: again, we can rely on a maximum of three colors to design a website.Your industry, your targets, your values ​​are starting points to fuel your thinking around your world of color.Pictures, but of quality.In order to give your site a more professional look, pay attention to the images you will insert. Your images must be of a correct resolution. Also consider optimizing them for the mobile version so that your site does not take too much time to load.Think about the visual universe of reference in relation to your activity, privilege original images that you can create if you are equipped, think of a friend photographer or invest a little ... Otherwise, choose carefully sites of image banks quality.The images you choose will serve your content: in general, beware of images of generic banks that mean nothing !When Vince Vaughn and his acolytes revisit image bank photos, it's pretty hilarious ...Combine typography intelligentlyFirst, you need to choose a combination of typography to your image. Be careful once again not to use any of them. Avoid multiplying fonts that are too original. Before starting to create your site, limit yourself to three different fonts that you can associate well.Each policy must result from an informed choice: serif, sans-serif, size, etc. A good use and association of the typography will bring you the key of originality that you wish, while leaving your site readable and ergonomic.So do tests, relying on online tools, such as typecast , which allows you to test the association of two different types. Typecast allows you to quickly test the association of different fonts on the screenAnimate your site in moderationPopovers on every page? Animated gifs galore? SVG in abundance? Javascript animations on each block? In webdesign, it's no! You can insert a few moving elements to boost your site, but the rule of thumb is moderation: do not overdo it. Same, avoid gadgets, counters, iframes, widgets.A site that is too animated can be confusing ... again, think ahead of time about the usefulness of each animation, and how it serves your message and your content, or not.Last but not least: KISS! Keep it simple, stupid! This is a design approach that advocates that a system must remain as simple as possible.This principle is widely applicable in webdesign and should guide you daily in the design, integration and animation of your website.Do not complicate things, make navigation simple, do not overload, prefer things intuitively clear. Your visitors will give you a hundredfold.

We often heard that web development is easy to get started, is that true? In recent years, the web front-end framework is emerging in an endless stream, like React, Vue, AngulaJS all attract a lot of attention, and many big companies are paying more attention to front-end development that makes the web front-end developer is the one of the hottest jobs in the world.Many people, especially young people are eager to get in this industry, but how long does it take to learn web development? How long can you be a web developer and make money from it? Here I wanna talk about my own experience to give your guys a little hint.Note: Make up your mind and stick to it.1. Web design basic concepts and principles ( at least 10 days)You must master the basic concepts and theoretical knowledge of web design before you get started. You should know about: What is a static page? What is a dynamic web page? What is the overall layout of the web page? What is the design principle of web design? What are the basic elements of the web page? What can't do or not to do of web design? The more basic web design concept you know, the easier you can develop a web page without making mistakes.As we know, web design trends always change, to master the basic web design principles can lay the whole fundamental of a website. At the same time, you may need to know some basic SEO knowledge to make a friendly website. I really recommend you guys to read some web design books rather than watching online video tutorials, a good book absolutely make you benefit. Here are some web design books which are recommended by leading designer in this industry.How to make a web page more easily:HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETTHow to make web design more functional:JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETTHow to learn front-end development:Best UI/UX Design Materials for FreeLEARNING WEB DESIGN: A BEGINNER'S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINSMust read usability book:DON'T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG2. CSS + HTML + JavaScript (1 month)Compare with Javascript, HTML is nothing hard, but the label language and format specification; CSS is relatively complex, It involves some browser compatibility issues. But to combine these two can achieve a lot of web page effects. If you only grasp some basic code language, but not actually take practical action, it will be difficult to master it. When I started to learn Bootstrap, I just put the responsive web page which was created by Bootstrap to the existing electricity business project. Bootstrap is a really good tool to get started. I can solve the basic problems on my own after reading their official website documents, you can try it.JavaScript is harder than HTML and CSS. But, you know that Brendan Eich created the JavaScript language just for 10 days, so its syntax is not very complicated than you think. I believe you will be able to master the basic syntax soon as long as you study hard.I think the best web development learning material is Mozilla Developer Network (https://developer.mozilla.org). It covers all knowledge about HTML, CSS, JavaScript, whether you are a beginner or veteran, it is very useful to all the web developer.3. Must to master some web design tools (15 days)Tools can make your work more efficiently, and to choose the best tools, you may need to consider how fast and quick that you can master it. There are a lot of video tutorials you can learn on their official website and Youtube. Here are some basic web design tools that you must know:Web page editor: Sublime TextSublime Text is an excellent editor. It has the elegant interface, smooth operation, automatic support syntax highlight and with rich plug-ins, it's my favorite one. I do not recommend to use the powerful IDE immediately for beginners, it’s hard and difficult to learn at first and may crush your confidence.Picture editor: PhotoshopAdobe Photoshop is an image processing software which is developed and distributed by Adobe. Photoshop mainly to deal with the pixels of the digital image, using it can edit and draw picture effectively. PS has many functions, it involves the image, graphics, text, video, publishing and so on. Photoshop is very professional, but also slightly complicated. If you are a professional graphic designer, you must master this tool. As a front-end developer, you need to work closely with the designer, learning to use the PS will get you more design ideas when you develop the web page and can communicate with web designer more easily.Web prototype design: Mockplus (with the lowest time cost)As a web developer, it is absolutely necessary to master some prototype design knowledge, which is one of the most profitable things I have invested.Mockplus is a very easy-to-learn web page prototyping tools. With drag and drop, you can achieve a simple interaction easily. There are a lot of project types: free projects, web projects, custom projects, and of course, APP project. It provides the largest web project size: 3000 * 6000, and with 200 built-in components and 3000 icons will make your design more easily. I really like the new feature-"repeater", it's easy to use and save me a lot of repeated design time.4. Build your own website (at least 1 month)When you master the basic web design principles and also did some basic exercises, you can start to join the actual project to improve your development skills as soon as possible. It’s a good start to use Jekyll + GitHub Pages to build a static blog for yourself, they don’t require any back-end development.If the template can meet your needs to build a website, then it may only need to take a few hours to create it. Just like Wordpress. How much time do you need to build a website is totally decided by your satisfaction of the site. If you want to develop a new site and also with beautiful web UI design, good content, it takes 1 month at least, or even longer.5. Never stop learning design knowledge (all the time)Front-end development is different from the back-end development, is a direct user-oriented position. Your results can be directly displayed by the user. I think to master some of the design knowledge and grasp the current web design trends are also necessary to a developer. With more web design ideas will make a better web page that user will please. Learning can’t stop unless you want to be a lousy one. And here are 15 web design blogs that I highly recommend to all of you, and some UI design recourse you may already know is Dribbble and Behance. Spend one or two hours every day to read and watch, you will benefit a lot.Conclusion:Web front-end development is the process which needs to keep learning. In recent years, the complexity of front-end development is getting higher and higher. This article is only for those people who want to enter into front-end development industry and cannot find the direction. How long does it take to learn web development? After reading this step by step guide that you can find a junior development position. Whatever you do, learning is fundamental, hope this article can help you guys.