Get Started With Web Development
This is a list of websites, resources, and concepts to check out if you're getting started with web development.
Documentation
If you want to learn about a specific HTML element, CSS property, or feature in JavaScript, you can find detailed documentation for those features here
Tutorials (Start Here)
These are all good places to get started and get a handle on the basics. Some are interactive, some are videos, and some are written.
- W3Schools HTML Tutorial (Written & Interactive)
- MDN Web Docs - Learn Web Development (Written)
- The Modern JavaScript Tutorial (Written) - Good website to learn if you're starting with zero knowledge of JavaScript
- freeCodeCamp (Interactive)
- Web Dev Simplified on Youtube
- React Tutorial (Written & Interactive)
CSS Learning Resources
- https://cssanimation.rocks/
- https://flexboxfroggy.com/ - This is a game that teaches you CSS' flexbox feature
Additional Resources
- Google Fonts - On top of fonts, they also have free to use icons.
- Contrast Checker
- cubic-bezier - An easy, visual way to create cubic-bezier curves for CSS animations & transitions.
- https://cssgradient.io/
Code Editing Software
You can start with something as simple as Notepad or a normal text editor. Just create a file with .html at the end and start writing HTML.
Ultimately I recommend Visual Studio code with the Live Server plugin, which lets you view the page you're editing in real time.
Free Online Website Code Editors
If you want a quick and easy way to play around with HTML/CSS/JS in your browser these are great options.
Concepts
HTML Concepts
- Semantic Elements - While you can use only div elements for everything in a document, that will prevent some users and search engines from understanding the purpose or layout of your page.
CSS Concepts
Accessibility
Accessibility is the idea of ensuring that your website accessible to all kinds of users, whether they are visually impaired or use keyboard navigation (as two examples)
- Contrast: Text and clickable element colors should be easily distinguishable from the background color. Contrast Checker Tool
- CSS content, like pseudo elements, will be ignored by screen readers. This means they're good for purely visual or aesthetic elements.
- JavaScript: If your page doesn't require JavaScript, it's a good idea to ensure it works with it disabled entirely. Modern CSS has more options than ever for creating functioning menus without the use of JS. There are plenty of reasons someone might want to disable JavaScript, and they shouldn't have to tinker with your page just to navigate it.
- Keyboard Navigation: Pages should be navigable via keyboard. By default, browsers allow you to press the tab key to cycle through the page. Make sure that everything that is clickable can also be focused and interacted with via keyboard, and that the order of elements in the HTML matches what appears on screen.
Advanced concepts
- Visual hierarchy
-
Responsiveness: These days it's common practice to make your website rearrange itself to fit different screen sizes. After all, desktops and phones have drastically different screen sizes and dimensions, so you need to ensure that all of your content fits on as many devices as possible. This is usually accomplished using media queries.
- See also: CSS Units of Measurement