View source for Training:Bootcamp/Levels/Intermediate

<html>
    
<style>
.container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 20px;
        }
        .info-box-container {
            display: flex;
            width: 90%;
            max-width: 1200px;
            position: relative;
            margin-bottom: -20px;
        }
        .image-icon {
            width: 200px;
            height: auto;
            margin-right: 20px;
        }
        .info-box {
            flex-grow: 1;
            border-radius: 20px;
            background: rgba(241, 217, 143, 0.4);
            padding: 20px;
            margin-left: 60px; /* Aligns with the steps */
        }
        .section {
            width: 90%;
            max-width: 1200px;
            margin: 40px 0 20px; /* Adjust margin to align with the icon-box */
            padding: 20px;
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            gap: 10px 20px;
            align-items: start;
        }
        .chapter {
            background: #F1D98F;
            padding: 10px 20px;
            font-size: 1.5em;
            font-weight: 600;
            grid-row: 1 / 2;
        }
        .steps {
            background: rgba(241, 217, 143, 0.4);
            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(241, 217, 143, 0.1);
        }

@media (max-width: 768px) {
            .chapter, .steps, .description {
                font-size: 1em;
            }
            .section {
                padding: 10px;
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
            }
            .icon-box-container, .section {
                width: 100%;
            }
            .chapter {
                grid-column: 1 / 2;
                grid-row: 1 / 2;
            }
            .steps {
                grid-column: 1 / 2;
                grid-row: 2 / 3;
            }
            .description {
                grid-column: 1 / 2;
                grid-row: 3 / 4;
            }
        }
.headerContent {
    padding: 5em;
}
@media (max-width: 767px) {
	.headerContent {
		padding: 2rem 1em;
		max-width: none;
	}
	.heading {
		font-size: 1.5em;
	}
	.sub-heading {
		font-size: 1em;
	}
	.description {
		font-size: 0.875em;
	}
	.input-container {
		max-width: none;
		height: auto;
	}
	.search-icon {
		margin-left: 1em;
	}
	.search-input {
		padding-left: 1em;
		padding-right: 1em;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}
    </style>
<div style="background: linear-gradient(94deg, #E2F5FA 0%, #F7FAFC 49%, #FFDABB 100%);">
  <div class="headerContent" style="width: auto; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;">
    <div style="color: #44546F;">Training</div>
    <div class="heading" style="color: #112B3C; font-size: 2.25em; font-weight: 700; text-transform: uppercase;">INTERMEDIATE: CONTENT & OUTLINE</div>
    <span style="color: black; font-size: 16px; word-wrap: break-word"><span style="font-weight:bold;">BEGIN YOUR JOURNEY</span></br>
Explore how MDriven’s modeling tools can help you achieve your business goals. </span>
  </div>
</div>
    <div class="container">
    <!-- Image and Box aligned with the steps part -->
    <div class="info-box-container">
        <div class="info-box">
            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!
        </div>
        <img src="https://wiki.mdriven.net/images/0/00/Person_intermediate.png" alt="Icon" class="image-icon">
</div>
<!-- Section 1 (Chapter 4) -->
<div class="section">
    <div class="chapter">Chapter 4</div>
    <div class="steps">Steps 106 - 145: Action Language and OCL-PS</div>
    <div class="description">
</html>
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Read the Manifest on MDriven’s view of what a line of business application needs]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Introduction to the Seeker Form]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Understand the meaning of “null” and how to use the “isnull” operator]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Introduction to Action language]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Test the assign operator ( := )]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Use the action operator separator semicolon ( ; )]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Introduction to OCL-PS and search expressions]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Test the use of search expressions]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_4| Read about Seeker logic]]
<html>
    </div>
</div>

<!-- Section 2 (Chapter 5) -->
<div class="section">
    <div class="chapter">Chapter 5</div>
    <div class="steps">Steps 146 - 182: Different Types of Actions</div>
    <div class="description">
</html>
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| How to navigate to the Action Editor]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| Introduction to Global actions]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| Set MenuGroups in the Action Editor]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| Explore ways to access ViewModels]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| Set Sort order on actions]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| Introduction to Class actions]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| Introduction to ViewModel actions]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_5| Add a ViewModel placed button to your app]]
<html>
    </div>
</div>

<!-- Section 3 (Chapter 6) -->
<div class="section">
    <div class="chapter">Chapter 6</div>
    <div class="steps">Steps 183 - 214: Picking Values</div>
    <div class="description">
</html>
* [[Training:The_1000_steps_program_to_MDriven_Chapter_6| Explanation to remove a button and ViewModel action]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_6| Create buttons and connect them to actions/action expressions]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_6| How to enable a User to search and select items]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_6| How to save or cancel operations]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_6| Fix a problem with searching with a blank input]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_6| Change cardinality to enable taking multiple items at once]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_6| Create an Association class]]
<html>
    </div>
</div>

<!-- Section 4 (Chapter 7) -->
<div class="section">
    <div class="chapter">Chapter 7</div>
    <div class="steps">Steps 215 - 238: Derived Attributes & Editable Grid Cells in Web UI</div>
    <div class="description">
</html>
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Rename a Class manually]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Use the Rename function]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Create a note on the diagram]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Add a new attribute]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Change the AttributeMode from Persistent to Derived]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Add a Tagged value]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Set an editable Date Picker]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_7| Add a SelectBox]]
<html>
    </div>
</div>

<!-- Section 5 (Chapter 8) -->
<div class="section">
    <div class="chapter">Chapter 8</div>
    <div class="steps">Steps 239 - 264: Responsive Design and Placing Containers</div>
    <div class="description">
</html>
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Introduction to Placing Containers]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Move ViewModel columns into a Placing Container]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Add a ViewModel column called Save]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Add 2 child-placing containers]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Set items to stretch]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Set items to wrap]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Name the Placing Containers]]
* [[Training:The_1000_steps_program_to_MDriven_Chapter_8| Test how to wrap columns and rows in Placing Containers]]
<html>
    </div>
</div>
</div>
</body>
</html>