Training:Bootcamp/Levels/Beginner: Difference between revisions

Bootcamp/Levels/Beginner

Revision as of 21:58, 4 August 2024

   <style>
       body {
           font-family: Outfit, sans-serif;
           background-color: #f7f7f7;
           margin: 0;
           padding: 0;
       }
       .container {
           display: flex;
           flex-direction: column;
           align-items: center;
           width: 100%;
           padding: 20px;
       }
       .icon-box-container {
           display: flex;
           width: 90%;
           max-width: 1200px;
           position: relative;
           margin-bottom: -20px; /* Adjust to make it appear closer to the section */
       }
       .image-icon {
           width: 40px;
           height: 40px;
           margin-right: 20px;
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
       }
       .info-box {
           flex-grow: 1;
           border-radius: 20px;
           background: rgba(255, 218, 187, 0.45);
           padding: 20px;
           margin-left: 60px; /* Aligns with the steps */
       }
       .section {
           background: rgba(255, 218, 187, 0.10);
           border: 1px solid rgba(0, 0, 0, 0.1);
           width: 90%;
           max-width: 1200px;
           margin: 40px 0 20px; /* Adjust margin to align with the icon-box */
           padding: 20px;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
           display: grid;
           grid-template-columns: auto 1fr;
           grid-template-rows: auto auto;
           gap: 10px 20px;
           align-items: start;
       }
       .chapter {
           background: #FFDABB;
           padding: 10px 20px;
           font-size: 1.5em;
           font-weight: 600;
           grid-row: 1 / 2;
       }
       .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;
       }

@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;
           }
       }
   </style>

</head> <body>

           <img src="path_to_your_image.png" alt="Icon" class="image-icon">

               This is the box with some information that aligns with the steps part.

Chapter 1

Steps 1 - 40: The Basics

Introduction to the 1000 Steps Program
Installation of MDriven Designer - through ClickOnce or locally
Getting started: Create an empty model and save your file
Introduction to a Class and Attribute
Get familiar with the OCL Debugger
Bring up a Seeker and add objects
Create an Association
Add a Multilink

Chapter 2

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

Save a copy with previous versions of your file
How to remove and restore deleted Associations
How to move Associations
Create an Association to self and note how it works in the tree
Understand Auto-diagrams and what happens when you delete attributes
Introduction to OCL (Object Constraint Language)
Become familiar with Autoforms and how to use them

Chapter 3

Steps 76 - 105: Creating a Web Application

Introduction to the MDriven Turnkeycore
Change the model into a web application
Use the ViewModel Editor to correct errors in ViewModels
Adopt an Autoform
How to handle naming and presentation of Columns
Introduction to Nested ViewModel class

</html>

This page was edited 153 days ago on 08/18/2024. What links here