{"title":"Basic Courses","description":null,"products":[{"product_id":"free-kit","title":"Free Kit","description":"\u003cp\u003e\u003cspan\u003e\u003cb\u003e1. Problem Statement\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eStruggling to understand why a web page looks different from what you planned? You’re not alone: selectors, properties, and values can initially appear to be separate rules without a clear connection. Changing one setting may affect several elements at once, while the reason behind that behavior remains unclear. Without a foundation in cascade, inheritance, and box structure, even a small layout may contain repeated or conflicting styles. Free Kit breaks these concepts into manageable examples and shows how they work together.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e2. Solution\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eThis course will teach you how to read basic CSS rules and identify which page elements they affect. You will explore the relationship between selectors, properties, and values. Dedicated sections cover colors, text, spacing, borders, and element dimensions. Practical exercises let you apply each topic to small page sections. By the end of the course, you will assemble a simple styled layout using the rules covered in the modules.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e3. What’s Inside\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 1: How CSS Works\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eLearn how styles connect to page elements, how a CSS rule is structured, and how written properties are interpreted.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 2: Selectors and Grouping\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eExplore element, class, and identifier selectors. The module also explains rule grouping and methods for reducing repeated declarations.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 3: Color and Text\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eWork with text color, backgrounds, font size, line height, alignment, and foundational styling for headings and paragraphs.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 4: The Box Model\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eStudy content, padding, borders, and margins. Examples demonstrate how each part contributes to the final dimensions of an element.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 5: Final Layout Task\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eThe closing assignment connects the previous topics. You will style a heading, a text section, an information card, and a button within one consistent layout.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e4. Who Is This For?\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e✅ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003e— are beginning your CSS learning path;\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e— want to understand the structure of styling rules;\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e— would like to style simple page elements;\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e— prefer sequential explanations supported by practice.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e❌ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may not suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003e— already create complex responsive layouts regularly;\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e— are looking for in-depth animation or large-scale styling systems;\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e— need materials outside the CSS subject area.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e5. What You’ll Learn\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003eIdentify the structure of a CSS rule.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eApply foundational selector types.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eAdjust colors, backgrounds, and text settings.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eConfigure spacing, borders, width, and height.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eDescribe the parts of the box model.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eReduce repetition by grouping styles.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eStyle a small layout containing several related elements.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eCheck which rule is affecting a selected element.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e6. 30-Day Refund Policy\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eA refund request may be submitted within 30 days, subject to the Boxlune store policy. The review process, conditions, and possible exceptions are described on the refund policy page.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e7. Certificate\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eAfter completing the required modules and final assignment, the learner may receive a Boxlune certificate. The document confirms completion of the Free Kit learning program.\u003c\/span\u003e\u003c\/p\u003e","brand":"Boxlune","offers":[{"title":"Default Title","offer_id":65394179670365,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1092\/1525\/2829\/files\/Free.jpg?v=1785162725"},{"product_id":"frame-course","title":"Frame Course","description":"\u003cp\u003e\u003cspan\u003e\u003cb\u003e1. Problem Statement\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eStruggling to create a layout where every element remains logically positioned? You’re not alone: individual blocks may look correct on their own, yet the complete page can lose consistency when those blocks are combined. Headings, cards, buttons, and text sections may use unrelated spacing or occupy more room than planned. Adjusting the width of one element can also affect nearby content and disrupt the overall composition. Frame Course explains how to organize a page through coordinated containers, dimensions, spacing rules, and alignment settings.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e2. Solution\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eThis course will teach you how to form a web page framework with structured CSS rules. You will examine how containers control content width and organize related sections. Dedicated topics explain margins, padding, dimension calculations, and element alignment. Practical assignments demonstrate how to combine text, cards, navigation elements, and buttons within one layout. The final task involves creating a structured page containing several connected sections.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e3. What’s Inside\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 1: The Web Page Framework\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eExplore common page areas, including the opening section, main content, topic-based sections, and closing area. The module explains how to divide content into logical groups.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 2: Containers and Width\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eLearn how to set width, maximum width, and automatic margins. Examples demonstrate how to keep content within a coordinated page area.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 3: Spacing and Visual Rhythm\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eStudy the systematic use of margins and padding. You will see how recurring values create a consistent rhythm between headings, paragraphs, cards, and sections.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 4: Arranging Elements in a Row\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eWork with direction, alignment, spacing, and element wrapping. Assignments cover navigation groups, button rows, and sets of information cards.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 5: Building Card Sections\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eCreate cards containing headings, text, and supporting elements. This module also covers matching dimensions, coordinated gaps, and internal card structure.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 6: Final Page Layout\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eCombine an opening area, an information section, a card row, and a closing block. The assignment helps you review dimensions, spacing, and alignment across the complete layout.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e4. Who Is This For?\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e✅ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003eunderstand the basic structure of CSS rules;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewant to build orderly page layouts;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewould like to work more carefully with containers and spacing;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewant to style pages containing several sections;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eprefer examples followed by practical assignments.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e❌ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may not suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003ehave not yet studied selectors, properties, and values;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eare looking only for complex animation topics;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eneed materials outside the CSS subject area;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ealready work regularly with advanced layout systems.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e5. What You’ll Learn\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003eDivide a page into logical structural areas.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eCreate containers for primary content.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eSet width and maximum-width values.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eApply a coordinated spacing system.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eArrange several elements within one row.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eConfigure gaps between cards and buttons.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eAlign content horizontally and vertically.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eBuild cards with matching internal structures.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eAssemble a page with at least four topic-based sections.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eIdentify repeated or conflicting layout declarations.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e6. 30-Day Refund Policy\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eA refund request may be submitted within 30 days, subject to the Boxlune store policy. The conditions, request procedure, and possible exceptions are presented on the dedicated refund policy page.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e7. Certificate\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eAfter completing the required modules and final assignment, the learner may receive a Boxlune certificate. It confirms completion of the Frame Course learning program.\u003c\/span\u003e\u003c\/p\u003e","brand":"Boxlune","offers":[{"title":"Default Title","offer_id":65394192810333,"sku":null,"price":27.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1092\/1525\/2829\/files\/Frame.jpg?v=1785162725"},{"product_id":"flux-guide","title":"Flux Guide","description":"\u003cp\u003e\u003cspan\u003e\u003cb\u003e1. Problem Statement\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eStruggling to build a layout that remains organized when the page width changes? You’re not alone: a row of cards may look orderly at one size but extend beyond its container or create uneven spacing at another. Manually positioning every element often leads to repeated declarations and difficult revisions. Horizontal and vertical alignment can also behave unexpectedly when blocks contain different amounts of text. Flux Guide explains how to create flexible structures where elements follow coordinated layout rules.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e2. Solution\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eThis course will teach you how to create CSS compositions with controlled direction and alignment. You will examine how a parent container determines the position and behavior of its child elements. Dedicated modules explain primary and cross axes, gaps, wrapping, resizing, and visual order. Practical assignments cover navigation rows, cards, information panels, and button groups. In the final task, you will build a page where several types of elements adjust their arrangement under defined width conditions.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e3. What’s Inside\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 1: Flexible Container Logic\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eLearn how a container establishes a shared layout environment for its child elements. The module explains row and column direction, along with the difference between the primary and cross axes.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 2: Element Alignment\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eWork with positioning along both axes. Examples cover centering, distributing unused space, and aligning elements that contain different amounts of content.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 3: Gaps and Wrapping\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eLearn how to create coordinated gaps without adding separate margins to every item. You will also configure cards to move onto another row when the available width changes.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 4: Block Size and Behavior\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eExplore element growth, shrinking, and base dimensions. Assignments demonstrate how several blocks divide the remaining space inside a container.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 5: Order and Nested Structures\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eLearn how to adjust the visual sequence of elements and combine several flexible containers. Examples include cards with internal rows, headings, labels, and action areas.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 6: Navigation and Control Panels\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eCreate a navigation row, button group, and compact information panel. The module focuses on consistent gaps and predictable positioning.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 7: Final Composition\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eCombine an opening section, a card row, a text area, and a closing panel. You will review how the composition behaves across several page widths.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e4. Who Is This For?\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e✅ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003ealready understand foundational CSS rules;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewant to create flexible rows and columns;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewould like to study alignment in more detail;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ework with cards, menus, and button groups;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewant to reduce repeated layout declarations.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e❌ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may not suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003ehave not yet studied the box model;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eare looking only for text styling topics;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eneed materials outside the CSS subject area;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ealready work regularly with complex flexible compositions.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e5. What You’ll Learn\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003eCreate containers with row or column direction.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eDistinguish between primary and cross axes.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eCenter elements within a container.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eDistribute unused space between blocks.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eConfigure coordinated gaps.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eMove elements onto a new row.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eControl block growth and shrinking.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eAdjust the visual order of elements.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eCombine nested flexible structures.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eBuild at least three types of flexible sections.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eReview layout behavior across different page widths.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e6. 30-Day Refund Policy\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eA refund request may be submitted within 30 days, subject to the Boxlune store policy. The request conditions, review procedure, and possible exceptions are described on the refund policy page.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e7. Certificate\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eAfter completing the required modules and final assignment, the learner may receive a Boxlune certificate. The document confirms completion of the Flux Guide learning program.\u003c\/span\u003e\u003c\/p\u003e","brand":"Boxlune","offers":[{"title":"Default Title","offer_id":65394215649629,"sku":null,"price":150.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1092\/1525\/2829\/files\/Flux.jpg?v=1785162725"},{"product_id":"halo-module","title":"Halo Module","description":"\u003cp\u003e\u003cspan\u003e\u003cb\u003e1. Problem Statement\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eStruggling to arrange several sections so they retain a logical order and balanced proportions? You’re not alone: cards, side panels, headings, and primary content may require different widths while also spanning several rows. Creating separate positioning rules for every block often produces repeated declarations and makes later revisions more difficult. When page width changes, columns may become too narrow while gaps lose consistency. Halo Module explains how to create grid structures where each element has a defined position and understandable layout behavior.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e2. Solution\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eThis course will teach you how to create CSS grids for pages containing several types of content. You will study how columns, rows, and the spaces between them are defined. Dedicated topics explain recurring patterns, distribution of available space, and placement within named areas. Practical assignments cover galleries, information panels, card catalogs, and pages with a side section. In the final assignment, you will build a multi-section layout that adjusts its structure according to page width.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e3. What’s Inside\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 1: Grid Container Foundations\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eLearn how to create a grid and define its columns and rows. Examples show how child elements are placed automatically within available cells.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 2: Columns, Rows, and Sizing Units\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eWork with fixed, relative, and flexible dimensions. The module explains how several columns can divide available space without calculating every width separately.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 3: Recurring Structures\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eLearn how to define repeated columns and rows with shorter declarations. Assignments include card catalogs and galleries containing recurring blocks.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 4: Element Placement\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eStudy how starting and ending grid lines control the position of individual elements. You will create blocks that span several columns or rows.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 5: Named Layout Areas\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eBuild a structure containing an upper section, main content, side panel, and lower block. Named areas help keep layout declarations organized and readable.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 6: Automatic Grid Filling\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eExplore how additional cards can be positioned without separate rules for every item. Examples demonstrate layouts containing different numbers of elements.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 7: Structure Across Page Widths\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eConfigure several grid arrangements for wide, medium, and narrow displays. The focus remains on readable content and a logical sequence of sections.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan\u003eModule 8: Final Layout Assignment\u003c\/span\u003e\u003c\/strong\u003e\u003cbr\u003e\u003cspan\u003eCombine an opening area, card catalog, information panel, and closing block. You will review the grid across several widths and revise element placement where needed.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e4. Who Is This For?\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e✅ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003ehave worked with containers, spacing, and flexible rows;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewant to create multi-column pages;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ework with catalogs, galleries, or information panels;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewould like to organize detailed page sections;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ewant to reduce separate positioning declarations.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e❌ \u003c\/span\u003e\u003cstrong\u003e\u003cspan\u003eThis course may not suit you if you:\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003ehave not studied foundational CSS structure;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eare unfamiliar with the box model;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eare looking only for text styling materials;\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eneed topics outside web styling.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e5. What You’ll Learn\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cul data-spread=\"false\"\u003e\n\u003cli\u003e\u003cspan\u003eCreate grid containers.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eDefine column and row structures.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eDistribute space between page sections.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eApply recurring layout patterns.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eConfigure gaps between cells.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003ePlace blocks across several columns.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eBuild named page areas.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eForm catalogs with different card counts.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eReorganize a grid across several widths.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eAssemble a layout with at least five content areas.\u003c\/span\u003e\u003c\/li\u003e\n\u003cli\u003e\u003cspan\u003eIdentify empty or overcrowded parts of a composition.\u003c\/span\u003e\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e6. 30-Day Refund Policy\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eA refund request may be submitted within 30 days, subject to the Boxlune store policy. The request procedure, review conditions, and possible exceptions are described on the dedicated refund policy page.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e\u003cb\u003e7. Certificate\u003c\/b\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eAfter completing the required modules and final layout assignment, the learner may receive a Boxlune certificate. The document confirms completion of the Halo Module learning program.\u003c\/span\u003e\u003c\/p\u003e","brand":"Boxlune","offers":[{"title":"Default Title","offer_id":65394251235677,"sku":null,"price":246.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1092\/1525\/2829\/files\/Halo.jpg?v=1785162725"}],"url":"https:\/\/boxlune.com\/collections\/basic-courses.oembed","provider":"Boxlune","version":"1.0","type":"link"}