I started my web development journey exactly one year ago i,e. January 2020 and it's been a year since I'm in learning phase😄
In this article I'll be covering
- All you need to learn about front-end development
- Tools and technologies
- Skills you need to learn
- Resources
- And many more....
First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc
I recommend you to start with VS code. Why?
=> Many built-in features
=> It's fast
=> Large community
=> IntelliSense code completion and debugging
If you don't want to download an editor due to memory issue or something else?
Don't worry we have lots of online editors also 👇
Now you're all set to write code and create beautiful websites. A typical website can be divide into three phases.
Structure - HTML
Styling - CSS
Behavior - JavaScript
1. HTML
- It is used to build the skeleton for your website
- It's a markup language that totally operates on tags
- You can master it within 10 days
W3 Schools HTML
2. CSS
- It is used to give the styling for your website
- Cascading Style Sheets, that totally operates on different properties
- You can learn it within 20-25 days but it will take time to master it
W3 Schools CSS
Although there are more than 500 properties in CSS but trust me your hardly use all of them in your entire development life. There are some frequently used CSS properties
- Box model
- Position
- Background
- Animation
- Media query
- Flex box
- CSS grid
These are some tricky concepts in CSS but don't worry I'm here to make these tricky concept easy for you😍
Learn CSS by playing games
Learn Flexbox
Learn Grid
Learn Transformation
CSS Frameworks
In simple words CSS frameworks are the CSS code written by some other developers. All you need to do is just import in your HTML file and now you can add styling in your website with even writing CSS code by yourself. There are plethora of CSS frameworks available. All are equally good you can pick anyone of them by your choice 👇
- Tailwind CSS
- Bootstrap
- Bulma
- Materialize CSS
- Foundation
3. JavaScript
- JS is used to add functionality and behavior in your website
- JavaScript is a popular programming and widely used language for Web Development
- You can't master JS in few days or months, It will take time but you will be able to create websites in few days.
Start with the basic topics:
- Data types
- Loops
- Conditional statements
- Objects
- Arrays
Functions
Document
Free resource including books, article, videos and much more
Document Object Model (DOM)
- With the HTML DOM, you can access, modify and changes the HTML elements
- When a web page is loaded, the browser creates a Document Object Model of the page
With the help of DOM, JavaScript can change the
- elements in the page
- attributes
- CSS styling
- add new HTML elements and attributes
- remove existing HTML elements and attributes
I mean now you have a super power to make changes in you webpage using JS😎
Git and GitHub
I think now it's the right time to learn Git and GitHub (version control)
- Git is a Version Control system used for tracking changes
GitHub is a code hosting platform of Git
This article is for absolute beginners. I hope get the some overview of web development. Time to tap your fingers on the keyboard😁
HAPPY CODING❤