Training:Bootcamp/Start/Levels/Beginner: Difference between revisions

Bootcamp/Start/Levels/Beginner

Latest revision as of 23:26, 18 August 2024

Training

BEGINNER: CONTENT & OUTLINE

BEGIN YOUR JOURNEY
Explore how MDriven’s modeling tools can help you achieve your business goals.

Throughout this training process, we'll familiarize you with the MDriven Designer using the example of a car management system. This includes creating elements like Cars and a Car Factory and adding people such as a Car Owner and Car Dealer. Every chapter adds a different piece to the overall system. Let's begin!

Chapter 1

Steps 1 - 40: The Basics

Chapter 2

Steps 41 - 75: Auto-diagram, OCL, and Autoforms

Chapter 3

Steps 76 - 105: Creating a Web Application

@@ Line 2: / Line 2: @@
     <style>
 .container {
-            display: flex;
+    display: flex;
-            flex-direction: column;
+    flex-direction: column;
-            align-items: center;
+    align-items: center;
-            width: 100%;
+    width: 100%;
-            padding: 20px;
+    padding: 20px;
-        }
+}
-        .info-box-container {
-            display: flex;
+.info-box-container {
-            width: 90%;
+    display: flex;
-            max-width: 1200px;
+    width: 90%;
-            position: relative;
+    max-width: 1200px;
-            margin-bottom: -20px;
+    position: relative;
-        }
+    margin-bottom: 20px;
-        .image-icon {
+    align-items: center;
-            width: 200px;
+}
-            height: auto;
-            margin-right: 20px;
+.info-box {
-        }
+    flex-grow: 1;
-        .info-box {
+    border-radius: 20px;
-            flex-grow: 1;
+    background: rgba(255, 218, 187, 0.45);
-            border-radius: 20px;
+    padding: 20px;
-            background: rgba(255, 218, 187, 0.45);
+    margin-left: 60px;
-            padding: 20px;
+    display: flex;
-            margin-left: 60px; /* Aligns with the steps */
+    align-items: flex-start;
-        }
+    justify-content: flex-start;
-        .section {
+    text-align: justify;
-            width: 90%;
+    min-height: 0;
-            max-width: 1200px;
+    height: auto;
-            margin: 40px 0 20px; /* Adjust margin to align with the icon-box */
+    padding: 30px;
-            padding: 20px;
+}
-            display: grid;
-            grid-template-columns: auto 1fr;
+.image-icon {
-            grid-template-rows: auto auto;
+    width: 200px;
-            gap: 10px 20px;
+    height: auto;
-            align-items: start;
+    margin-right: 20px;
-        }
+}
-        .chapter {
-            background: #FFDABB;
+.section {
-            padding: 10px 20px;
+    width: 90%;
-            font-size: 1.5em;
+    max-width: 1200px;
-            font-weight: 600;
+    margin: 40px 0 20px;
-            grid-row: 1 / 2;
+    /* Adjust margin to align with the icon-box */
-        }
+    padding: 20px;
-        .steps {
+    display: grid;
-            background: rgba(255, 218, 187, 0.40);
+    grid-template-columns: auto 1fr;
-            padding: 10px 20px;
+    grid-template-rows: auto auto;
-            font-size: 1.2em;
+    gap: 10px 20px;
-            font-weight: 400;
+    align-items: start;
-            grid-column: 2 / 3;
+}
-            grid-row: 1 / 2;
-        }
+.chapter {
-        .description {
+    background: #FFDABB;
-            font-size: 1em;
+    padding: 10px 20px;
-            font-weight: 300;
+    font-size: 1.5em;
-            color: black;
+    font-weight: 600;
-            grid-column: 2 / 3;
+    grid-row: 1 / 2;
-            grid-row: 2 / 3;
+}
-            background:rgba(255, 218, 187, 0.1);
-        }
+.steps {
+    background: rgba(255, 218, 187, 0.40);
+    padding: 10px 20px;
+    font-size: 1.2em;
+    font-weight: 400;
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+}
+.description {
+    font-size: 1em;
+    font-weight: 300;
+    color: black;
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+    background: rgba(255, 218, 187, 0.1);
+}
 @media (max-width: 768px) {
-            .chapter, .steps, .description {
+    .chapter, .steps, .description {
-                font-size: 1em;
+        font-size: 1em;
-            }
+    }
-            .section {
-                padding: 10px;
+.section {
-                grid-template-columns: 1fr;
+        padding: 10px;
-                grid-template-rows: auto auto auto;
+        grid-template-columns: 1fr;
-            }
+        grid-template-rows: auto auto auto;
-            .icon-box-container, .section {
+    }
-                width: 100%;
-            }
+.icon-box-container, .section {
-            .chapter {
+        width: 100%;
-                grid-column: 1 / 2;
+    }
-                grid-row: 1 / 2;
-            }
+.chapter {
-            .steps {
+        grid-column: 1 / 2;
-                grid-column: 1 / 2;
+        grid-row: 1 / 2;
-                grid-row: 2 / 3;
+    }
-            }
-            .description {
+.steps {
-                grid-column: 1 / 2;
+        grid-column: 1 / 2;
-                grid-row: 3 / 4;
+        grid-row: 2 / 3;
-            }
+    }
-        }
+.description {
+        grid-column: 1 / 2;
+        grid-row: 3 / 4;
+    }
+}
 .headerContent {
      padding: 5em;
 }
 @media (max-width: 767px) {
-	.headerContent {
+    .headerContent {
-		padding: 2rem 1em;
+        padding: 2rem 1em;
-		max-width: none;
+        max-width: none;
-	}
+    }
-	.heading {
-		font-size: 1.5em;
+.heading {
-	}
+        font-size: 1.5em;
-	.sub-heading {
+    }
-		font-size: 1em;
-	}
+.sub-heading {
-	.description {
+        font-size: 1em;
-		font-size: 0.875em;
+    }
-	}
-	.input-container {
+.description {
-		max-width: none;
+        font-size: 0.875em;
-		height: auto;
+    }
-	}
-	.search-icon {
+.input-container {
-		margin-left: 1em;
+        max-width: none;
-	}
+        height: auto;
-	.search-input {
+    }
-		padding-left: 1em;
-		padding-right: 1em;
+.search-icon {
-	}
+        margin-left: 1em;
-	img {
+    }
-		max-width: 100%;
-		height: auto;
+.search-input {
-	}
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+img {
+        max-width: 100%;
+        height: auto;
+    }
 }
      </style>