Photo by Daniel Korpai on Unsplash

Front-End Web Development Roadmap

There are enormous resources to learn web development from. However, most of them are a bunch of incomplete or fast paced resources that i honestly would not recommend. If you have not checked my previous article on resources to get you started, kindly check it.

Today, I am giving you a comprehensive guide to web development. This is a roadmap that i wish i had known when i was a newbie.

• HTML: This is the language of the web, hence you have to learn it first to be able to display information on the website. Here you can learn Html elements like anchor, header, body, article, section, div, asides, footer, main, nav, img, span, list, audio, video, forms, buttons, etc. You don’t have to overwhelm yourself by learning everything because as you create projects, you tend to learn along the way. This should take maximum of a week but you can learn it at your own pace.
• CSS: Once you’re comfortable with Html, you can dive into the basics of CSS. CSS is really interesting until it gets a little complex. The shift in complexity can trigger you but just keep going. You can also check Stackoverflow or Kevin Powell’s Youtube channel in-case you encounter any problem. With CSS, start with the key concepts like CSS units (px, em, vh, vw, rem, etc), Selectors, Box model, Layouts(Flexbox, Grid), Positioning, Shorthand properties, Basic animation and Media queries. With these, you are good to go and can learn the rest while creating projects. The CSS phase can take 3-4 weeks, but learn at your own pace and be comfortable with it before moving on to JavaScript.
• JAVASCRIPT: The graduation from CSS to Javascript is so overwhelming that it makes 70% of newbies to give up, but don’t. You can start by learning ES6 variables, functions, classes, datatypes, operators, loops, Objects, methods, arrays, prototypes, error handling and then DOM. I highly recommend you learn these from javascript.info due to it’s comprehensiveness. Take as much time as you can, learn at your own pace, and build simple projects with it. Do not allow yourself to dwell in watching tutorials because this phase is TRICKY.
• CSS FRAMEWORKS OR PREPROCESSORS: CSS Frameworks enable faster development of the front-end. Instead of a default theme or built-in UI components, you’d get utility classes to build your website. Every framework has their own pros and cons, it’s left for you to choose your preferred one. These frameworks include Tailwind CSS, Bootstrap, Foundation, Bulma, UI Kit, Materialize, Skeleton, Semantic UI, Tacit and Pure. The most popular ones are Bootstrap & Tailwind and i advice you start with any of the two. A CSS preprocessor is a separate stylesheet language with advanced features that developers can leverage to create leaner, faster products with more features while spending less time on the whole process than they would with plain CSS. SASS, LESS and Stylus are are the most popular ones but my favorite is SASS. You can learn Sass by merely watching a crash course on Youtube.
• JAVASCRIPT FRAMEWORKS: JavaScript frameworks are tools that makes working with JavaScript easier and smoother. These frameworks also make it possible for the programmer to code the application as a device responsive. This responsiveness is yet another reason why the JavaScript frameworks are quite popular when it comes to the question of using a high-level machine language. These frameworks include Angular JS, React JS, Vue JS, Svelte, Ember, Meteor, Mithril, Node JS, Polymer and Backbone.js. The most popular ones you can start with are React, Angular and Vue.

With the above, you can then move on to Back-end by learning Node JS, API, SQL, MongoDB, etc.

That’s all i have for you about front-end roadmap. Do check my other articles on hashnode at jovialcoder.hashnode.dev.

See you soon. Regards,

Benazir.