11 min readCSS 🎨

Full Stack Web Developer Roadmap🎱

WordPress and WooCommerce are added as a bonus.
You don`t have to learn them to become a Full Stack Web Developer. 
But once you master them, you can apply for a Full Stack WordPress Developer position.
The Bootstrap and Laravel frameworks are also added.

HTML (HyperText Markup Language) is the markup language for building web pages.

  1. HTML basics:
    • Introduction to HTML
    • Document structure
    • Tags and attributes
    • The DOCTYPE declaration
    • Character encoding
  2. Text elements:
    • Headings (h1-h6)
    • Paragraphs (p)
    • Lists (ul, ol, li, dl, dt, dd)
    • Text alignment and styles (strong, em, b, i)
  3. Hyperlinks:
    • The a tag (how to create a link)
    • The href, target and rel attributes
    • Anchors
  4. Multimedia elements:
    • Images (img)
    • Audio and video (audio, video)
    • The src, alt, width and height attributes
  5. Tables:
    • The table, tr, td, th, tbody, thead and tfoot tags
    • The rowspan and colspan attributes
  6. Forms:
    • The form tag
    • Input elements: input, textarea, select, option, button
    • Input types: text, password, checkbox, radio, submit, file
    • The action, method, name and value attributes
  7. Semantic elements:
    • header, footer, article, section, aside, nav, main, figure, figcaption
  8. Frames:
    • iframe
    • The src, width, height and sandbox attributes
  9. Meta tags:
    • The head, title and meta tags
    • The charset, name and content attributes
  10. Styles and scripts:
    • The style and script tags
    • External style and script files
  11. Working with CSS:
    • Introduction to CSS
    • Selectors
    • Properties and values
  12. More elements and attributes:
    • The div and span tags
    • The class, id and data-* attributes
    • Special characters and their codes
  13. What’s new in HTML5:
    • New semantic tags
    • New multimedia formats
    • HTML5 form elements
  14. Validation and compatibility:
    • Validating HTML documents
    • Cross-browser compatibility
  15. Accessibility:
    • The alt, role and aria-* attributes
    • Building web pages that are accessible to people with disabilities

CSS (Cascading Style Sheets) is used to style web pages and to add layout, animations and other visual effects to content described with HTML.

  1. CSS basics:
    • Introduction to CSS
    • How to add CSS (inline, external, internal)
    • Selectors and properties
    • The cascade and inheritance
  2. Selectors:
    • Simple selectors (tag, class, id)
    • Combinators
    • Pseudo-classes and pseudo-elements
    • Attribute selectors
  3. The Box Model:
    • Margin, Border, Padding, Content
    • The box-sizing and display properties
  4. Layout and positioning:
    • position (static, relative, absolute, fixed, sticky)
    • Flexbox
    • Grid
    • float and clear
    • z-index
  5. Typography:
    • Font properties (font-family, font-size, font-weight, and so on)
    • Text spacing and alignment
  6. Colours and backgrounds:
    • Colour types (hex, rgb, rgba, hsl, and so on)
    • The background properties
    • Gradients
  7. Transitions and animations:
    • transition
    • transform
    • Keyframes (@keyframes)
    • animation
  8. Responsive design:
    • Media queries
    • Responsive vs Adaptive Design
    • Mobile First Design
  9. Advanced properties and functions:
    • The filter and clip-path properties
    • Properties for working with images (object-fit)
    • CSS custom properties (variables)
  10. Practices and architecture:
    • BEM, SMACSS, OOCSS, Atomic CSS
    • Code organisation and comments
  11. Preprocessors:
    • Sass, Less, Stylus
    • Variables, mixins, loops and conditions
  12. Compatibility and optimisation:
    • Cross-browser compatibility
    • Using Autoprefixer
    • Minifying and optimising CSS
  13. Frameworks and libraries:
    • Bootstrap, Foundation, Tailwind CSS
    • Reset.css and Normalize.css
  14. Tools and resources:
    • Browser developer tools
    • CSS linters and formatters
    • Online generators (gradients, shadows, and so on)

JavaScript is the key programming language of web development and is used to add interactivity to web pages.

  1. OOP in JavaScript:
    • Prototypal inheritance
    • ES6 classes
    • Constructors and inheritance
  2. JavaScript basics:
    • Introduction to JavaScript
    • Adding JavaScript to a page
    • Syntax and structure
    • Variables and data types
  3. Operators and control flow:
    • Arithmetic operators
    • Logical operators
    • Conditionals (if, switch)
    • Loops (for, while, do-while)
  4. Functions and scope:
    • Declaring and calling functions
    • Callback functions
    • Closures
    • Arrow functions
  5. Objects, arrays and JSON:
    • Creating and working with objects
    • Methods and properties
    • Working with arrays (methods, iteration)
    • The JSON format (parsing and serialisation)
  6. The DOM (Document Object Model):
    • Working with page elements
    • Event handling
    • Creating and changing content
  7. Asynchronous code:
    • Callbacks
    • Promises
    • Async/Await
    • The Fetch API and XMLHttpRequest
  8. APIs and working with the web:
    • Web APIs (DOM, Geolocation, Web Storage)
    • Third-party APIs (for example, Google Maps)
    • CORS
  9. What’s new in ES6+:
    • Let and Const
    • Template literals
    • Destructuring
    • The spread and rest operators
  10. Testing and debugging:
    • Browser debuggers
    • Unit testing (Jasmine, Mocha, Jest)
  11. Frameworks and libraries:
    • React
    • Vue.js
    • Angular
    • jQuery
  12. Modules and package managers:
    • ES6 modules
    • CommonJS
    • Webpack, Babel
    • npm and yarn
  13. Security in JavaScript:
    • XSS (Cross-Site Scripting)
    • CSRF (Cross-Site Request Forgery)
    • Storing data securely
  14. Server-side JavaScript (Node.js):
    • Node.js basics
    • npm, modules
    • Development frameworks (Express.js)
  15. Advanced topics:
    • WebSockets
    • Service Workers
    • Progressive Web Apps (PWA)

Bootstrap is an open-source toolkit for developing with HTML, CSS and JS.

  1. Introduction to Bootstrap:
    • What is Bootstrap?
    • Bootstrap history and versions
    • Installation and setup
  2. Basic structure:
    • The grid system
    • Containers
    • Rows and columns
  3. Bootstrap components:
    • Navigation (navbars, breadcrumbs)
    • Cards
    • Modals
    • Tooltips and popovers
    • Carousels
    • Alerts and message widgets
    • Tabs and pills
  4. Forms:
    • Basic form elements
    • Form groups
    • Validation
    • Custom forms
  5. Typography and helper classes:
    • Headings, paragraphs, lists
    • Built-in classes (e.g. text-muted, text-center)
    • Classes for showing and hiding
  6. Navigation components:
    • Pagination
    • Badges
    • Indicators
  7. Bootstrap icons:
    • Built-in icons (depending on the version)
    • Integration with other icon libraries
  8. Extensions and utilities:
    • Positioning classes
    • Variables and mixins
    • Utilities for borders, spacing and more
  9. Responsive design:
    • Media queries
    • Responsive components and classes
    • Testing on different devices
  10. Theming and customisation:
    • Customising SCSS variables
    • Creating your own themes
    • Using themes from Bootstrap Themes
  11. Extensions and plugins:
    • Using JavaScript plugins
    • Integration with other libraries and frameworks
  12. Community and resources:
    • Official documentation
    • Tutorials and examples
    • Support forums and conferences
  13. Tasks and the developer workflow:
    • Build tools and task automation
    • Integration with version control systems (for example, Git)

PHP (Hypertext Preprocessor) is a popular server-side programming language used to build web applications.

  1. PHP basics:
    • Introduction to PHP
    • Installation and setup
    • Syntax
    • Variables and data types
  2. Control structures:
    • Conditional statements (if, else, switch)
    • Loops (for, while, foreach)
    • Flow control (break, continue, return)
  3. Working with strings:
    • Basic string functions
    • Regular expressions (preg_* functions)
  4. Arrays:
    • Array basics
    • Associative arrays
    • Array functions
  5. Functions:
    • Defining and calling functions
    • Passing parameters
    • Anonymous functions and closures
  6. OOP in PHP:
    • Classes and objects
    • Inheritance
    • Interfaces and traits
    • Namespaces
    • Class autoloading
  7. Working with files:
    • Reading and writing files
    • Working with directories
    • Exceptions and error handling
  8. Working with forms:
    • Getting data from forms
    • Validating and filtering input
  9. Security:
    • SQL Injection
    • XSS (Cross-Site Scripting)
    • CSRF (Cross-Site Request Forgery)
    • Passwords and encryption
  10. Working with databases:
    • MySQL / MariaDB with PHP
    • PDO (PHP Data Objects)
    • ORM (for example, Doctrine)
  11. Sessions and cookies:
    • Session management
    • Using cookies
  12. PHP Frameworks:
    • Laravel
    • Symfony
    • CodeIgniter
    • Zend
    • Phalcon
  13. Advanced topics:
    • Composer (dependency manager)
    • PSR standards
    • RESTful APIs in PHP
    • WebSocket in PHP
  14. Optimisation and tuning:
    • Code profiling
    • Caching (OPcache, Memcached)
  15. Testing and debugging:
    • Unit testing (PHPUnit)
    • Debugging (Xdebug)

Laravel is a popular PHP framework for building web applications.

  1. Introduction to Laravel:
    • What is Laravel?
    • Laravel history and versions
    • Installation and setup
  2. Laravel basics:
    • The request lifecycle
    • Service providers and the service container
    • Facades
    • Configuration and environment
  3. Working with data:
    • Eloquent ORM
    • Migrations and seeds
    • Working with the database
    • Database queries and the query builder
  4. Routing:
    • Routing basics
    • Middleware
    • Named routes and route groups
  5. Security:
    • Authentication and authorisation
    • Protection against SQL injection and XSS attacks
    • CSRF protection
  6. Displaying data:
    • The Blade templating engine
    • Components and slots
    • Lazy loading data
  7. APIs and REST:
    • Building APIs with Laravel
    • Resources and JSON responses
    • Tokens and API authentication
  8. Testing:
    • Testing basics in Laravel
    • Feature and unit tests
    • Mocks and facades
  9. Storage and files:
    • Cloud storage (Laravel Flysystem)
    • File uploads
    • Sessions and caching
  10. Events and queues:
    • The event system in Laravel
    • Tools for working with queues
    • Tasks that run at set times (Task Scheduling)
  11. Extensions and packages:
    • Popular Laravel packages
    • Creating and publishing your own packages
    • Service providers and package discovery
  12. High availability and optimisation:
    • Server configuration and optimisation
    • Horizontal scaling
    • Profiling and monitoring
  13. Developer tools:
    • The Artisan console
    • Tinker
    • Extra development tools (Telescope, Debugbar)

Databases come in many kinds and serve different purposes.

  1. Relational databases (RDBMS):
    • Relational database basics (tables, relationships, normalisation)
    • SQL (queries, joins, subqueries)
    • Transactions and locking
    • Procedures, triggers, functions
    • Optimisation and indexing
    • Examples: MySQL, PostgreSQL, Oracle, MS SQL Server
  2. NoSQL databases:
    • NoSQL basics
    • Document databases (MongoDB, CouchDB)
    • Key-value stores (Redis, Riak)
    • Column-family databases (Cassandra, HBase)
    • Graph databases (Neo4j, OrientDB)
  3. Object-oriented databases:
    • Object storage basics
    • Data modelling
    • Querying and manipulating objects
    • Examples: db4o, ObjectDB
  4. In-memory databases:
    • How in-memory storage works
    • Using them for caching
    • Data transfer
    • Examples: Redis, Memcached
  5. Time series databases (Time Series DB):
    • Time series storage basics
    • Modelling time-based data
    • Query optimisation
    • Examples: InfluxDB, TimescaleDB
  6. Spatial databases:
    • Storing geometric data
    • Spatial indexes
    • Location-based queries
    • Examples: PostGIS (a PostgreSQL extension), MySQL Spatial Extensions
  7. Distributed databases:
    • Principles of distributed storage
    • Partitioning and replication
    • Storing data in scalable systems
    • Examples: Cassandra, CockroachDB
  8. Full-text search databases:
    • Text indexing
    • Ranked queries
    • Filtering and grouping results
    • Examples: Elasticsearch, Solr
  9. Cloud database solutions:
    • Features of cloud storage
    • Database as a Service (DBaaS)
    • Scaling and backups in the cloud
    • Examples: Amazon RDS, Google Cloud SQL, Azure SQL Database
  10. Optimisation and profiling:
    • Monitoring tools
    • Query profiling
    • Tuning database parameters

MySQL:

  1. MySQL basics:
    • MySQL history and versions
    • Installation and setup
    • Creating a database and tables
  2. SQL and MySQL:
    • Basic SQL queries (SELECT, INSERT, UPDATE, DELETE)
    • JOIN operations
    • Subqueries
  3. MySQL optimisation:
    • Indexing
    • Query plans
    • Query optimisation
  4. Security:
    • Managing users and privileges
    • Data encryption
    • Backup and restore
  5. Advanced features:
    • Stored procedures and triggers
    • Transactions
    • Table partitioning

PostgreSQL:

  1. PostgreSQL basics:
    • PostgreSQL history and versions
    • Installation and setup
    • Creating a database and tables
  2. SQL and PostgreSQL:
    • Basic SQL queries
    • WINDOW functions
    • Common Table Expressions (CTE)
  3. PostgreSQL optimisation:
    • Indexing and index types
    • Using EXPLAIN
    • Materialized views
  4. Advanced features:
    • JSON and JSONB
    • Stored procedures and triggers
    • PostGIS (spatial data)
  5. Security and administration:
    • Managing users and roles
    • Logging and monitoring
    • Backups and PITR

MongoDB:

  1. MongoDB basics:
    • MongoDB history and versions
    • Installation and setup
    • Basic structure (documents, collections)
  2. Working with data:
    • CRUD operations
    • Aggregation Framework
    • MapReduce
  3. Indexing and optimisation:
    • Index types in MongoDB
    • Query optimisation
    • Storage specifics
  4. Advanced features:
    • GridFS (file storage)
    • Transactions
    • Change Streams and reactivity
  5. Sharding and replication:
    • Sharding
    • Replica sets
    • Query routing

WordPress is one of the most popular content management systems (CMS) in the world.

  1. Introduction to WordPress:
    • What is WordPress?
    • The difference between WordPress.com and WordPress.org
    • Installing WordPress
  2. WordPress themes:
    • Choosing a theme
    • Installing and setting up a theme
    • Developing your own themes
    • Child themes
  3. WordPress plugins:
    • What are plugins?
    • Choosing, installing and activating plugins
    • Developing your own plugins
  4. Content and publishing:
    • Posts vs. Pages
    • Categories and tags
    • Content editing tools (the Gutenberg editor)
  5. Media in WordPress:
    • Adding and editing images
    • Video and audio
    • The Media Library
  6. Comments and user interaction:
    • Managing comments
    • User roles
    • User registration and login
  7. WordPress settings:
    • General settings
    • Reading and writing
    • Links and permalinks
  8. WordPress security:
    • Protection against hacking
    • Backups
    • SSL and encryption
  9. Optimisation and speed:
    • Caching
    • Image optimisation
    • Choosing reliable hosting
  10. SEO (search engine optimisation):
    • SEO basics for WordPress
    • SEO plugins (for example, Yoast SEO)
    • Link structure and sitemaps
  11. E-commerce on WordPress:
    • WooCommerce: introduction and setup
    • Adding products
    • Payment gateways
  12. Advanced topics:
    • Multisite setup
    • Creating custom post types
    • Using the WordPress API
  13. Integration and extension:
    • Social media integration
    • Using external services and APIs
  14. Tasks and the developer workflow:
    • Local WordPress development
    • Using version control systems (for example, Git)
    • Task automation (Gulp, Webpack)
  15. Community and resources:
    • Official resources and documentation
    • Support forums
    • WordPress Meetups and WordCamps

WooCommerce is one of the most popular e-commerce platforms, integrated with WordPress.

  1. Introduction to WooCommerce:
    • What is WooCommerce?
    • Installation and setup
    • First steps with WooCommerce
  2. Products in WooCommerce:
    • Creating products
    • Product variations and attributes
    • Inventory management
    • Importing and exporting products
  3. Themes and design for WooCommerce:
    • Choosing a WooCommerce-compatible theme
    • Adapting a theme for a store
    • Developing your own WooCommerce theme
  4. Plugins and extensions:
    • Popular WooCommerce plugins
    • Extending store functionality
    • Plugin security
  5. Checkout:
    • Setting up the cart and checkout
    • Setting up payment methods (for example, PayPal, Stripe)
    • Setting up taxes and shipping
  6. Customers and accounts:
    • Managing customer accounts
    • Setting up registration and login
    • Loyalty and rewards programmes
  7. Marketing and promotion:
    • Coupons and discounts
    • Sales and promotions
    • Email and marketing automation
  8. Reports and analytics:
    • Sales and revenue analysis
    • Tracking user behaviour
    • Integration with analytics tools
  9. Security and optimisation:
    • Store and payment security
    • Backup and restore
    • Caching and speed optimisation
  10. After-sales service:
    • Order management
    • Returns and cancellations
    • Customer support
  11. Multilingual stores and localisation:
    • Setting the store language
    • Using multilingual plugins
    • Localising payments and shipping
  12. Integration with other platforms and services:
    • Social media
    • CRM systems
    • ERP integration
  13. Advanced topics:
    • Subscriptions and recurring payments
    • Using the WooCommerce API
    • Mobile apps for WooCommerce

Strong is the power of the web developer, young padawan.

Learn, create, build the web!

Sasha Zimin
Author

Sasha Zimin

More about me on zimin.dev

Read also

Leave a Reply

Your email address will not be published. Required fields are marked *