DEV Community

mukundtheamateur
mukundtheamateur

Posted on • Edited on

Full stack Web development Roadmap

#programming #tutorial #roadmap

Roadmap for Full stack web development

W E B ___ D E V E L O P M E N T ___ F U N D A M E N T A L S

   1. Know how websites function and how HTML, CSS, and JavaScript 
      help
   2. Understand how the internet works.
   3. Start coding with HTML, CSS, and JavaScript.
   4. Learn and understand git, GitHub and version control
   5. Use the Unix command line to become a power user and
      write bash commands.
   6. Learn key troubleshooting and debugging skills to apply to
      your projects.
Enter fullscreen mode Exit fullscreen mode

H T M L 5

   1. To structure your websites, learn the anatomy of HTML 
      syntax.
   2. Learn about the HTML doctypes and boilerplate.
   3. how to organize HTML text.
   4. How to arrange HTML lists to make lists that are ordered and 
      unordered.
   5. How to use HTML to insert images
   6. How to use anchor tags to make hyperlinks.
   7. Know how to make content using HTML tables.
   8. How to layout with tables.
   9. Learn best practices for HTML.
   10. Develop a straightforward contact me form using HTML forms.
   11. How to separate content for CSS styling using HTML divs.
Enter fullscreen mode Exit fullscreen mode

C S S 3

   1. Know what cascading style sheets are and how to style your 
      website with them.
   2. how to make use of CSS properties and selectors.
   3. Learn about internal, external, and inline CSS.
   4. Know the best CSS coding practices.
   5. Study CSS sizing techniques.
   6. Learn about the structure and syntax of CSS.
   7. CSS specificity and style hierarchy implementation.
   8. How to target both classes and IDs.
   9. Display with CSS and how to use layout.
   10. How to use the relative, absolute, and static CSS 
       positioning systems.
   11. CSS and web-safe fonts are used to style fonts.
   12. utilizing CSS to center elements.
   13. Typography and the fundamentals of website design.
   14. How to use clear and float in CSS.
   15. how to use CSS selectors together and what selector 
       priority means.
Enter fullscreen mode Exit fullscreen mode

B O O T S T R A P 4

   1. Learn the fundamentals of implementing responsive web
      design.
   2. How to use Balsamiq to mockup and wireframe websites.
   3. The fundamentals of UI design for websites.
   4. How to install the Bootstrap framework.
   5. Understanding the Bootstrap grid layout system.
   6. How to use bootstrap containers to layout your website
      easily.
   7. Learn to use other Bootstrap components such as buttons.
   8. Adding symbols using Font Awesome.
   9. Learn to use Bootstrap carousels.
   10. Add Bootstrap cards to your website.
   11. Using Bootstrap navigation bars.
Enter fullscreen mode Exit fullscreen mode

J A V A S C R I P T ___ E S 6

   1. The Fundamentals of Code
   2. Starting code with alerts and prompts.
   3. Understand Variables and Data Types in JavaScript
   4. Variable naming in JS
   5. Working with strings and numbers
   6. Randomisation and logical operators
   7. Loops, collections and Conditionals.
   8. Functions and invocation patterns
   9. Discussion of ECMAScripts
   10. Intermediate JavaScript
   11. Learn to use JS Expressions, Operators, Statements and
      Declarations
   12. Object-Oriented Programming
   13. JS Objects and Prototypes
   14. `This`, Scope and Closures
   15. Objects and Prototypes
   16. Refactoring and Debugging
Enter fullscreen mode Exit fullscreen mode

D O C U M E N T ____ O B J E C T ____ M O D E L ( D O M )

   1. Learn the tree structure of HTML based websites.
   2. Traverse through the document using object notation.
   3. Separation of concerns and coding best practices.
   4. Manipulate and change the HTML elements using your
      understanding of the DOM.
Enter fullscreen mode Exit fullscreen mode

J Q U E R Y

   1. Installing and using the jQuery framework.
   2. Learning about jQuery functionality
   3. Introduction to functions in jQuery
   4. Manipulating text, styles and attributes with jQuery
   5. Create animations and customizations with jQuery
   6. Use your jQuery knowledge to make your website interactive
   7. Responding to user initiated events with jQuery
Enter fullscreen mode Exit fullscreen mode

T H E ___ U N I X ____ C O M M A N D ____ L I N E

   1. How to use basic bash commands in a Unix/Linux Terminal.
   2. How to manipulate files and folders without needing a
      graphical user interface.
   3. How to download and install to your computer using
      command line.
Enter fullscreen mode Exit fullscreen mode

G I T ___ G I T H U B ___ A N D ___ V E R S I O N ___ C O N T R O L

   1. Using git for version control and collaboration
   2. Git forking, branching and cloning
   3. Using GitHub as a remote repository
   4. Checkout and rolling back changes with git
Enter fullscreen mode Exit fullscreen mode

N O D E . J S

   1. Explore the components of back-end development, working
      with an MVC framework
   2. Apply concepts like data types, objects, methods, object 
      oriented programming, and classes in the context of backend 
      development.
   3. Server-Side JavaScript
   4. Using Node on the command line
   5. NPM
   6. JavaScript Build Processes
   7. Event Loop and Emitters
   8. File System Interaction
   9. Modules
   10. Native Node drivers
Enter fullscreen mode Exit fullscreen mode

E X P R E S S . J S

   1. Understand how to install and use express in Node
      applications
   2. Creating Node and Express based servers
   3. RESTful Routing with Express
   4. Understand and use middleware for Node applications
Enter fullscreen mode Exit fullscreen mode

A P P L I C A T I O N ____ P R O G R A M ____ I N T E R F A C E S ( A P I S )

   1. Understand what APIs are and how they work.
   2. HTTP in Depth
   3. Calling APIs
   4. Reading API documentation
   5. Basic API Authentication
   6. Server to server communication
   7. JSON vs. XML, sending data over the wire.
Enter fullscreen mode Exit fullscreen mode

E J S

   1. Understand what EJS does and how to use it with Node and
      Express.
   2. Templating with EJS
   3. Running code in EJS templates
   4. Passing data from server to template and vice versa
   5. Creating layouts/partials with EJS
Enter fullscreen mode Exit fullscreen mode

D A T A B A S E ___ F U N D A M E N T A L S

   1. Data Relationships
   2. Designing a Data Model
   3. Relational Databases
   4. Alternative Databases
   5. Entity Relationship Modelling (ERM) and Object Relational
      Mapping (ORM)
Enter fullscreen mode Exit fullscreen mode

S Q L ___ D A T A B A S E S

   1. Working with Database Schemas
   2. Create-Read-Update-Destroy (CRUD)
   3. Database Joins
   4. Querying SQL databases
Enter fullscreen mode Exit fullscreen mode

N O S Q L ___ D A T A B A S E S ____ W I T H ___ M O N G O D B
___ A N D ____ M O N G O O S E

   1. Serialization
   2. How to model NoSQL data
   3. Document Databases (MongoDB)
   4. Create-Read-Update-Destroy (CRUD)
   5. NoSQL Best Practices
   6. Mongo Shell and command line use
   7. Installing MongoDB
   8. Mapping relationships with MongoDB
   9. Using an object-data modelling library (Mongoose) to work
      easily with your data.
Enter fullscreen mode Exit fullscreen mode

D E P L O Y M E N T

   1. Understand hosting and deployment.
   2. Hosting static websites with GitHub Pages.
   3. Deploying server based applications with Heroku.
   4. Deploying Databases with Mongo Atlas.
Enter fullscreen mode Exit fullscreen mode

B U I L D I N G ___ R E S T f u l ___ A P I s

   1. Understand the need for authentication and keeping user
      details secure.
   2. Learn about Encryption and use encryption to keep your
      database secure.
   3. Learn and implement Hashing and Salting with bcrypt
   4. Using Sessions and Cookies to persist user log in sessions.
   5. Setting up local authentication from scratch.
   6. Implementing Passport to authenticate users quickly and
      effectively.
   7. Understand and use environment variables to keep secret keys
      secure.
   8. Understand and use OAuth 2.0 to log in users using Google 
      and Facebook.
Enter fullscreen mode Exit fullscreen mode

R E A C T . J S

   1. Learn front-end development with React.
   2. Understand when and how to use React Components.
   3. Learn to pass Props and work with them.
   4. Learn to write JSX and understand JSX syntax.
   5. Learn about the React DOM.
   6. Learn State Management in React.
   7. Learn about React Hooks.
   8. Learn about conditional rendering in React.
   9. Understand the difference between class and functional
      components.
Enter fullscreen mode Exit fullscreen mode

J A V A S C R I P T ___ E S 6

   1. Arrow Functions
   2. Map/Filter/Reduce
   3. Find/FindOne/FindIndex
   4. Import/Export and Modules
   5. Object and Array Destructuring
   6. Spread Operator
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

mike_andreuzza profile image

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Michael Andreuzza -

hax profile image

TryHackMe API Wizard Breach Walkthrough

haXarubiX -

lithephp profile image

How Lithe Makes Web Application Development in PHP Faster with Less Code

Lithe -

garciadiazjaime profile image

React + AWS Cognito: Email Authentication Setup Guide (First Part)

Jaime -