--- title: 'Hot Web Design and Development Resources - July 2020' url: 'https://worldoweb.co.uk/2020/hot-web-design-and-development-july-2020' markdown: 'https://worldoweb.co.uk/2020/hot-web-design-and-development-july-2020.md' date: '2020-07-30' description: 'Discover hot web design and development resources for July 2020, including tips for learning productively, Node.js tutorials, and web design inspiration.' taxonomy: category: - 'Web Development' tag: - Resources - HTML - CSS - Learning - JavaScript - Magazine --- # Hot Web Design and Development Resources - July 2020 Published on July 30, 2020 by Tracy Ridge in [Web Development](https://worldoweb.co.uk/category/category:Web%20Development) Welcome to July’s monthly roundup of Web Design and Development resources. In this month’s edition, the focus is on **learning**. If you are keen to get into the web development field then I hope you will find the resources helpful. As always there is a little something for everyone. Enjoy! ## Productivity ![The word learn on wooden blocks](https://worldoweb.co.uk/images/f/4/6/8/a/f468ac39df28854dc9c66b917b6fc4d855f8b5fd-learn-written-on-wooden-blocks.jpg) One of the keys to [learning](https://www.worldoweb.co.uk/2020/learn-a-new-skill-on-lockdown) productively is to take meaningful notes. The art of taking notes is to take something you have read or heard, simplify it and make it your own. Notes can be in written form, drawings, mind-maps or even voice memos. Using colour can also make it stand out so you can highlight particular key components. Google keep is one particular piece of notetaking software. Head over to [10 Google keep tips and trick to be a more productive learner](https://www.online-tech-tips.com/google-softwaretips/10-google-keep-tips-tricks-to-be-a-more-productive-learner/). On a more general consensus if you want to learn new skills entirely you can visit [17 Fun Websites to learn something new](https://mashable.com/article/fun-websites-improve-skills/) ## Learning Node If you want to develop an app then you should have an understanding of the infrastructure it runs on. After all, you wouldn’t want to build a house without ever laying bricks! I’ve mentioned Node JS a few times on this blog over the past year. It’s very popular as is the JavaScript language that runs on it. Geek for Geeks wrote an interesting article on [the top 8 reasons to learn it](https://www.geeksforgeeks.org/top-8-reasons-to-learn-nodejs-in-2020/). ![Code Projected Over a Woman](https://worldoweb.co.uk/images/3/d/4/3/0/3d43014bb59ab096ca54c1cdc83ed641b279f46c-code-projected-over-woman.jpg) If you endeavour to try learning node and JavaScript then you should also learn about how to install packages. NPM is a package manager for Node. Very much like your operating systems built-in software store without the GUI. It’s all command-line based but much quicker. FreeCodeCamp published a [beginners guide to NPM](https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/). If you are new to any type of programming but don’t understand the opportunities it could bring then here are [17 reasons to learn to code](https://dev.to/matdziu/why-should-i-learn-to-code-17-reasons-to-learn-programming-4pcd). ## Web Design Resources If you have an interest in [web design](https://www.worldoweb.co.uk/2019/innovative-web-design-trends-follow-2019) and have the following [skills](https://spyrestudios.com/important-skills-every-web-designer-needs/) then why not give it a go. The structure of the web is made up of **HTML**, **CSS** and **JavaScript**. In parallel, we’ll use the building reference that was used above. The **HTML** is the main structure, the walls of your house. The **CSS** is the decor, the colours of your walls, furniture etc. **JavaScript** is the functions. The lights switching on and off, power etc. ![Geometric Web Design](https://worldoweb.co.uk/images/8/2/c/2/3/82c238b8b751e12462e9164351748bea2178bd58-geometric-web-design.jpg) As a beginner, you will make mistakes. We all do. It’s only natural and it’s what helps us get better in the long run. Here are some pointers for HTML [mistakes](https://line25.com/articles/12-html-mistakes-not-to-make) not to make to get you started. [Years ago](https://www.worldoweb.co.uk/2018/trip-down-memory-lane-web-design) some things were not possible with CSS so therefore web designers used JavaScript to implement transitions, border-radius and animations etc. Take a look at [6 powerful CSS techniques](https://dev.to/diogorodrigues/6-powerful-css-techniques-you-can-use-instead-of-javascript-2f44) that can be used instead of JavaScript. ## New Tools for July 2020 **LT Browser** is a developer-friendly web browser for testing your apps or websites on different devices. It features a free basic plan that gives you 60 minutes of tests per month, 3rd party app integration and 24/7 support. If it saves you time in the long run it may be beneficial to get a paid plan. The basic plan allows you to road test it first. [Checkout LT Browser](https://www.lambdatest.com/lt-browser) **Code Inspector** is an Open Source static analysis tool for JavaScript and TypeScript Code. It can be used within the VS Code environment to analyse the code you write ensuring that its setup as expected. [Checkout Code Inspector](https://inspector.now.sh/) ## The Best of the Rest - [Exciting New Tools For Designers](https://www.webdesignerdepot.com/2020/07/exciting-new-tools-for-designers-july-2020/) - [Beginners Guide To WordPress Development](https://www.hongkiat.com/blog/beginners-guide-to-wordpress-plugin-development/) - [An introduction on how to import and export JavaScript Modules](https://thenextweb.com/syndication/2020/07/16/an-introduction-on-how-to-export-and-import-javascript-modules/) - [The Optimal Guide to Shuffling with JavaScript](https://medium.com/dev-genius/jthe-optimal-solution-to-shuffle-an-array-in-javascript-2d9c8ac066d9) - [Effective Approaches in JavaScript](https://medium.com/front-end-weekly/effective-approaches-in-javascript-4bd6dbc69c91) - [10 JavaScript Libraries You Should Try](https://www.freecodecamp.org/news/10-javascript-libraries-you-should-try/) ### Share [X](https://x.com/intent/tweet?text=Hot%20Web%20Design%20and%20Development%20Resources%20-%20July%202020&url=https%3A%2F%2Fworldoweb.co.uk%2F2020%2Fhot-web-design-and-development-july-2020&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldoweb.co.uk%2F2020%2Fhot-web-design-and-development-july-2020 "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fworldoweb.co.uk%2F2020%2Fhot-web-design-and-development-july-2020&title=Hot%20Web%20Design%20and%20Development%20Resources%20-%20July%202020 "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fworldoweb.co.uk%2F2020%2Fhot-web-design-and-development-july-2020 "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Hot%20Web%20Design%20and%20Development%20Resources%20-%20July%202020%20https%3A%2F%2Fworldoweb.co.uk%2F2020%2Fhot-web-design-and-development-july-2020 "Share on Bluesky") [Email](mailto:?subject=Hot%20Web%20Design%20and%20Development%20Resources%20-%20July%202020&body=https%3A%2F%2Fworldoweb.co.uk%2F2020%2Fhot-web-design-and-development-july-2020 "Share via email") #### Tags [ Resources](https://worldoweb.co.uk/tag/tag:Resources) [ HTML](https://worldoweb.co.uk/tag/tag:HTML) [ CSS](https://worldoweb.co.uk/tag/tag:CSS) [ Learning](https://worldoweb.co.uk/tag/tag:Learning) [ JavaScript](https://worldoweb.co.uk/tag/tag:JavaScript) [ Magazine](https://worldoweb.co.uk/tag/tag:Magazine) ##### Next [ ← Hot Web Design and Development Resources - August 2020 ](https://worldoweb.co.uk/2020/hot-design-dev-resources-august-2020) OR ##### Previous [ Branding and Marketing - What is The Difference → ](https://worldoweb.co.uk/2020/branding-and-marketing-the-difference) --- ## Navigation - Previous: [Hot Web Design and Development Resources - August 2020](https://worldoweb.co.uk/2020/hot-design-dev-resources-august-2020.md) - Next: [4 Top Money-Making Apps Ideal for College Students](https://worldoweb.co.uk/2020/4-top-money-making-apps-for-students.md)