{"title":"Pro guides","description":"","products":[{"product_id":"frame-module","title":"Frame Module","description":"\u003cdiv class=\"text-base my-auto mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-message-author-role=\"assistant\" data-message-id=\"780b4249-0339-4d1a-a7b2-6a5735f60b90\" dir=\"auto\" data-message-model-slug=\"gpt-5-5-thinking\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e1. Problem Statement\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003eStruggling to build a page with a clear frame instead of placing elements randomly? You are not alone: after first HTML, CSS, and JS exercises, many learners wonder how to move from separate examples to a page with logical structure. A learner may create a heading, button, or text block, but it can be harder to understand how these parts should be arranged together. Without structure, a page can become confusing, and editing code can take more attention than the learning itself. \u003cstrong data-start=\"4696\" data-end=\"4712\"\u003eFrame Module\u003c\/strong\u003e helps you view a page as a set of connected sections where each element has its place.\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e2. Solution\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003eThis module will teach you how to work with a page through its frame, sections, and repeated blocks. You will learn to see the difference between content, visual styling, and actions added through JS. The materials explain how to plan a simple page before writing code. Each module includes examples, logic review, and small exercises for topic practice. \u003cstrong data-start=\"5172\" data-end=\"5188\"\u003eFrame Module\u003c\/strong\u003e is suitable for learners who want to move from basic familiarity to a more organized way of working with web pages.\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e3. What’s Inside\n\u003cul data-start=\"5327\" data-end=\"6226\"\u003e\n\u003cli data-section-id=\"whld12\" data-start=\"5327\" data-end=\"5470\"\u003e\n\u003cstrong data-start=\"5329\" data-end=\"5356\"\u003eModule 1: Page Skeleton\u003c\/strong\u003e — the learner reviews the basic page frame: header, main area, sections, information blocks, and lower page area.\u003c\/li\u003e\n\u003cli data-section-id=\"12lasw1\" data-start=\"5471\" data-end=\"5590\"\u003e\n\u003cstrong data-start=\"5473\" data-end=\"5500\"\u003eModule 2: Section Logic\u003c\/strong\u003e — this module explains how to group elements by meaning so the page has a clear sequence.\u003c\/li\u003e\n\u003cli data-section-id=\"1nguwvb\" data-start=\"5591\" data-end=\"5723\"\u003e\n\u003cstrong data-start=\"5593\" data-end=\"5622\"\u003eModule 3: CSS Frame Rules\u003c\/strong\u003e — the learner sees how to style sections through spacing, width, alignment, borders, and background.\u003c\/li\u003e\n\u003cli data-section-id=\"1sb1l0m\" data-start=\"5724\" data-end=\"5834\"\u003e\n\u003cstrong data-start=\"5726\" data-end=\"5755\"\u003eModule 4: Reusable Blocks\u003c\/strong\u003e — this module covers repeated cards, lists, buttons, and information elements.\u003c\/li\u003e\n\u003cli data-section-id=\"1xcupth\" data-start=\"5835\" data-end=\"5960\"\u003e\n\u003cstrong data-start=\"5837\" data-end=\"5865\"\u003eModule 5: JS Touchpoints\u003c\/strong\u003e — introduction to simple scenarios: show or hide a block, change text, and respond to a click.\u003c\/li\u003e\n\u003cli data-section-id=\"1qpcc42\" data-start=\"5961\" data-end=\"6076\"\u003e\n\u003cstrong data-start=\"5963\" data-end=\"5993\"\u003eModule 6: Clean Code Notes\u003c\/strong\u003e — explanation of class naming, separating code parts, and keeping files organized.\u003c\/li\u003e\n\u003cli data-section-id=\"z0jn8h\" data-start=\"6077\" data-end=\"6226\"\u003e\n\u003cstrong data-start=\"6079\" data-end=\"6117\"\u003eModule 7: Structured Page Practice\u003c\/strong\u003e — a practical task where the learner builds a page with several sections, styling, and basic JS interaction.\u003c\/li\u003e\n\u003c\/ul\u003e\n4. Who is this for?\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e✅ A good fit if you:\n\u003cul data-start=\"6275\" data-end=\"6568\"\u003e\n\u003cli data-section-id=\"15bcmqx\" data-start=\"6275\" data-end=\"6348\"\u003ealready know basic HTML tags and want to work with a page as a whole;\u003c\/li\u003e\n\u003cli data-section-id=\"4k5lpx\" data-start=\"6349\" data-end=\"6403\"\u003ewant to better understand section and block logic;\u003c\/li\u003e\n\u003cli data-section-id=\"1kv4so6\" data-start=\"6404\" data-end=\"6435\"\u003ewant to write cleaner code;\u003c\/li\u003e\n\u003cli data-section-id=\"17t4m8\" data-start=\"6436\" data-end=\"6518\"\u003ewant to practice CSS not only on separate elements, but on full page sections;\u003c\/li\u003e\n\u003cli data-section-id=\"41t366\" data-start=\"6519\" data-end=\"6568\"\u003ewant to add simple JS actions without overload.\u003c\/li\u003e\n\u003c\/ul\u003e\n❌ Not for you if you:\n\u003cul data-start=\"6594\" data-end=\"6837\"\u003e\n\u003cli data-section-id=\"1n3svln\" data-start=\"6594\" data-end=\"6644\"\u003eare not yet familiar with basic HTML concepts;\u003c\/li\u003e\n\u003cli data-section-id=\"18txe6k\" data-start=\"6645\" data-end=\"6693\"\u003ewant only a short overview without practice;\u003c\/li\u003e\n\u003cli data-section-id=\"1p070ih\" data-start=\"6694\" data-end=\"6735\"\u003eexpect complex interactive scenarios;\u003c\/li\u003e\n\u003cli data-section-id=\"1tc869f\" data-start=\"6736\" data-end=\"6788\"\u003edo not plan to work with exercises and examples;\u003c\/li\u003e\n\u003cli data-section-id=\"5uxij5\" data-start=\"6789\" data-end=\"6837\"\u003ewant to move straight into large web projects.\u003c\/li\u003e\n\u003c\/ul\u003e\n5. What You’ll Learn\n\u003cul data-start=\"6864\" data-end=\"7214\"\u003e\n\u003cli data-section-id=\"1j296pm\" data-start=\"6864\" data-end=\"6905\"\u003ehow to plan the frame of a simple page;\u003c\/li\u003e\n\u003cli data-section-id=\"1uw3t3b\" data-start=\"6906\" data-end=\"6954\"\u003ehow to divide a page into meaningful sections;\u003c\/li\u003e\n\u003cli data-section-id=\"15bz1is\" data-start=\"6955\" data-end=\"6986\"\u003ehow to style blocks with CSS;\u003c\/li\u003e\n\u003cli data-section-id=\"7nvkhz\" data-start=\"6987\" data-end=\"7021\"\u003ehow to create repeated elements;\u003c\/li\u003e\n\u003cli data-section-id=\"11pfb32\" data-start=\"7022\" data-end=\"7058\"\u003ehow to keep class names organized;\u003c\/li\u003e\n\u003cli data-section-id=\"47s4wi\" data-start=\"7059\" data-end=\"7112\"\u003ehow to add basic JS actions to selected page parts;\u003c\/li\u003e\n\u003cli data-section-id=\"pu2yh0\" data-start=\"7113\" data-end=\"7160\"\u003ehow to connect HTML, CSS, and JS in one task;\u003c\/li\u003e\n\u003cli data-section-id=\"gydpzp\" data-start=\"7161\" data-end=\"7214\"\u003ehow to prepare for broader Veblomex learning tiers.\u003c\/li\u003e\n\u003c\/ul\u003e\n6. Refund Terms\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003eFor \u003cstrong data-start=\"7240\" data-end=\"7256\"\u003eFrame Module\u003c\/strong\u003e, there is a 30-day period for refund requests. If, after reviewing the materials, you feel that this tier does not match your expectations, you can contact us within this period. We will review the request according to the store rules and the terms shown during checkout. Please keep your purchase details so the team can process your request correctly.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cbr\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"Veblomex","offers":[{"title":"Default Title","offer_id":53748697497939,"sku":null,"price":150.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1068\/9190\/3315\/files\/frame.jpg?v=1778737735"},{"product_id":"loom-course","title":"Loom Course","description":"\u003cdiv class=\"text-base my-auto mx-auto [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-message-author-role=\"assistant\" data-message-id=\"483d2f59-c598-42fc-aec9-e3fc119ae177\" dir=\"auto\" data-message-model-slug=\"gpt-5-5-thinking\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e1. Problem Statement\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003eStruggling to turn a set of exercises into one complete learning project? You are not alone: after studying the basics, many learners want to work not only with separate blocks, but with a full page where all parts are connected. A learner may know how to create a section, style a button, or add a simple JS action, but it can be harder to bring everything into one shared structure. It may also be unclear how to keep code organized when a page becomes larger. \u003cstrong data-start=\"5096\" data-end=\"5111\"\u003eLoom Course\u003c\/strong\u003e helps weave separate topics into more consistent learning work.\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e2. Solution\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003eThis course will teach you how to work with HTML, CSS, and JS as three parts of one process. You will review how to plan a page, create sections, style repeated elements, and add basic actions where they are useful. The materials are built around practice: each topic leads to a small result within the learning page. You will also see how to keep file structure and class names clear. \u003cstrong data-start=\"5579\" data-end=\"5594\"\u003eLoom Course\u003c\/strong\u003e is suitable for learners who are ready to work with more material and want to see how topics connect.\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e3. What’s Inside\n\u003cul data-start=\"5719\" data-end=\"6895\"\u003e\n\u003cli data-section-id=\"ma9dhq\" data-start=\"5719\" data-end=\"5861\"\u003e\n\u003cstrong data-start=\"5721\" data-end=\"5749\"\u003eModule 1: Project Thread\u003c\/strong\u003e — the learner reviews how to plan a learning page: define its parts, section order, and the role of each block.\u003c\/li\u003e\n\u003cli data-section-id=\"18vknup\" data-start=\"5862\" data-end=\"6029\"\u003e\n\u003cstrong data-start=\"5864\" data-end=\"5900\"\u003eModule 2: HTML Structure Weaving\u003c\/strong\u003e — this module shows how to create connected sections: intro block, information cards, description areas, and lower page section.\u003c\/li\u003e\n\u003cli data-section-id=\"1imnlzp\" data-start=\"6030\" data-end=\"6162\"\u003e\n\u003cstrong data-start=\"6032\" data-end=\"6062\"\u003eModule 3: CSS Pattern Work\u003c\/strong\u003e — the learner studies repeated rules for spacing, typography, buttons, containers, and page rhythm.\u003c\/li\u003e\n\u003cli data-section-id=\"t6scbr\" data-start=\"6163\" data-end=\"6295\"\u003e\n\u003cstrong data-start=\"6165\" data-end=\"6193\"\u003eModule 4: Layout Balance\u003c\/strong\u003e — this module explains element placement, block width, grid, rows, and sections with several columns.\u003c\/li\u003e\n\u003cli data-section-id=\"1l4p9wi\" data-start=\"6296\" data-end=\"6439\"\u003e\n\u003cstrong data-start=\"6298\" data-end=\"6331\"\u003eModule 5: Responsive Practice\u003c\/strong\u003e — the learner explores basic techniques that help a page keep a comfortable view on different screen sizes.\u003c\/li\u003e\n\u003cli data-section-id=\"y9m495\" data-start=\"6440\" data-end=\"6600\"\u003e\n\u003cstrong data-start=\"6442\" data-end=\"6476\"\u003eModule 6: JS Interaction Layer\u003c\/strong\u003e — this module covers simple scenarios: switching a class, opening a hidden block, changing text, and working with a button.\u003c\/li\u003e\n\u003cli data-section-id=\"1evyzs9\" data-start=\"6601\" data-end=\"6734\"\u003e\n\u003cstrong data-start=\"6603\" data-end=\"6633\"\u003eModule 7: Code Order Notes\u003c\/strong\u003e — the learner reviews how to separate code into clear parts, name classes, and keep files organized.\u003c\/li\u003e\n\u003cli data-section-id=\"ndx5id\" data-start=\"6735\" data-end=\"6895\"\u003e\n\u003cstrong data-start=\"6737\" data-end=\"6769\"\u003eModule 8: Loom Practice Page\u003c\/strong\u003e — the final practical task where the learner creates a full learning page with several sections, styling, and JS interaction.\u003c\/li\u003e\n\u003c\/ul\u003e\n4. Who is this for?\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e✅ A good fit if you:\n\u003cul data-start=\"6944\" data-end=\"7300\"\u003e\n\u003cli data-section-id=\"1yjfcyc\" data-start=\"6944\" data-end=\"7002\"\u003ealready have basic understanding of HTML, CSS, and JS;\u003c\/li\u003e\n\u003cli data-section-id=\"7fqik5\" data-start=\"7003\" data-end=\"7065\"\u003ewant to work with a full page, not only separate examples;\u003c\/li\u003e\n\u003cli data-section-id=\"s1lue9\" data-start=\"7066\" data-end=\"7131\"\u003ewant to better organize sections, styles, and simple actions;\u003c\/li\u003e\n\u003cli data-section-id=\"fdv4mg\" data-start=\"7132\" data-end=\"7191\"\u003eare ready to complete practice tasks after each module;\u003c\/li\u003e\n\u003cli data-section-id=\"fqr8ll\" data-start=\"7192\" data-end=\"7253\"\u003ewant to learn through a consistent page-building process;\u003c\/li\u003e\n\u003cli data-section-id=\"1ebf4tf\" data-start=\"7254\" data-end=\"7300\"\u003evalue a calm pace and detailed explanations.\u003c\/li\u003e\n\u003c\/ul\u003e\n❌ Not for you if you:\n\u003cul data-start=\"7326\" data-end=\"7588\"\u003e\n\u003cli data-section-id=\"l3k7z6\" data-start=\"7326\" data-end=\"7358\"\u003eare just starting with HTML;\u003c\/li\u003e\n\u003cli data-section-id=\"1bx4jh2\" data-start=\"7359\" data-end=\"7402\"\u003edo not want to complete practice tasks;\u003c\/li\u003e\n\u003cli data-section-id=\"1uojhvx\" data-start=\"7403\" data-end=\"7460\"\u003ewant a short overview without looking into structure;\u003c\/li\u003e\n\u003cli data-section-id=\"w3s0qt\" data-start=\"7461\" data-end=\"7527\"\u003eexpect complex technical scenarios without preparation topics;\u003c\/li\u003e\n\u003cli data-section-id=\"m4jv5b\" data-start=\"7528\" data-end=\"7588\"\u003edo not plan to work with code on your own during learning.\u003c\/li\u003e\n\u003c\/ul\u003e\n5. What You’ll Learn\n\u003cul data-start=\"7615\" data-end=\"8066\"\u003e\n\u003cli data-section-id=\"50zk72\" data-start=\"7615\" data-end=\"7650\"\u003ehow to plan a full learning page;\u003c\/li\u003e\n\u003cli data-section-id=\"1uutm9w\" data-start=\"7651\" data-end=\"7691\"\u003ehow to create connected HTML sections;\u003c\/li\u003e\n\u003cli data-section-id=\"dm1rk4\" data-start=\"7692\" data-end=\"7747\"\u003ehow to keep one visual style across different blocks;\u003c\/li\u003e\n\u003cli data-section-id=\"1rcpuq0\" data-start=\"7748\" data-end=\"7803\"\u003ehow to work with spacing, grid, containers, and rows;\u003c\/li\u003e\n\u003cli data-section-id=\"ujraxs\" data-start=\"7804\" data-end=\"7847\"\u003ehow to make basic responsive adjustments;\u003c\/li\u003e\n\u003cli data-section-id=\"1pbcbbi\" data-start=\"7848\" data-end=\"7899\"\u003ehow to add simple JS scenarios to ready elements;\u003c\/li\u003e\n\u003cli data-section-id=\"bb3qgw\" data-start=\"7900\" data-end=\"7946\"\u003ehow to keep class names and files organized;\u003c\/li\u003e\n\u003cli data-section-id=\"16ehigd\" data-start=\"7947\" data-end=\"8002\"\u003ehow to combine HTML, CSS, and JS in a practical task;\u003c\/li\u003e\n\u003cli data-section-id=\"sz8ei5\" data-start=\"8003\" data-end=\"8066\"\u003ehow to prepare for broader Veblomex tiers with more practice.\u003c\/li\u003e\n\u003c\/ul\u003e\n6. Refund Terms\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full light markdown-new-styling\"\u003eFor \u003cstrong data-start=\"8092\" data-end=\"8107\"\u003eLoom Course\u003c\/strong\u003e, there is a 30-day period for refund requests. If, after reviewing the materials, you feel this tier does not match your expectations, you can contact us within this period. We will review the request according to the store rules and the terms shown during checkout. Please keep your purchase details and include the email address used during the order so the request can be handled correctly.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cbr\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"Veblomex","offers":[{"title":"Default Title","offer_id":53748715422035,"sku":null,"price":398.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1068\/9190\/3315\/files\/loom.jpg?v=1778737735"},{"product_id":"neon-course","title":"Neon Course","description":"\u003cp\u003e1. Problem Statement\u003c\/p\u003e\n\u003cp\u003eStruggling to bring several HTML, CSS, and JS topics into a page that feels organized and readable? You are not alone: when there is more material, learners often notice that code grows larger and the page logic becomes harder to keep in mind. You may understand separate sections, but feel unsure when combining cards, forms, buttons, text blocks, and JS scenarios. Another challenge is keeping a consistent style across different parts of a page. \u003cstrong data-start=\"5235\" data-end=\"5250\"\u003eNeon Course\u003c\/strong\u003e helps divide these topics into organized modules and work through them with practice.\u003c\/p\u003e\n\u003cp\u003e2. Solution\u003c\/p\u003e\n\u003cp\u003eThis course will teach you how to create a page with several connected sections, where HTML handles content, CSS shapes visual order, and JS adds suitable actions. You will review how to plan structure before writing code, style repeated elements, and keep clear logic within a learning task. The materials show how to connect sections into one page without unnecessary complexity. Each module includes explanations, examples, and exercises. \u003cstrong data-start=\"5796\" data-end=\"5811\"\u003eNeon Course\u003c\/strong\u003e is suitable for learners who want to work with a wider set of practical tasks.\u003c\/p\u003e\n\u003cp\u003e3. What’s Inside\u003c\/p\u003e\n\u003cul data-start=\"5913\" data-end=\"7219\"\u003e\n\u003cli data-section-id=\"19q8g1i\" data-start=\"5913\" data-end=\"6066\"\u003e\n\u003cstrong data-start=\"5915\" data-end=\"5943\"\u003eModule 1: Neon Page Plan\u003c\/strong\u003e — the learner reviews how to plan a multi-section page: intro block, information sections, cards, form, and closing block.\u003c\/li\u003e\n\u003cli data-section-id=\"12kx15g\" data-start=\"6067\" data-end=\"6223\"\u003e\n\u003cstrong data-start=\"6069\" data-end=\"6102\"\u003eModule 2: HTML Content System\u003c\/strong\u003e — this module explains how to organize headings, text, lists, links, buttons, and element groups into a clear structure.\u003c\/li\u003e\n\u003cli data-section-id=\"7q7fl9\" data-start=\"6224\" data-end=\"6353\"\u003e\n\u003cstrong data-start=\"6226\" data-end=\"6259\"\u003eModule 3: CSS Visual Language\u003c\/strong\u003e — the learner studies spacing, color accents, typography, container width, and visual rhythm.\u003c\/li\u003e\n\u003cli data-section-id=\"itd5u9\" data-start=\"6354\" data-end=\"6506\"\u003e\n\u003cstrong data-start=\"6356\" data-end=\"6392\"\u003eModule 4: Card and Grid Practice\u003c\/strong\u003e — this module focuses on creating cards, card groups, grids, and sections where several elements share one style.\u003c\/li\u003e\n\u003cli data-section-id=\"pjahe7\" data-start=\"6507\" data-end=\"6631\"\u003e\n\u003cstrong data-start=\"6509\" data-end=\"6545\"\u003eModule 5: Form and Input Styling\u003c\/strong\u003e — the learner reviews fields, labels, buttons, user messages, and clean form styling.\u003c\/li\u003e\n\u003cli data-section-id=\"1l5c42u\" data-start=\"6632\" data-end=\"6781\"\u003e\n\u003cstrong data-start=\"6634\" data-end=\"6664\"\u003eModule 6: JS State Changes\u003c\/strong\u003e — this module shows how to change element states: open a block, switch a class, change text, and respond to a click.\u003c\/li\u003e\n\u003cli data-section-id=\"15l1n5e\" data-start=\"6782\" data-end=\"6927\"\u003e\n\u003cstrong data-start=\"6784\" data-end=\"6821\"\u003eModule 7: Responsive Layout Notes\u003c\/strong\u003e — the learner explores ways to arrange elements on different screen sizes through simple and clear rules.\u003c\/li\u003e\n\u003cli data-section-id=\"bns5pn\" data-start=\"6928\" data-end=\"7066\"\u003e\n\u003cstrong data-start=\"6930\" data-end=\"6964\"\u003eModule 8: Code Review Practice\u003c\/strong\u003e — this module helps review your own code: class names, repeated rules, section order, and file logic.\u003c\/li\u003e\n\u003cli data-section-id=\"wxq5fh\" data-start=\"7067\" data-end=\"7219\"\u003e\n\u003cstrong data-start=\"7069\" data-end=\"7101\"\u003eModule 9: Neon Practice Page\u003c\/strong\u003e — the final task where the learner creates a multi-section page with HTML structure, CSS styling, and JS interaction.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e4. Who is this for?\u003c\/p\u003e\n\u003cp\u003e✅ A good fit if you:\u003c\/p\u003e\n\u003cul data-start=\"7268\" data-end=\"7597\"\u003e\n\u003cli data-section-id=\"5jfnle\" data-start=\"7268\" data-end=\"7325\"\u003ealready understand basic HTML, CSS, and JS structure;\u003c\/li\u003e\n\u003cli data-section-id=\"h514u4\" data-start=\"7326\" data-end=\"7370\"\u003ewant to work with larger learning pages;\u003c\/li\u003e\n\u003cli data-section-id=\"122gczg\" data-start=\"7371\" data-end=\"7432\"\u003ewant to better organize cards, grids, forms, and buttons;\u003c\/li\u003e\n\u003cli data-section-id=\"11gcrpj\" data-start=\"7433\" data-end=\"7491\"\u003ewant to keep one visual style across several sections;\u003c\/li\u003e\n\u003cli data-section-id=\"1bebeue\" data-start=\"7492\" data-end=\"7544\"\u003ewant to practice basic JS actions within a page;\u003c\/li\u003e\n\u003cli data-section-id=\"1bt6cal\" data-start=\"7545\" data-end=\"7597\"\u003eare ready to complete exercises after each module.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e❌ Not for you if you:\u003c\/p\u003e\n\u003cul data-start=\"7623\" data-end=\"7916\"\u003e\n\u003cli data-section-id=\"1t6dywr\" data-start=\"7623\" data-end=\"7695\"\u003eare only starting with HTML and have not worked with basic tags yet;\u003c\/li\u003e\n\u003cli data-section-id=\"foaskj\" data-start=\"7696\" data-end=\"7748\"\u003ewant a very short introduction without practice;\u003c\/li\u003e\n\u003cli data-section-id=\"17jagz4\" data-start=\"7749\" data-end=\"7796\"\u003edo not want to repeat examples on your own;\u003c\/li\u003e\n\u003cli data-section-id=\"11pxf2o\" data-start=\"7797\" data-end=\"7861\"\u003eexpect complex technical topics without gradual preparation;\u003c\/li\u003e\n\u003cli data-section-id=\"154e7bh\" data-start=\"7862\" data-end=\"7916\"\u003edo not plan to work with HTML, CSS, and JS together.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e5. What You’ll Learn\u003c\/p\u003e\n\u003cul data-start=\"7943\" data-end=\"8358\"\u003e\n\u003cli data-section-id=\"1b69ghg\" data-start=\"7943\" data-end=\"7978\"\u003ehow to plan a multi-section page;\u003c\/li\u003e\n\u003cli data-section-id=\"19vnx54\" data-start=\"7979\" data-end=\"8013\"\u003ehow to organize content in HTML;\u003c\/li\u003e\n\u003cli data-section-id=\"1dcfdi7\" data-start=\"8014\" data-end=\"8059\"\u003ehow to create one visual language with CSS;\u003c\/li\u003e\n\u003cli data-section-id=\"1pzx1d3\" data-start=\"8060\" data-end=\"8115\"\u003ehow to work with cards, grids, and repeated elements;\u003c\/li\u003e\n\u003cli data-section-id=\"1e677z8\" data-start=\"8116\" data-end=\"8144\"\u003ehow to style simple forms;\u003c\/li\u003e\n\u003cli data-section-id=\"x7v2pc\" data-start=\"8145\" data-end=\"8192\"\u003ehow to add JS actions to ready-made elements;\u003c\/li\u003e\n\u003cli data-section-id=\"bom4y2\" data-start=\"8193\" data-end=\"8239\"\u003ehow to keep larger learning files organized;\u003c\/li\u003e\n\u003cli data-section-id=\"fy4vta\" data-start=\"8240\" data-end=\"8294\"\u003ehow to review your own code before finishing a task;\u003c\/li\u003e\n\u003cli data-section-id=\"1sca26g\" data-start=\"8295\" data-end=\"8358\"\u003ehow to combine HTML, CSS, and JS in a complete learning page.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e6. Refund Terms\u003c\/p\u003e\n\u003cp\u003eFor \u003cstrong data-start=\"8384\" data-end=\"8399\"\u003eNeon Course\u003c\/strong\u003e, there is a 30-day period for refund requests. If, after reviewing the materials, you feel this tier does not match your expectations, you can contact us within this period. We will review the request according to the store rules and the terms shown during checkout. Please keep your purchase details and include the email address used during the order so the request can be handled correctly.\u003c\/p\u003e","brand":"Veblomex","offers":[{"title":"Default Title","offer_id":53748717551955,"sku":null,"price":502.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1068\/9190\/3315\/files\/neon.jpg?v=1778737735"},{"product_id":"grid-course","title":"Grid Course","description":"\u003cp\u003e1. Problem Statement\u003c\/p\u003e\n\u003cp\u003eStruggling to bring HTML, CSS, and JS into a larger learning page where every part has its place? You are not alone: when a page includes many sections, cards, buttons, forms, and actions, the code can become harder to read. A learner may understand separate topics, but not always see how to connect them into an organized structure. It can be especially difficult to keep one style, class naming logic, and comfortable element placement across different screen sizes. \u003cstrong data-start=\"5660\" data-end=\"5675\"\u003eGrid Course\u003c\/strong\u003e helps divide this process into clear parts and work through them with practice.\u003c\/p\u003e\n\u003cp\u003e2. Solution\u003c\/p\u003e\n\u003cp\u003eThis course will teach you how to create an extended learning page with HTML, CSS, and JS, where structure, style, and interaction work together. You will review how to plan a page before writing code, build sections, use CSS grids, style repeated elements, and add simple JS actions. The materials explain how to keep larger files organized and avoid getting lost in details. Each module includes examples, explanations, and practical exercises. \u003cstrong data-start=\"6220\" data-end=\"6235\"\u003eGrid Course\u003c\/strong\u003e is suitable for learners who want the broadest Veblomex learning route in this series.\u003c\/p\u003e\n\u003cp\u003e3. What’s Inside\u003c\/p\u003e\n\u003cul data-start=\"6345\" data-end=\"7906\"\u003e\n\u003cli data-section-id=\"11jag6s\" data-start=\"6345\" data-end=\"6504\"\u003e\n\u003cstrong data-start=\"6347\" data-end=\"6378\"\u003eModule 1: Grid Learning Map\u003c\/strong\u003e — the learner reviews the overall course map: which sections will be created, how they connect, and what role each block has.\u003c\/li\u003e\n\u003cli data-section-id=\"1qlcghf\" data-start=\"6505\" data-end=\"6687\"\u003e\n\u003cstrong data-start=\"6507\" data-end=\"6544\"\u003eModule 2: Advanced Page Structure\u003c\/strong\u003e — this module explains how to build a multi-section HTML page with an intro block, information sections, cards, a form, and a closing section.\u003c\/li\u003e\n\u003cli data-section-id=\"ay86mc\" data-start=\"6688\" data-end=\"6842\"\u003e\n\u003cstrong data-start=\"6690\" data-end=\"6724\"\u003eModule 3: CSS Grid Foundations\u003c\/strong\u003e — the learner studies basic CSS grid work: columns, rows, gaps between elements, and placement of cards and sections.\u003c\/li\u003e\n\u003cli data-section-id=\"11co0b8\" data-start=\"6843\" data-end=\"6984\"\u003e\n\u003cstrong data-start=\"6845\" data-end=\"6881\"\u003eModule 4: Layout System Practice\u003c\/strong\u003e — this module shows how to combine grid, containers, spacing, block width, and repeated styling rules.\u003c\/li\u003e\n\u003cli data-section-id=\"1dyriw7\" data-start=\"6985\" data-end=\"7146\"\u003e\n\u003cstrong data-start=\"6987\" data-end=\"7025\"\u003eModule 5: Component Library Basics\u003c\/strong\u003e — the learner creates a set of repeated elements: buttons, cards, information blocks, lists, labels, and short sections.\u003c\/li\u003e\n\u003cli data-section-id=\"1rz21rc\" data-start=\"7147\" data-end=\"7270\"\u003e\n\u003cstrong data-start=\"7149\" data-end=\"7189\"\u003eModule 6: Form Structure and Styling\u003c\/strong\u003e — this module explains fields, labels, buttons, messages, and visual form order.\u003c\/li\u003e\n\u003cli data-section-id=\"14i4vvd\" data-start=\"7271\" data-end=\"7435\"\u003e\n\u003cstrong data-start=\"7273\" data-end=\"7310\"\u003eModule 7: JS Interaction Patterns\u003c\/strong\u003e — the learner reviews simple scenarios: switching state, opening a block, changing text, and working with an active element.\u003c\/li\u003e\n\u003cli data-section-id=\"khhvep\" data-start=\"7436\" data-end=\"7587\"\u003e\n\u003cstrong data-start=\"7438\" data-end=\"7473\"\u003eModule 8: Responsive Grid Notes\u003c\/strong\u003e — this module introduces approaches that help grids and sections keep a clean look across different screen sizes.\u003c\/li\u003e\n\u003cli data-section-id=\"ohi06v\" data-start=\"7588\" data-end=\"7719\"\u003e\n\u003cstrong data-start=\"7590\" data-end=\"7628\"\u003eModule 9: Code Organization Review\u003c\/strong\u003e — the learner reviews file order, class names, repeated CSS rules, and JS placement logic.\u003c\/li\u003e\n\u003cli data-section-id=\"24jh7r\" data-start=\"7720\" data-end=\"7906\"\u003e\n\u003cstrong data-start=\"7722\" data-end=\"7755\"\u003eModule 10: Grid Practice Page\u003c\/strong\u003e — the final practical task where the learner creates a large learning page with HTML structure, CSS grid, form, repeated elements, and JS interaction.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e4. Who is this for?\u003c\/p\u003e\n\u003cp\u003e✅ A good fit if you:\u003c\/p\u003e\n\u003cul data-start=\"7955\" data-end=\"8363\"\u003e\n\u003cli data-section-id=\"1yjfcyc\" data-start=\"7955\" data-end=\"8013\"\u003ealready have basic understanding of HTML, CSS, and JS;\u003c\/li\u003e\n\u003cli data-section-id=\"1dkqzmc\" data-start=\"8014\" data-end=\"8068\"\u003ewant to work with the largest tier in this series;\u003c\/li\u003e\n\u003cli data-section-id=\"1m1iqh2\" data-start=\"8069\" data-end=\"8130\"\u003ewant to learn through creating a full multi-section page;\u003c\/li\u003e\n\u003cli data-section-id=\"1wjupzj\" data-start=\"8131\" data-end=\"8191\"\u003ewant to better understand CSS grids and block structure;\u003c\/li\u003e\n\u003cli data-section-id=\"gjfwqe\" data-start=\"8192\" data-end=\"8241\"\u003ewant to keep larger learning files organized;\u003c\/li\u003e\n\u003cli data-section-id=\"1j0remy\" data-start=\"8242\" data-end=\"8309\"\u003ewant to practice forms, cards, sections, and simple JS actions;\u003c\/li\u003e\n\u003cli data-section-id=\"bnupx3\" data-start=\"8310\" data-end=\"8363\"\u003eare ready to work with exercises after each module.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e❌ Not for you if you:\u003c\/p\u003e\n\u003cul data-start=\"8389\" data-end=\"8709\"\u003e\n\u003cli data-section-id=\"1t6dywr\" data-start=\"8389\" data-end=\"8461\"\u003eare only starting with HTML and have not worked with basic tags yet;\u003c\/li\u003e\n\u003cli data-section-id=\"8qoep2\" data-start=\"8462\" data-end=\"8493\"\u003ewant a short starting tier;\u003c\/li\u003e\n\u003cli data-section-id=\"1f4615t\" data-start=\"8494\" data-end=\"8538\"\u003edo not plan to complete practical tasks;\u003c\/li\u003e\n\u003cli data-section-id=\"1uyz3hw\" data-start=\"8539\" data-end=\"8595\"\u003ewant to learn without working with code on your own;\u003c\/li\u003e\n\u003cli data-section-id=\"27zk8s\" data-start=\"8596\" data-end=\"8660\"\u003eexpect complex technical topics without earlier preparation;\u003c\/li\u003e\n\u003cli data-section-id=\"1b1nz0z\" data-start=\"8661\" data-end=\"8709\"\u003edo not want to work with a multi-section page.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e5. What You’ll Learn\u003c\/p\u003e\n\u003cul data-start=\"8736\" data-end=\"9202\"\u003e\n\u003cli data-section-id=\"154mkds\" data-start=\"8736\" data-end=\"8772\"\u003ehow to plan a large learning page;\u003c\/li\u003e\n\u003cli data-section-id=\"1s6q3ca\" data-start=\"8773\" data-end=\"8819\"\u003ehow to build a multi-section HTML structure;\u003c\/li\u003e\n\u003cli data-section-id=\"61wxal\" data-start=\"8820\" data-end=\"8865\"\u003ehow to use CSS grid for cards and sections;\u003c\/li\u003e\n\u003cli data-section-id=\"cmoaad\" data-start=\"8866\" data-end=\"8924\"\u003ehow to work with containers, rows, columns, and spacing;\u003c\/li\u003e\n\u003cli data-section-id=\"174y011\" data-start=\"8925\" data-end=\"8966\"\u003ehow to create repeated page components;\u003c\/li\u003e\n\u003cli data-section-id=\"2cvwf7\" data-start=\"8967\" data-end=\"9009\"\u003ehow to style forms and related elements;\u003c\/li\u003e\n\u003cli data-section-id=\"rzx0vn\" data-start=\"9010\" data-end=\"9043\"\u003ehow to add simple JS scenarios;\u003c\/li\u003e\n\u003cli data-section-id=\"awb9o5\" data-start=\"9044\" data-end=\"9079\"\u003ehow to keep CSS and JS organized;\u003c\/li\u003e\n\u003cli data-section-id=\"1cr4ep3\" data-start=\"9080\" data-end=\"9138\"\u003ehow to adjust page structure for different screen sizes;\u003c\/li\u003e\n\u003cli data-section-id=\"ffxc3m\" data-start=\"9139\" data-end=\"9202\"\u003ehow to bring HTML, CSS, and JS into a complete learning page.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e6. Refund Terms\u003c\/p\u003e\n\u003cp\u003eFor \u003cstrong data-start=\"9228\" data-end=\"9243\"\u003eGrid Course\u003c\/strong\u003e, there is a 30-day period for refund requests. If, after reviewing the materials, you feel this tier does not match your expectations, you can contact us within this period. We will review the request according to the store rules and the terms shown during checkout. Please keep your purchase details and include the email address used during the order so the request can be handled correctly.\u003c\/p\u003e","brand":"Veblomex","offers":[{"title":"Default Title","offer_id":53748721647955,"sku":null,"price":602.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1068\/9190\/3315\/files\/grid.jpg?v=1778737735"}],"url":"https:\/\/veblomex.net\/collections\/pro-guides.oembed","provider":"Veblomex","version":"1.0","type":"link"}