🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
    Bootcamp/Start/Levels/Beginner
    No edit summary
    Tag: 2017 source edit
    No edit summary
    Tag: 2017 source edit
    (3 intermediate revisions by the same user not shown)
    Line 2: Line 2:
       <style>
       <style>
    .container {
    .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) {
    @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 {
    .headerContent {
         padding: 5em;
         padding: 5em;
    }
    }
    @media (max-width: 767px) {
    @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>
         </style>
    Line 131: Line 161:
         <div class="container">
         <div class="container">
             <div class="info-box-container">
             <div class="info-box-container">
                 <img src="https://wiki.mdriven.net/images/0/00/Person_beginner.png" alt="Icon" class="image-icon">
                 <img src="https://wiki.mdriven.net/images/6/6e/Person_beginner.png" alt="Icon" class="image-icon">
                 <div class="info-box">
                 <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.
                     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.

    Revision as of 23:26, 18 August 2024

    This page was created by Edgar on 2024-08-12. Last edited by Stephanie on 2025-03-12.

    Training
    BEGINNER: CONTENT & OUTLINE
    BEGIN YOUR JOURNEY
    Explore how MDriven’s modeling tools can help you achieve your business goals.
    Icon
    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

    Retrieved from "https://wiki.mdriven.net/index.php?title=Training:Bootcamp/Start/Levels/Beginner&oldid=22650"

    © MDRIVEN. All Rights Reserved

    API Docs
    MDriven World| Portal| Blog| YouTube| StackOverflow| Facebook

    © MDRIVEN. All Rights Reserved

    MDriven Chat

    How would you like to chat today?

    Setting up your conversation…

    This may take a few moments