Goal abandoned
The author does not write in the goal 5 years 10 months 3 days
WebDev in 2019
hey
Goal Accomplishment Criteria
I earn money
-
html
-
basic html
-
dividing page into sections and how to structure the DOM properly
-
make at least 5 html pages - focus on structure
-
Basic SEO
-
Accessability
-
-
CSS
-
basic CSS
-
Grid and Flexbox
-
Media queries and responsive websites
-
style the html pages
-
Making layouts ( floats, positioning, display, box model, CSS grid flexbox)
-
-
Basic JS
-
syntax and basic constructs
-
how to manipulate DOM
-
hoisting, event bubbling, prototype etc
-
learn Fetch API/ AJAX (XHR)
-
ES6+ new features and writing modular JavaScript
-
Hosting, Event Bubbling, Scope Prototype, Shadow DOM, strict, how vrowsers work, DNS, HTTP
-
-
Package Managers
-
npm (improved alot, but still behind yarn in some features, pick any)
-
yarn
-
-
Instal some external dependency in your application
Go ahead and install some external library in the webpages that you made above e.g. instal some toast plugin and when user clicks a button, show him the toast message or create a login form validation using some form validation library and play with different options and see how to install different versions. Read about semantic versioning.
-
CSS Preprocessors
Preprocessors let you add functionality on top of CSS and let you do things that CSS can't. Have a look at them and see what they can offer and pick the suitable one.
-
Sass
-
PostCSS (not a preprocessor but can be used as one. go for SASS and revisit postCSS later)
-
Less (there is still some less on the marker but I won't go for it if I was starting in 2019)
-
-
CSS Frameworks
-
Bootstrap
-
Materialize CSS
-
Bulma
-
Semantic UI
-
-
CSS Architecture
There are multiple way to structure your CSS better and to make it more maintainable. You should know about the differences.
WIth modern front-end frameworks there is more push push towards CSS in JS with which you are not going to need these. However, you should still learn BEM at-least, which would prove helpful in the long run.
-
BEM
-
OOCSS
-
SMACSS
-
-
Build tools
Tools to help you in the building/bundling and development.
-
Linters and Formatters (Prettier, ESLint, JSHint, JSLint, JSCS)
-
Module Bundlers (Webpack, Parcel, Rollup)
-
Task Runners (npm scripts, gulp)
-
-
Create something maybe a library
some sort of library in which you have to use Sass and JS. Then use webpacl to convert Sass to CSS and use babel to transpile ES6 code. Once you are done with, release it on github and npm
-
Pick a Framework
There is more and more demand for react.js these days. You can pick any of the listed ones and you will be fine. Have a look at all of the and see what you like. Important - Don't buy into the hype, compare and understand!
Before you star this you should have good understanding of what single page applications are, how they work, and what are some of the positive and negative aspects of single page applications.
-
React.js (Redux, MobX - these are not specific to React though, you can use them in any framework or app)
-
Vue.js (Vuex)
-
Angular (RxJS, ngrx - even if you don't pick angular RxJS is an amazing library and can be use out of angular. Give it a try afterwards
-
-
CSS in JS
-
Styled components
-
CSS Modules
-
Emotion
-
Radium
-
Glamorous
-
-
Practical time
Now you know everything that one might need to build a modern JS application. Go ahead and make some application with whatever framework you picked. You can find some of the ideas in the 'ideas' directory. Pick anything and start! ( Learn how to mesure and improve the performance of your application e.g. Interactivity Time, Page Speed Index, Lighthouse Score etc.)
-
Testing your Apps
There are lots and lots of different tools for different purposes. I mostly find myself using the ones listed on the left. However, before you learn them, I would reccomend you to first understand the different test types, look at all the options available and use the ones most suitable for your needs. (here is a good summary to get started: https://goo.gl/D77a4k )
-
Jest, Enzyme, Cypress (you can fulfill all your testing needs with these three)
-
Unit, Integration, Functional (understand different types of testing and learn how to write these with the above)
-
-
Progressive WebApps
Learn about service workers and how to make progress web apps.
-
PLPR Pattern, Rail Model, Performance Metrics, Using Light House, Using Dev Tools (calculating, measuring and improving performance)
-
Storage, Web Sockets, Service Workers, Location, Notifications, Device Orientation, Payments, Credentials (learn different Web APIs used in
-
-
Type Checkers
You don't need to learn these but they really give you superpowers and can be mastered in a few hours.
-
TypeScript
-
Flow
-
-
Server Side Rendering
Learn about sever side rendering in whatever framework you picked.
-
React (Next.js, After.js)
-
Angular (Universal)
-
Vue.js (Nuxt.js)
-
-
Static Site Generators
-
GatsbyJS
-
-
Desktop Applications
-
Electron
-
Proton Native
-
Carlo
-
-
Mobile Applications
-
React Native
-
NativeScript
-
-
Web Assembly
Web Assembly or WASM is the binary instructions generated from high level languages such as Go, C, C++ or Rust. It is faster than JS and WASM 1.0 has already shipped in the major browsers. It is being touted bt someone to eventually replace JS but I seriously doubt that it would happen or see it happening any time soon.
-
All the things that weren't mentioned above
-
Canvas
-
HTML-5 APIs
-
SVG
-
Sourcemaps
-
functional programming
-
tc39
-
-
Required for any path
-
Git - version control
-
SSH
-
HTTP/HTTPS and APIs
-
Basic Terminal Usage
-
Data Structures and Algorithms
-
Character Encodings
-
Design patterns
-
GitHub ( Create a pofile. Explore relevant open source projects. Make a habit of looking under the hood of project you like. Create and cont
-
-
Keep exploring
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
