The Website Mentorship is a 3-month intensive program for aspiring web developers. It covers HTML, CSS, and JavaScript, fostering skills in front-end development, web design, and hosting. It includes code reviews and collaborative projects, led by the Society of Engineering Society.
Module 1: Foundation
Personal Recommendation / Opinion
- Alternative Option - Pick this or purple
- Order in roadmap not strict (Learn anytime) I wouldn't recommend
Front-end
- For resources and other roadmaps: Roadmap.sh
- Are you just getting started? Visit the Beginner Version
- Learn the basics:
- HTML
- Writing Semantic HTML
- Forms and Validations
- Accessibility
- SEO Basics
- Internet: How does the internet work?
- What is HTTP?
- What is a Domain Name?
- What is hosting?
- DNS and how it works?
- Browsers and how they work?
- Git
- CSS: Learn the basics
- Version Control Systems
- Making Layouts
- Learn DOM Manipulation
- VCS Hosting
- Responsive Design
- Fetch API / Ajax (XHR)
- JavaScript
- GitHub
- GitLab
- Bitbucket
- React
- npm
- CSS: We have trimmed down the CSS part for the sake of brevity. However, We recommend reading about CSS in JS, CSS Modules, Styled Components, Vanilla Extract, Panda CSS, and look into different frameworks with pre-built components such as MUI, daisyUI, Chakra UI, and Mantine.
Module 2: Advanced Front-end
Front-end (continued)
- Vue.js
- Angular
- pnpm
- yarn
- CSS Architecture
- Writing CSS
- Pick a Framework
- Package Managers
- CSS Preprocessors
- BEM
- Tailwind
- Svelte
- Solid JS
- Radix UI
- Qwik
- Shadcn UI
- Sass
- PostCSS
- Authentication Strategies: JWT, OAuth, SSO, Basic Auth, Session Auth, etc.
- Web Security Basics: CORS
- Module Bundlers: Vite, esbuild, Webpack, Rollup, Parcel
- Task Runners: npm scripts
- Build Tools
- Linters and Formatters: Prettier, ESLint
- Testing your Apps: Vitest, Jest, Playwright
- HTTPS: Content Security Policy
- Learn the difference between Unit, Integration, and Functional tests and learn how to write them with the tools listed on the right.
- Cypress
- OWASP Security Risks
Module 3: Beyond Front-end (Month 3)
Front-end (continued)
- Next.js
- React
- Remix
- HTML Templates
- Angular
- Universal
- Web Components
- Custom Elements
- Vue.js
- Nuxt.js
- Shadow DOM
- Svelte
- Svelte Kit
- Type Checkers: TypeScript
- Storage
- Web Sockets
- Server Sent Events
- Service Workers
- Location Notifications
- PRPL Pattern
- RAIL Model Performance Metrics
- Using Lighthouse
- Using DevTools
- Server Side Rendering (SSR)
- Apollo
- GraphQL
- Relay Modern
- Progressive Web Apps
- Static Site Generators
- Device Orientation
- Calculating, Measuring, and improving performance
- Payments Credentials: Learn different Web APIs used in PWAS
- Performance Best Practices
- Electron
- Tauri
- Flutter
Bonus Content
- Desktop Applications: Continue Learning with the following relevant tracks: TypeScript Roadmap, Node.js Roadmap, Vuepress, Astro, Jekyll, Eleventy, Hugo, Next.js, Nuxt.js, Remix
- Mobile Applications: React Native, Flutter, Ionic, NativeScript
This division allows for a structured learning path over three months, building from foundational knowledge to advanced front-end skills and exploring topics beyond front-end development. Students can access resources and follow their interests, thanks to the flexible order within each module.
Before you embark on this comprehensive web mentorship program, it's essential to ensure you have the foundational knowledge and tools in place to make the most of your learning journey. Here are the prerequisites you should consider:
-
Basic Computer Skills: Ensure you are comfortable with using a computer, including tasks such as file management, software installation, and general navigation.
-
Internet Access: A stable and reliable internet connection is crucial as most of your learning resources, tools, and collaborative work will be online.
-
Text Editor/IDE: Familiarize yourself with a text editor or integrated development environment (IDE) of your choice. Recommended options include Visual Studio Code, Sublime Text, or JetBrains WebStorm.
-
Command Line Proficiency: Basic knowledge of command-line navigation and operations is beneficial, as you may need to use the command line for various tasks.
-
Web Browser: Ensure you have a modern web browser (e.g., Chrome, Firefox, or Edge) installed for testing and debugging web applications.
-
Operating System: Most web development tools and resources are available for Windows, macOS, and Linux. Choose an operating system that suits your preferences and meets the requirements of your chosen development stack.
-
Strong Desire to Learn: A growth mindset and a passion for web development are essential prerequisites. Be prepared to embrace challenges, problem-solving, and continuous learning.
-
Time Commitment: Dedicate a sufficient amount of time each week to your studies. Depending on your goals, this program may require several hours of focused learning and practice.
-
Optional: Programming Basics: While not mandatory, having a basic understanding of programming concepts (variables, functions, control flow) can be beneficial. If you are entirely new to programming, consider taking an introductory programming course before starting this program.
-
Optional: HTML/CSS Familiarity: If you're starting from scratch, it can be helpful to have some basic knowledge of HTML and CSS. You can get a head start by exploring online tutorials or beginner courses.
Remember that everyone's starting point is different, and it's okay if you don't meet all these prerequisites from the outset. The journey of learning web development is about continuous improvement and growth. As you progress through the program, you'll build the skills and knowledge needed to become a proficient web developer.