This page provides a (glossary like) introduce to some web design/development related concepts and techniques. (Note: Those concepts and techniques in bold are essential concepts and libraries.)
(Stay tuned — I will update all the pages related to web development over time.)
- Some common senses to know about computer requirement for web development/design:
Highly recommend to have a computer (labtop/desktop) with SSD (Solid-state drive) storage because it will speed up things a lot compared with traditional hard drives.
- Powerful processors are not too important for web design
For web design, the speed of the computer is much more about the hard disk rather than the CPU. This is because you will be opening and closing a lot of files and the speed of this is all about hard drive. The few seconds that you save each time you open files and apps adds up to days!
Web design is hard drive intensive and hardly ever CPU intensive. get an SSD-based computer if you can for web design.
- High-speed internet
The internet is like car, the faster the better. Being able to upload and download files in a flash feels good. when we are searching for specific tips on how to do something on Google, speed is essential.
- To start with your web development coding journey, you will need a code editor.
- If you are using Windows, Visual Studio Code, Sublime Text (2 or 3), or Nodepad++ can be a good choice;
- If you are a Mac user, Visual Studio Code , or Sublime Text (2 or 3) would be the right choice.
- If you are using Linux (e.g., Ubuntu), Visual Studio Code, Sublime Text(2 or 3), or gedit that comes with most Linux distribution will work.
- To start with your web development coding journey, you will also need an appropriate web browser: Google Chrome (preferred) or Firefox.
- Some quick tips to remember:
- Use descriptive (html) page names that tell people (and search engine:)) what the page is about. For example contact.html, project_overview.html;
- Do NOT contain white SPACE in your page names.
- People do not like to read long paragraphs of text on websites, so it is better to use shorter paragraphs, bullet lists, and sub-headings.
- Keep the look and structure of your web pages consistent across the website.
- Remember that we always have to have an index.html page on the root of your website — this is the homepage.
- See the pages below for some concepts and terms and techniques that closely related are web development
- Web development / design — (basic) concepts and terms
- Web development / design — (advanced) concepts and terms
- See the pages below for some essential skills for web development
- Web development / design — HTML tags explained (including some tricks)
- Web development / design — debugging
- See the two pages below for some popular JavaScript libraries with/without interactive maps support
- Web development / design — popular JavaScript libraries
- Web development / design — popular JavaScript libraries supporting interactive maps
- Some the posts below about some good tutorials I collected for you
- Web development / design tutorials — HTML & CSS
- Web development / design tutorials — JavaScript (JS)
- Web development / design tutorials — D3.js
- Web development / design tutorials — jQuery
- Web development / design tutorials — Bootstrap
- See this page for some JS tricks.
- See this page for some materials that might be inspiring for your own project.
- See this page for some good web development and design related books (including ebooks).
- See this page for some online source code playgrounds.
References:
- W3Schools Online Web Tutorials
- Web Design – Start Here: A No-Nonsense, Jargon Free Guide to the Fundamentals of Web Design Paperback – July 21, 2015 by Stefan Mischook
- Wikipedia