Advanced Coding Guide - WIP!!! Check back later!
So, you've learned the basics of HTML, CSS and JavaScript. But now what? If you want to improve your coding skills even further, this is the guide for you! I will go over everything that you might want to learn to go from a beginner to an intermediate web developer. This is not so much a tutorial as it is a list of links to tutorials with an explanation why you should learn it. You'll see what I mean.
A little bit about me: I'm currently a hobbyist coder, but I was a professional full-time frontend web developer (though I dappled in backend) for 4 years. Even though I learned programming in high school I basically am a self-taught web developer, because we didn't learn that specifically. After high school I went from a beginner to an intermediate web developer by following online tutorials and landed an amazing job right after. There, I learned what I had missed (and it was a lot). Now I'm here to give you this "wisdom", so that you know what's possible, what you should know, what you should use, etc -- whether you want to become a professional web developer or whether it's just a hobby to you.
What you should already be familiar with:
- HTML
- CSS
-
JavaScript (at least the basics)
(If you don't know Javascript yet just google "javascript tutorial", there are millions! Come back here once you've understood the basics.)
What you will learn:
- Advanced HTML, CSS, and JavaScript
- CSS-Preprocessors (SCSS) and Webpack
- How to use an IDE such as VSCode
- What Git is and how to use it (and why you should)
- Code Quality (what it is and why it matters)
- How to make your websites responsive and accessible
- What else you should learn if you want to land a job
#Code Quality
Topic 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eveniet dolorum explicabo, pariatur deleniti corporis architecto. Consectetur maiores alias ducimus quaerat incidunt pariatur enim odit numquam magnam! Neque, saepe inventore? BEM
Topic 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eveniet dolorum explicabo, pariatur deleniti corporis architecto. Consectetur maiores alias ducimus quaerat incidunt pariatur enim odit numquam magnam! Neque, saepe inventore?
#Checklist
- HTML5 semantic elements
- Tables
- Details/summary element
- BEM
- Vertical centering
- display: flex
- display: grid
- Browser compatibility
- Responsiveness (Media queries)
- Variables
- Nesting
- Variables
- Mixins
- Functions
- Waiting for DOM
- Event Listeners
- Cookies / LocalStorage
- Working with JSON and fetch
- jQuery: What is it (and why not to use it)
- Using an IDE
- Code Quality (DRY)
- Understanding Git
- Using Git
- Webpack
- alt tags
- Jump-to-content links
- Color usage
- Keyboard navigation
Advanced
For these you should know what they are, but since they are quite advanced you don't really need to be able to use them if you don't need them for a project of yours.
- JSON
- XML
- SVG
- jQuery (don't use it!)
- Angular
- node.js
- React
- Typescript
- AJAX
- SQL (e.g. mySQL)
- PHP
- Symfony
#Cheatsheet
Todo
#Comment Section
Got questions? Need help? Want to report a dead link? Use the comment box below. No registration necessary!