{"id":1341,"date":"2026-05-21T18:25:42","date_gmt":"2026-05-21T21:25:42","guid":{"rendered":"https:\/\/viaenglish.com\/?page_id=1341"},"modified":"2026-05-22T14:45:57","modified_gmt":"2026-05-22T17:45:57","slug":"online-grammar","status":"publish","type":"page","link":"https:\/\/viaenglish.com\/en\/online-grammar\/","title":{"rendered":"Online Grammar"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1341\" class=\"elementor elementor-1341\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18859a8 e-flex e-con-boxed e-con e-parent\" data-id=\"18859a8\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a2d16a elementor-widget elementor-widget-html\" data-id=\"7a2d16a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- ============================================================\n     ViaEnglish \u2014 Grammar Exercise Index\n     Elementor HTML Widget Fragment\n     Paste everything below into an Elementor HTML widget.\n     No <html>, <head>, or <body> tags needed.\n     ============================================================ -->\n\n<!-- \u2500\u2500 Fonts \u2500\u2500 -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap\" rel=\"stylesheet\"\/>\n\n<!-- \u2500\u2500 Styles \u2500\u2500 -->\n<style>\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ROOT VARIABLES \u2014 edit here to change colors\/fonts\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n:root {\n  --ink:          #1a1a2e;\n  --cream:        #faf8f3;\n  --gold:         #c9a84c;\n  --gold-light:   #f0d98a;\n  --gold-dim:     rgba(201,168,76,0.12);\n  --accent:       #2e6fa8;\n  --accent-light: #e8f2fb;\n  --mid:          #6b6b7b;\n  --border:       #e4e0d8;\n  --white:        #ffffff;\n  --shadow-sm:    0 2px 10px rgba(26,26,46,0.06);\n  --shadow-md:    0 6px 28px rgba(26,26,46,0.11);\n  --shadow-lg:    0 16px 48px rgba(26,26,46,0.15);\n  --radius:       14px;\n  --radius-sm:    8px;\n  --font-display: 'Playfair Display', serif;\n  --font-body:    'DM Sans', sans-serif;\n  --transition:   0.22s cubic-bezier(.4,0,.2,1);\n}\n\n\/* \u2500\u2500 Scoped reset (won't leak into WordPress) \u2500\u2500 *\/\n.veg-index *, .veg-index *::before, .veg-index *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.veg-index {\n  font-family: var(--font-body);\n  color: var(--ink);\n  background: var(--cream);\n  padding: 3rem 1.25rem 5rem;\n  min-height: 100%;\n}\n\n\/* \u2500\u2500 Hero \u2500\u2500 *\/\n.veg-hero {\n  text-align: center;\n  max-width: 640px;\n  margin: 0 auto 3rem;\n}\n.veg-hero-label {\n  display: inline-block;\n  font-size: 0.7rem;\n  font-weight: 600;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: var(--gold);\n  background: var(--gold-dim);\n  border: 1px solid rgba(201,168,76,0.25);\n  padding: 5px 14px;\n  border-radius: 999px;\n  margin-bottom: 1rem;\n}\n.veg-hero h1 {\n  font-family: var(--font-display);\n  font-size: clamp(1.9rem, 5vw, 2.75rem);\n  line-height: 1.15;\n  color: var(--ink);\n  margin-bottom: 0.9rem;\n  letter-spacing: -0.01em;\n}\n.veg-hero h1 em {\n  font-style: normal;\n  color: var(--accent);\n}\n.veg-hero p {\n  color: var(--mid);\n  font-size: 1rem;\n  line-height: 1.65;\n  font-weight: 400;\n}\n\n\/* \u2500\u2500 Search bar \u2500\u2500 *\/\n.veg-search-wrap {\n  max-width: 520px;\n  margin: 0 auto 3rem;\n  position: relative;\n}\n.veg-search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mid);\n  pointer-events: none;\n  display: flex;\n}\n.veg-search {\n  width: 100%;\n  padding: 0.85rem 1rem 0.85rem 2.75rem;\n  border: 1.5px solid var(--border);\n  border-radius: 999px;\n  font-family: var(--font-body);\n  font-size: 0.925rem;\n  color: var(--ink);\n  background: var(--white);\n  outline: none;\n  box-shadow: var(--shadow-sm);\n  transition: border-color var(--transition), box-shadow var(--transition);\n}\n.veg-search::placeholder { color: #aaa; }\n.veg-search:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px rgba(46,111,168,0.12);\n}\n\/* Clear \/ no-results message *\/\n.veg-no-results {\n  display: none;\n  text-align: center;\n  color: var(--mid);\n  font-size: 0.95rem;\n  padding: 2.5rem 0;\n}\n\n\/* \u2500\u2500 Category section \u2500\u2500 *\/\n.veg-section {\n  margin-bottom: 3rem;\n}\n\/* Hide entire section when no cards visible *\/\n.veg-section.veg-hidden { display: none; }\n\n.veg-section-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin-bottom: 1.25rem;\n}\n.veg-section-icon {\n  width: 34px; height: 34px;\n  border-radius: var(--radius-sm);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n.veg-section-title {\n  font-family: var(--font-display);\n  font-size: 1.15rem;\n  color: var(--ink);\n  font-weight: 700;\n}\n.veg-section-line {\n  flex: 1;\n  height: 1px;\n  background: var(--border);\n}\n.veg-section-count {\n  font-size: 0.72rem;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  color: var(--mid);\n  background: var(--cream);\n  border: 1px solid var(--border);\n  padding: 2px 9px;\n  border-radius: 999px;\n}\n\n\/* \u2500\u2500 Card grid \u2500\u2500 *\/\n.veg-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));\n  gap: 0.85rem;\n}\n\n\/* \u2500\u2500 Topic card \u2500\u2500 *\/\n.veg-card {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background: var(--white);\n  border: 1.5px solid var(--border);\n  border-radius: var(--radius);\n  padding: 1.1rem 1.2rem 1rem;\n  text-decoration: none;\n  color: var(--ink);\n  box-shadow: var(--shadow-sm);\n  transition:\n    transform var(--transition),\n    box-shadow var(--transition),\n    border-color var(--transition),\n    background var(--transition);\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  \/* Staggered entrance animation *\/\n  opacity: 0;\n  animation: vegFadeUp 0.45s ease forwards;\n}\n\/* Entrance animation stagger via inline style delay *\/\n@keyframes vegFadeUp {\n  from { opacity: 0; transform: translateY(12px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.veg-card::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(135deg, var(--accent-light) 0%, transparent 60%);\n  opacity: 0;\n  transition: opacity var(--transition);\n  border-radius: inherit;\n}\n.veg-card:hover {\n  transform: translateY(-3px);\n  box-shadow: var(--shadow-md);\n  border-color: var(--accent);\n}\n.veg-card:hover::before { opacity: 1; }\n\n\/* Card content *\/\n.veg-card-top {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  margin-bottom: 0.6rem;\n  position: relative;\n}\n.veg-card-name {\n  font-size: 0.92rem;\n  font-weight: 600;\n  line-height: 1.35;\n  color: var(--ink);\n  position: relative;\n  transition: color var(--transition);\n}\n.veg-card:hover .veg-card-name { color: var(--accent); }\n\n.veg-card-arrow {\n  color: var(--border);\n  transition: color var(--transition), transform var(--transition);\n  flex-shrink: 0;\n  margin-left: 0.5rem;\n  display: flex;\n}\n.veg-card:hover .veg-card-arrow {\n  color: var(--accent);\n  transform: translateX(3px);\n}\n\n.veg-card-level {\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  padding: 2px 8px;\n  border-radius: 999px;\n  border: 1px solid;\n  position: relative;\n}\n\n\/* Level color variants *\/\n.veg-card-level.a1  { color: #2d8a5e; background: #e6f6ef; border-color: #a8d9c0; }\n.veg-card-level.a2  { color: #2e6fa8; background: #e8f2fb; border-color: #a5c9e8; }\n.veg-card-level.b1  { color: #b8860b; background: #fff8e1; border-color: #f0d98a; }\n.veg-card-level.b2  { color: #7b4ea0; background: #f5eefb; border-color: #d9b8f0; }\n.veg-card-level.all { color: var(--mid); background: var(--cream); border-color: var(--border); }\n\n\/* Hidden state for search filter *\/\n.veg-card.veg-hidden { display: none; }\n\n\/* \u2500\u2500 Stats bar at bottom of page \u2500\u2500 *\/\n.veg-stats {\n  display: flex;\n  justify-content: center;\n  gap: 2.5rem;\n  flex-wrap: wrap;\n  margin-top: 1rem;\n  padding-top: 3rem;\n  border-top: 1px solid var(--border);\n}\n.veg-stat {\n  text-align: center;\n}\n.veg-stat-num {\n  font-family: var(--font-display);\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--ink);\n  line-height: 1;\n}\n.veg-stat-num span { color: var(--gold); }\n.veg-stat-label {\n  font-size: 0.78rem;\n  color: var(--mid);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-top: 0.3rem;\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media (max-width: 600px) {\n  .veg-index { padding: 2rem 1rem 4rem; }\n  .veg-grid  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }\n  .veg-stats { gap: 1.5rem; }\n}\n@media (max-width: 400px) {\n  .veg-grid  { grid-template-columns: 1fr 1fr; }\n}\n<\/style>\n\n<!-- \u2500\u2500 Markup \u2500\u2500 -->\n<div class=\"veg-index\" id=\"vegIndex\">\n\n  <!-- \u2500\u2500 Hero \u2500\u2500 -->\n  <div class=\"veg-hero\">\n    <span class=\"veg-hero-label\">ViaEnglish Practice Hub<\/span>\n    <h1>English <em>Grammar<\/em> Exercises<\/h1>\n    <p>Choose a grammar topic below to practice with exercises.<\/p>\n  <\/div>\n\n  <!-- \u2500\u2500 Search \u2500\u2500 -->\n  <div class=\"veg-search-wrap\">\n    <span class=\"veg-search-icon\">\n      <!-- Search icon -->\n      <svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\"\n           stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n      <\/svg>\n    <\/span>\n    <input\n      class=\"veg-search\"\n      id=\"vegSearch\"\n      type=\"text\"\n      placeholder=\"Search a topic\u2026 e.g. Present Perfect, Conditionals\"\n      autocomplete=\"off\"\n      aria-label=\"Search grammar topics\"\n    \/>\n  <\/div>\n\n  <!-- No results message -->\n  <p class=\"veg-no-results\" id=\"vegNoResults\">No topics found. Try a different search term.<\/p>\n\n  <!-- ================================================================\n       CATEGORIES \u2014 to add a new category, duplicate a .veg-section block\n       To add a card, duplicate a <a class=\"veg-card\"> inside .veg-grid\n       Replace \"#\" with the actual URL of the exercise page.\n       ================================================================ -->\n\n  <!-- \u2500\u2500 1. Verb Tenses \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-verb-tenses\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#e8f2fb;color:#2e6fa8;\">\u23f1<\/div>\n      <span class=\"veg-section-title\">Verb Tenses<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">9 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"simple present\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Simple Present<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"present continuous\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Present Continuous<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"simple past\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Simple Past<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"past continuous\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Past Continuous<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"present perfect\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Present Perfect<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"present perfect continuous\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Present Perfect Continuous<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"past perfect\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Past Perfect<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"future forms will going to\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Future Forms<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"mixed tenses revision\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Mixed Tenses<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level all\">All<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 2. Modal Verbs \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-modals\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#f5eefb;color:#7b4ea0;\">\u25c8<\/div>\n      <span class=\"veg-section-title\">Modal Verbs<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">5 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"can could ability permission\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Can \/ Could<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"must should obligation advice\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Must \/ Should<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"may might possibility\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">May \/ Might<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"have to need to obligation\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Have to \/ Need to<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"modal verbs deduction must can't could\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Modals of Deduction<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 3. Articles & Determiners \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-articles\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#fff8e1;color:#b8860b;\">Aa<\/div>\n      <span class=\"veg-section-title\">Articles &amp; Determiners<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">4 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"articles a an the\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">A \/ An \/ The<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"zero article no article\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Zero Article<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"quantifiers some any much many few little\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Quantifiers<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"determiners this that these those each every\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">This \/ That \/ These \/ Those<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 4. Pronouns \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-pronouns\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#e6f6ef;color:#2d8a5e;\">\ud83d\udc64<\/div>\n      <span class=\"veg-section-title\">Pronouns<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">4 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"subject pronouns i you he she it we they\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Subject Pronouns<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"object pronouns me him her us them\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Object Pronouns<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"possessive pronouns adjectives mine yours\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Possessive Pronouns<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"reflexive pronouns myself yourself himself\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Reflexive Pronouns<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 5. Prepositions \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-prepositions\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#fde8e8;color:#c0392b;\">\u2194<\/div>\n      <span class=\"veg-section-title\">Prepositions<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">4 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"prepositions of time at on in\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Prepositions of Time<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"prepositions of place in on at under above\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Prepositions of Place<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"prepositions of movement to from through\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Prepositions of Movement<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"prepositions fixed expressions interested in good at\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Prepositions in Expressions<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 6. Conditionals \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-conditionals\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#e8f2fb;color:#2e6fa8;\">\u21d2<\/div>\n      <span class=\"veg-section-title\">Conditionals<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">4 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"zero conditional if\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Zero Conditional<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"first conditional if will real\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">First Conditional<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"second conditional if would unreal hypothetical\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Second Conditional<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"third conditional if had would have past unreal\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Third Conditional<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 7. Passive Voice \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-passive\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#f5eefb;color:#7b4ea0;\">\u27f3<\/div>\n      <span class=\"veg-section-title\">Passive Voice<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">3 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"passive voice present simple is are made\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Passive \u2014 Present Simple<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"passive voice past simple was were made\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Passive \u2014 Past Simple<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"passive voice mixed tenses advanced\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Passive \u2014 Mixed Tenses<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 8. Reported Speech \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-reported\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#fff8e1;color:#b8860b;\">\ud83d\udcac<\/div>\n      <span class=\"veg-section-title\">Reported Speech<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">3 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"reported speech statements said told\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Reported Statements<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"reported questions asked wanted to know\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Reported Questions<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"reported commands requests told asked to\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Reported Commands<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 9. Questions \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-questions\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#e6f6ef;color:#2d8a5e;\">?<\/div>\n      <span class=\"veg-section-title\">Questions<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">4 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"yes no questions do does did\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Yes \/ No Questions<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"wh questions who what where when why how\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Wh- Questions<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"question tags isn't it don't they\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Question Tags<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"indirect questions could you tell me if whether\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Indirect Questions<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 10. Adjectives & Adverbs \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-adj-adv\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#fde8e8;color:#c0392b;\">\u2726<\/div>\n      <span class=\"veg-section-title\">Adjectives &amp; Adverbs<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">4 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"adjectives description order\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Adjective Order<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"comparatives superlatives bigger the biggest\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Comparatives &amp; Superlatives<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"adverbs frequency always usually sometimes never\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Adverbs of Frequency<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a1\">A1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"adverbs manner quickly slowly carefully\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Adverbs of Manner<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 11. Gerunds & Infinitives \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-gerunds\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#e8f2fb;color:#2e6fa8;\">\u221e<\/div>\n      <span class=\"veg-section-title\">Gerunds &amp; Infinitives<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">3 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"gerunds verb ing enjoy like love hate\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Gerunds as Subject \/ Object<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"infinitives to want decide plan hope\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Verbs + Infinitive<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"gerunds infinitives both stop remember try\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Gerund or Infinitive?<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 12. Conjunctions \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-conjunctions\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#f5eefb;color:#7b4ea0;\">+<\/div>\n      <span class=\"veg-section-title\">Conjunctions<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">3 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"coordinating conjunctions and but or so\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Coordinating Conjunctions<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level a2\">A2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"subordinating conjunctions because although when while\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Subordinating Conjunctions<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"relative clauses who which that whose where\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Relative Clauses<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 13. Phrasal Verbs \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-phrasal\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#e6f6ef;color:#2d8a5e;\">\u2197<\/div>\n      <span class=\"veg-section-title\">Phrasal Verbs<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">3 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"phrasal verbs common everyday give up look for\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Common Phrasal Verbs<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"separable inseparable phrasal verbs put off call back\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Separable vs Inseparable<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"phrasal verbs business work professional\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Phrasal Verbs at Work<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 14. Vocabulary Practice \u2500\u2500 -->\n  <div class=\"veg-section\" id=\"sec-vocab\">\n    <div class=\"veg-section-header\">\n      <div class=\"veg-section-icon\" style=\"background:#fff8e1;color:#b8860b;\">\ud83d\udcd6<\/div>\n      <span class=\"veg-section-title\">Vocabulary Practice<\/span>\n      <div class=\"veg-section-line\"><\/div>\n      <span class=\"veg-section-count\">5 topics<\/span>\n    <\/div>\n    <div class=\"veg-grid\">\n      <a href=\"#\" class=\"veg-card\" data-name=\"collocations common make do have go\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Common Collocations<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"false friends words similar languages\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">False Friends<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b1\">B1<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"idioms expressions meaning figurative\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Common Idioms<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"word formation prefixes suffixes\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Word Formation<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level b2\">B2<\/span>\n      <\/a>\n      <a href=\"#\" class=\"veg-card\" data-name=\"synonyms antonyms vocabulary range\">\n        <div class=\"veg-card-top\">\n          <span class=\"veg-card-name\">Synonyms &amp; Antonyms<\/span>\n          <svg class=\"veg-card-arrow\" width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n        <\/div>\n        <span class=\"veg-card-level all\">All<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 Stats bar \u2500\u2500 -->\n  <div class=\"veg-stats\">\n    <div class=\"veg-stat\">\n      <div class=\"veg-stat-num\">5<span>0+<\/span><\/div>\n      <div class=\"veg-stat-label\">Exercises<\/div>\n    <\/div>\n    <div class=\"veg-stat\">\n      <div class=\"veg-stat-num\"><span>14<\/span><\/div>\n      <div class=\"veg-stat-label\">Topics<\/div>\n    <\/div>\n    <div class=\"veg-stat\">\n      <div class=\"veg-stat-num\"><span>A1<\/span>\u2013B2<\/div>\n      <div class=\"veg-stat-label\">All Levels<\/div>\n    <\/div>\n  <\/div>\n\n<\/div><!-- \/veg-index -->\n\n<!-- \u2500\u2500 Script \u2500\u2500 -->\n<script>\n(function () {\n  \/* \u2500\u2500 Stagger card entrance animations \u2500\u2500 *\/\n  var cards = document.querySelectorAll('.veg-card');\n  cards.forEach(function (card, i) {\n    card.style.animationDelay = (i * 0.04) + 's';\n  });\n\n  \/* \u2500\u2500 Search \/ filter \u2500\u2500 *\/\n  var searchInput  = document.getElementById('vegSearch');\n  var noResults    = document.getElementById('vegNoResults');\n  var sections     = document.querySelectorAll('.veg-section');\n\n  searchInput.addEventListener('input', function () {\n    var query = this.value.trim().toLowerCase();\n\n    var anyVisible = false;\n\n    sections.forEach(function (section) {\n      var sectionCards  = section.querySelectorAll('.veg-card');\n      var sectionHasHit = false;\n\n      sectionCards.forEach(function (card) {\n        \/* data-name holds searchable keywords for that card *\/\n        var keywords = (card.getAttribute('data-name') || '') + ' ' +\n                       (card.querySelector('.veg-card-name').textContent || '');\n\n        if (query === '' || keywords.toLowerCase().indexOf(query) !== -1) {\n          card.classList.remove('veg-hidden');\n          sectionHasHit = true;\n          anyVisible    = true;\n        } else {\n          card.classList.add('veg-hidden');\n        }\n      });\n\n      \/* Hide entire section if no cards match *\/\n      if (sectionHasHit || query === '') {\n        section.classList.remove('veg-hidden');\n      } else {\n        section.classList.add('veg-hidden');\n      }\n    });\n\n    \/* Show\/hide \"no results\" message *\/\n    noResults.style.display = (!anyVisible && query !== '') ? 'block' : 'none';\n  });\n})();\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>ViaEnglish Practice Hub English Grammar Exercises Choose a grammar topic below to practice with exercises. No topics found. Try a different search term. \u23f1 Verb Tenses 9 topics Simple Present A1 Present Continuous A2 Simple Past A2 Past Continuous B1 Present Perfect B1 Present Perfect Continuous B2 Past Perfect B2 Future Forms A2 Mixed Tenses [&hellip;]<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1341","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.9 (Yoast SEO v22.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Online Grammar - ViaEnglish<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/viaenglish.com\/en\/online-grammar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Online Grammar\" \/>\n<meta property=\"og:description\" content=\"ViaEnglish Practice Hub English Grammar Exercises Choose a grammar topic below to practice with exercises. No topics found. Try a different search term. \u23f1 Verb Tenses 9 topics Simple Present A1 Present Continuous A2 Simple Past A2 Past Continuous B1 Present Perfect B1 Present Perfect Continuous B2 Past Perfect B2 Future Forms A2 Mixed Tenses [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/viaenglish.com\/en\/online-grammar\/\" \/>\n<meta property=\"og:site_name\" content=\"ViaEnglish\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/viaenglish\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-22T17:45:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/viaenglish.com\/wp-content\/uploads\/2025\/09\/HomeViaEnglish.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1772\" \/>\n\t<meta property=\"og:image:height\" content=\"1772\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@viaenglish\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/viaenglish.com\/online-grammar\/\",\"url\":\"https:\/\/viaenglish.com\/online-grammar\/\",\"name\":\"Online Grammar - ViaEnglish\",\"isPartOf\":{\"@id\":\"https:\/\/viaenglish.com\/#website\"},\"datePublished\":\"2026-05-21T21:25:42+00:00\",\"dateModified\":\"2026-05-22T17:45:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/viaenglish.com\/online-grammar\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/viaenglish.com\/online-grammar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/viaenglish.com\/online-grammar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/viaenglish.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Online Grammar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/viaenglish.com\/#website\",\"url\":\"https:\/\/viaenglish.com\/\",\"name\":\"ViaEnglish\",\"description\":\"Escola de ingl\u00eas online com aulas ao vivo com o professor\",\"publisher\":{\"@id\":\"https:\/\/viaenglish.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/viaenglish.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/viaenglish.com\/#organization\",\"name\":\"ViaEnglish\",\"alternateName\":\"Via English\",\"url\":\"https:\/\/viaenglish.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/viaenglish.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/viaenglish.com\/wp-content\/uploads\/2024\/06\/logo_via_english_BRANCO.png\",\"contentUrl\":\"https:\/\/viaenglish.com\/wp-content\/uploads\/2024\/06\/logo_via_english_BRANCO.png\",\"width\":5490,\"height\":2025,\"caption\":\"ViaEnglish\"},\"image\":{\"@id\":\"https:\/\/viaenglish.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/viaenglish\",\"https:\/\/x.com\/viaenglish\",\"https:\/\/www.instagram.com\/viaenglish_international\/\",\"https:\/\/www.youtube.com\/channel\/UCsLt3RU46eJwQcHOzs9aGwA\",\"https:\/\/www.linkedin.com\/company\/16213086\"],\"description\":\"Escola de ingl\u00eas online com aulas ao vivo com o professor\",\"email\":\"viaenglish@vianenglish.com\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Online Grammar - ViaEnglish","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/viaenglish.com\/en\/online-grammar\/","og_locale":"en_US","og_type":"article","og_title":"Online Grammar","og_description":"ViaEnglish Practice Hub English Grammar Exercises Choose a grammar topic below to practice with exercises. No topics found. Try a different search term. \u23f1 Verb Tenses 9 topics Simple Present A1 Present Continuous A2 Simple Past A2 Past Continuous B1 Present Perfect B1 Present Perfect Continuous B2 Past Perfect B2 Future Forms A2 Mixed Tenses [&hellip;]","og_url":"https:\/\/viaenglish.com\/en\/online-grammar\/","og_site_name":"ViaEnglish","article_publisher":"https:\/\/www.facebook.com\/viaenglish","article_modified_time":"2026-05-22T17:45:57+00:00","og_image":[{"width":1772,"height":1772,"url":"https:\/\/viaenglish.com\/wp-content\/uploads\/2025\/09\/HomeViaEnglish.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@viaenglish","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/viaenglish.com\/online-grammar\/","url":"https:\/\/viaenglish.com\/online-grammar\/","name":"Online Grammar - ViaEnglish","isPartOf":{"@id":"https:\/\/viaenglish.com\/#website"},"datePublished":"2026-05-21T21:25:42+00:00","dateModified":"2026-05-22T17:45:57+00:00","breadcrumb":{"@id":"https:\/\/viaenglish.com\/online-grammar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/viaenglish.com\/online-grammar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/viaenglish.com\/online-grammar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/viaenglish.com\/"},{"@type":"ListItem","position":2,"name":"Online Grammar"}]},{"@type":"WebSite","@id":"https:\/\/viaenglish.com\/#website","url":"https:\/\/viaenglish.com\/","name":"ViaEnglish","description":"Escola de ingl\u00eas online com aulas ao vivo com o professor","publisher":{"@id":"https:\/\/viaenglish.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/viaenglish.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/viaenglish.com\/#organization","name":"ViaEnglish","alternateName":"Via English","url":"https:\/\/viaenglish.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/viaenglish.com\/#\/schema\/logo\/image\/","url":"https:\/\/viaenglish.com\/wp-content\/uploads\/2024\/06\/logo_via_english_BRANCO.png","contentUrl":"https:\/\/viaenglish.com\/wp-content\/uploads\/2024\/06\/logo_via_english_BRANCO.png","width":5490,"height":2025,"caption":"ViaEnglish"},"image":{"@id":"https:\/\/viaenglish.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/viaenglish","https:\/\/x.com\/viaenglish","https:\/\/www.instagram.com\/viaenglish_international\/","https:\/\/www.youtube.com\/channel\/UCsLt3RU46eJwQcHOzs9aGwA","https:\/\/www.linkedin.com\/company\/16213086"],"description":"Escola de ingl\u00eas online com aulas ao vivo com o professor","email":"viaenglish@vianenglish.com"}]}},"_links":{"self":[{"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/pages\/1341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/comments?post=1341"}],"version-history":[{"count":16,"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/pages\/1341\/revisions"}],"predecessor-version":[{"id":1449,"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/pages\/1341\/revisions\/1449"}],"wp:attachment":[{"href":"https:\/\/viaenglish.com\/en\/wp-json\/wp\/v2\/media?parent=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}