All about web development.
WEB DEVELOPMENT JOURNEY
Step 1: Get the required tools 💻 All you need for web development is a web browser and code editor and then you can start coding!
For web browsers get something like Chrome or Firefox.
For text editor VS Code or Sublime Text are good options.
Got it? Ok, moving on!
Step 2: Learn HTML5 🧱 Websites are built using HTML. It is where your web dev journey begins.
Build a good understanding of HTML5 like semantic tags, best practices, and document structure.
Resources like freecodecamp.org, Udemy, and YouTube are your best friends!
Step 3: Learn CSS 🎨 CSS Basics Ok, this is somewhat difficult.
CSS is what you use to style websites. Think of HTML as the skeleton and CSS as everything on top.
CSS is so diverse that you can't know it all. Trust me. It requires practice and well... more practice
First get familiar with the basic concepts used in CSS like classes and ids, selectors and their specificity, and the box model.
Then move to basic text, font, and element styles. Build small projects to practice. Try to memorize properties.
Advance CSS concepts Then move to advance concepts like flexbox and CSS Grid for layouts.
CSS Animations and transitions.
CSS variables and even Sass which will make writing CSS easier.
Media queries and responsive design.
Now you are a CSS wizard! 🧙♂️
Step 4: Learn JavaScript 🛠️ Basics JS is the language of the web. It is very powerful and is used for both the front and backend.
Start with the basics variables, loops, and conditionals.
Get familiar with the syntax. Get to know how it works.
JS DOM Manipulation The move to manipulating DOM elements. Selecting HTML elements, adding event listeners, changing styles, etc.
Practice by building small projects.
Stuff like background changer, dark mode toggle, and clock, etc.
Advanced JS Concepts Now you can move to advanced JS concepts like the new ES6 syntax, object-oriented programming, object destructuring, and asynchronous javascript.
Now you know enough JavaScript to start...
you guessed it! JS Frameworks 😀
Step 5: Moving Ahead! 🤖 Pick a Side This is where it's up to you.
I would recommend deciding what you want to do front-end, back-end, or full-stack development.
There are libraries and frameworks for each of these.
It depends on your preference and what you value.
If you're more into designing, playing with colors, fonts, etc. then I'd say to start with front-end development.
If you don't fancy writing HTML, CSS and UIs in general, I'd say to start with back-end development.
Frameworks For the front-end, you have React, Angular, and Vue as the major players but there are more exciting technologies coming everyday!
For the back-end, Node.js and Express is a good combo. In python, there are Django, Flask, and in PHP Laravel is a popular option.
JavaScript Technology Stacks 👉 MERN stack: MongoDB, Express, React & Node.js
👉 MEAN stack: MongoDB, Express, Angular & Node.js
👉 MEVN stack: MongoDB, Express, Vue & Node.js
These stacks use JS for both front and back-end and are popular for full-stack development!
Databases If you want to get into full-stack development, you'll probably need to pick a database.
Popular options in SQL databases are MySQL and Postgress.
For NoSQL databases, you can use MongoDB and Firebase.
Few Helpful Resources 🚀 Version control: git.
Codesharing: GitHub.
Getting Help: StackOverflow, Reddit, Twitter.
DevOps: Travis CI, Circle CI & GitHub Actions.
Deployment: Netlify, GitHub Pages, Heroku, AWS.
Freelancing: Fiverr, Upwork.
Step 6: Conclusions... 💭 There are a lot of things to cover in web development. But don't be overwhelmed.
Knowing HTML, CSS and a bit of JS is good enough.
Frameworks are there to help you. But learn the basics first.
Build on this knowledge and explore!
That's All Folks! 🙏 This is all I know about web dev!
I am still a beginner in this vast field and I like you, have tons more to learn.
Take a deep breath and start coding!
Have fun. 😍
Thanks for reading! 😀