Cheat sheet · Build products
WordPress and Shopify cheat sheet (Webflow)
Opens with creditsA quick-revision companion to the roadmap in its Webflow edition: web basics, the Designer, classes and layout, CMS collections, interactions, custom code, performance, SEO, care after launch and handover. Skim a chapter before a build or a client call.
Chapters
8 chapters · 58 concepts
1Web basics for site buildersWhat sits under every site you will build: domains, DNS, hosting, HTTPS, and enough HTML and CSS to read and fix what a page builder produces.8 concepts
- 1Domain and registrarA domain is the name people type, such as
example.com. - 2DNS recordsEntries that tell the internet where a name points:
Ato an IP address,CNAMEto another name,MXto mail servers,TXTfor verification and email… - 3Hosting modelsSelf-hosted software such as WordPress runs on a server you rent (shared, VPS or managed).
- 4HTTPS and SSL certificatesHTTPS encrypts traffic between browser and server using a TLS certificate for the domain.
- 5HTML structureElements that give a page meaning: one
h1, headings in order,nav,main,footer, realalinks andbuttonelements,alttext on images. - 6CSS for tweaksSelectors pick elements, properties style them, and the cascade and specificity decide which rule wins.
- 7Browser DevToolsThe browser panel that shows the HTML, the CSS rules applied to any element, network requests and console errors, with live editing.
- 8What a CMS doesA CMS stores content (pages, posts, products) in a database separately from the design (a theme or template), and lets non-developers edit content through an…
8 in this chapterOpen this chapter- 1Domain and registrarA domain is the name people type, such as
2Your platformThe admin, the content model and the theme system of your platform: what a client will see every day and what you will customise.7 concepts
- 1Webflow DesignerThe visual canvas where you build with real HTML elements and CSS properties: the Navigator shows the element tree, the Style panel sets CSS.
- 2Box model in WebflowEvery element is a box with content, padding, border and margin.
- 3Classes and combo classesClasses hold styles you reuse across elements.
- 4Flexbox, grid and breakpointsFlexbox and grid arrange children.
- 5ComponentsReusable pieces such as a navbar or a card, edited once and updated everywhere.
- 6CMS collectionsA collection is a content type (Blog posts, Team, Projects) with fields.
- 7Site plans and Workspace plansA Site plan (per site) sets hosting, CMS item limits and features.
7 in this chapterOpen this chapter- Custom codeWhere settings and themes stop: PHP and hooks in WordPress, Liquid and Shopify CLI in Shopify, custom code and CMS logic in Webflow, all with a local or staging workflow.7 conceptsOpens with credits
- Building a client siteFrom first call to launch day: brief, sitemap, content, design, build, testing and the launch checklist.7 conceptsOpens with credits
- Online storesThe settings behind a working store: products, payments, shipping, taxes, checkout, policies and orders. Payment options differ by country, so check them first.7 conceptsOpens with credits
- Performance, SEO and accessibilityFast pages, pages search engines understand, and pages everyone can use. Measure first, then fix the biggest problem.10 conceptsOpens with credits
- Security, backups and careWhat keeps a site healthy after launch: accounts, updates, backups, monitoring and a documented handover.5 conceptsOpens with credits
- Selling the workTurning the skill into steady client work as a freelancer or small agency: offer, proof, finding clients, pricing, contracts and getting paid safely.7 conceptsOpens with credits
- 9Glossary, A to ZEvery concept in the sheet and the smaller terms it uses, in one list.153 terms
About this sheet
Business sites and online stores.
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 allWork with me
Stuck 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