Roadmap · Build products
WordPress and Shopify (Webflow)
Opens with creditsFor students and early-career developers who want to build business websites and online stores for real clients on WordPress, Shopify or Webflow. By the end you can set up domains and hosting, build and customise a site on your platform, run a store, make it fast, findable and accessible, keep it safe after launch and sell the work as a freelancer or small agency.
Curated by Tauseef Fayyaz8 stages, 59 topics~10 months at a few hours a weekBy the end, you will be able to
- Connect a domain, set up HTTPS and hosting, and read the HTML and CSS any page builder produces
- Build a complete client site on your platform, customised with code where settings run out
- Set up a working store with payments that work in the client's country, shipping, taxes and policies
- Measure and fix Core Web Vitals, basic SEO and accessibility before launch
- Hand a site over with backups, updates, training and a maintenance plan, and price the work fairly
The path
8 stages, in the order to learn them. Open one to start.
1Web basics for site buildersWhat sits under every site you will build: domains, DNS, hosting, HTTPS, enough HTML and CSS to read and fix a page, and what a CMS actually does.7 topics · ~3 weeks
- 1Domains and DNS recordsA domain is the name people type, such as
example.com. - 2Hosting: self-hosted or hosted platformHosting is the computer that stores a site and sends it to visitors.
- 3HTTPS and certificatesHTTPS scrambles (encrypts) everything sent between the visitor and the server, so nobody in between can read it.
- 4HTML you need to readEvery platform, however visual, turns your work into HTML, the code that describes what is on a page.
- 5CSS for tweaks and fixesMost client requests are small visual changes: a button colour, spacing on mobile, a font size.
- 6Debugging with browser DevToolsBrowser DevTools is a panel built into every browser.
- 7How a CMS worksA content management system (CMS) keeps content apart from the design that displays it.
7 in this stageOpen this stage- 1Domains and DNS recordsA domain is the name people type, such as
2Webflow: Designer, classes and CMSLearn the Designer and Navigator, the box model and layout, a clean class system, components, CMS collections and how site plans and Workspaces work.7 topics · ~6 weeks
- 1The Designer and NavigatorThe Webflow Designer is a visual canvas.
- 2The box model and layoutEvery element is a box.
- 3Classes, combo classes and namingIn Webflow, styles live on classes, which are named sets of styles.
- 4Responsive design with breakpointsA breakpoint is a screen width where the layout can change.
- 5ComponentsComponents (once called symbols) are reusable pieces such as a navbar, a footer or a card.
- 6CMS collectionsA CMS collection is a content type, such as Blog posts, Team, Projects or Jobs.
- 7Site plans, Workspaces and ownershipWebflow has two kinds of plan.
7 in this stageOpen this stage- Webflow beyond the DesignerCustom code and embeds, custom attributes, dynamic CMS content, interactions, forms and integrations, and what code export does and does not give you.7 topics · ~2 monthsOpens with credits
- Building a real client siteA complete site for a real small business, from the first call to launch day: brief, sitemap, content, design, build on staging, testing and a careful launch.7 topics · ~2 monthsOpens with credits
- Online storesThe settings behind a working store: products, payments that work in the client's country, shipping, taxes, checkout, policies and the daily order flow.7 topics · ~5 weeksOpens with credits
- Performance, SEO and accessibilityFast pages, pages search engines understand, and pages everyone can use. Measure first, fix the biggest problem, measure again.9 topics · ~5 weeksOpens with credits
- Security, backups and handoverWhat keeps a site healthy after launch: secure accounts, updates, backups you have tested, monitoring, a clean handover, client training and a maintenance plan.7 topics · ~3 weeksOpens with credits
- Selling the workTurn the skill into steady client work as a freelancer or small agency: a clear offer, honest proof, finding clients, pricing, contracts, getting paid across borders and avoiding scams.8 topics · ~3 weeksOpens with credits
6 more stages, 45 more topics, free with an account.
You have seen the open stages of the WordPress and Shopify roadmap. Every topic it covers is listed above, and an account opens the rest: what each topic means, a question to check yourself, the courses, the practice and Tauseef's advice for every stage. Early access is open: sign up and your account is active shortly after.
Everything here is free to learn from. A few things, like adding a roadmap, keeping a cheat sheet or asking Tauseef a question, use credits. You get 15 when you join, your first roadmap is free, and if you are learning seriously and run out, you can ask for more. Credits only make sure the platform goes to people who are actually learning.
Related on Sefism
Picked from the other libraries by shared topics.
Project structures
See all- WordPress plugin project structureA modern WordPress plugin that adds product reviews: blocks scaffolded with
@wordpress/create-blockand built by@wordpress/scripts, PHP classes autoloaded by Composer, a REST API, a React settings page, and tests running insidewp-env. For students who can write a little PHP and JavaScript and want to build a plugin the way WordPress core contributors and serious plugin teams lay it out. - Astro project structureFor developers building content-heavy websites (blogs, docs, society or portfolio sites) that should load fast with little JavaScript. The example is a university tech society site from the blog template: content collections for posts, events and the team, a couple of React islands, an Action-backed join form, and a few on-demand pages through the Node adapter while everything else stays static.
Career questions
See allStuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com