How To Create a Section Intro Component - Bricks Components - PART 1

In this comprehensive tutorial, you'll learn how to create a fully functional section intro component from scratch, starting with a Figma design and ending with a property-controlled Bricks component. Get Code2Bricks: https://code2bricks.com/ Join the facebook community: https://www.facebook.com/groups/code2bricks Get all the resources used in this video; https://mahmudzar.notion.site/Section-intro-components-resources-302da768e05680b0a8c7e62717d73436 =====Timestamp====== [00:00:00] Introduction and tutorial roadmap [00:00:54] Environment setup: plugins and theme [00:01:05] Verify Code Bricks and theme versions [00:01:43] Enable code execution; builder options [00:03:01] Save settings and proceed [00:03:28] Open Bricks; review Figma plan [00:04:10] Section intro variations overview [00:05:31] Need theme styles and variables [00:08:24] Import CSS variables into Bricks [00:09:15] Import and set theme styles [00:10:08] Code Bricks walkthrough [00:10:19] HTML editor reflects selection [00:11:16] Bidirectional tag editing demo [00:12:55] Add elements directly in HTML [00:14:54] Hide JS; focus on CSS editor [00:15:06] Selector modal to add classes [00:16:54] Global vs element-level classes [00:18:11] Root selector (R + Tab) shortcut [00:24:12] Selector chip context menu actions [00:25:01] Copy CSS: root vs actual class [00:27:37] BEM class generator introduction [00:29:45] Include/exclude elements in BEM [00:35:05] Responsive handle in the builder [00:36:30] Media query shortcut from width [00:37:31] JavaScript editor and code element [00:40:13] Start building Section Intro [00:41:07] Clean classes; fresh start [00:41:47] Add section and wrapper div [00:45:09] Add eyebrow, heading, lead [00:46:18] Add button wrapper and links [00:47:25] Group heading and lead content [00:48:02] Generate BEM classes for parts [00:50:00] Populate component content [00:50:23] Eyebrow label text [00:50:35] Paste heading from Figma [00:51:26] Add meaningful lead paragraph [00:51:43] Primary button: Order now [00:52:05] Secondary button: Request a visit [00:52:14] Define component CSS variables [00:54:11] Eyebrow background variable [00:55:11] Eyebrow text color variable [00:56:05] Heading color variable [00:57:24] Lead text color variable [00:59:19] Primary button background [01:00:11] Primary button text color [01:00:23] Secondary button background [01:01:11] Secondary button text color [01:02:25] Secondary button border color [01:03:18] Variables ready for styling [01:03:35] Style the Section Intro [01:03:35] Add container spacing gap [01:04:24] Eyebrow font size and weight [01:05:25] Eyebrow fit-content inline size [01:06:10] Eyebrow background via variable [01:06:45] Eyebrow padding with lh/ch [01:08:08] Eyebrow border-radius applied [01:08:27] Convert eyebrow to H2 tag [01:09:02] Eyebrow text color via variable [01:10:08] Heading inline and max sizes [01:11:46] Text-wrap: pretty for headings [01:12:36] Heading color via variable [01:12:55] Heading weight and consistency [01:14:00] Heading line-height variable [01:14:45] Remove default heading margins #BricksBuilder #WordPress #Code2Bricks #WebDevelopment #WebDesign #BricksComponents