🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
    (Added Edited template with July 12, 2025.)
    No edit summary
    Tag: 2017 source edit
     
    Line 1: Line 1:
    {{Edited|July|12|2025}}
    <html>
    <html>
    <style>
        <style>
        .model-craft-container {
            * {
          width: 100%;
                margin: 0;
          background: #E2F5FA;
                padding: 0;
          padding: 1rem;
                box-sizing: border-box;
          box-sizing: border-box;
            }
          display: flex;
     
          align-items: center;
            :root {
        }
                --primary-color: #667eea;
                --secondary-color: #764ba2;
        .model-craft-image-wrapper {
                --accent-orange: #ff9a56;
        flex: 0 0 auto;
                --text-primary: #333333;
        margin-bottom: 1rem;
                --text-secondary: #666666;
        width: 80%;
                --border-color: #e0e0e0;
                --card-bg: #f8f9fa;
            }
     
     
            /* Hero Section */
            .hero-section {
                padding: 0.5rem 2rem;
                max-width: 1200px;
                margin: 0 auto;
            }
     
            .hero-content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 3rem;
                align-items: center;
            }
     
    h1, h2, h3, h4, h5, h6 {
      border: none !important;
    }
     
            .hero-title {
                font-size: 3.5rem;
                font-weight: 800;
                line-height: 1.1;
                margin-bottom: 1rem;
                color: var(--text-primary);
            }
     
            .gradient-text {
                background: linear-gradient(135deg, #667eea, #764ba2);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
     
            .hero-description {
                font-size: 1.25rem;
                color: var(--text-secondary);
                margin-bottom: 2rem;
            }
     
            .cta-button {
                display: inline-block;
                padding: 0.875rem 2rem;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                color: white;
                text-decoration: none;
                border-radius: 8px;
                font-weight: 600;
                font-size: 1.1rem;
            }
     
            /* Image Placeholder */
            .hero-visual {
                display: flex;
                align-items: center;
                justify-content: center;
            }
     
            .image-placeholder {
                width: 100%;
                max-width: 400px;
                height: 300px;
                background: var(--card-bg);
                border: 2px dashed var(--border-color);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--text-secondary);
                font-size: 1.1rem;
            }
     
    .model-craft-image {
         max-width: 400px;
         max-width: 400px;
        height: 300px;
        border: none;
        display: block;
    }
    }
        .model-craft-image-wrapper img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
        .model-craft-content {
          flex: 1 1 auto;
          padding: 1rem;
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
        .model-craft-title {
          font-size: 2.25em;
          font-family: Outfit, sans-serif;
          font-weight: 700;
          text-transform: uppercase;
        }
        .gradient-text {
          background: linear-gradient(90deg, #112B3C 56.4%, rgba(255, 174, 109, 0.58) 94.5%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .model-craft-description {
          font-size: 1em;
          font-family: Outfit, sans-serif;
          font-weight: 400;
          color: black;
        }
        @media (max-width: 480px) {
          .model-craft-container {
            flex-direction: column;
          }
          .model-craft-image-wrapper {
            display: none;
          }
          .model-craft-content {
            width: 100%;
          }
        }


    .model-craft-steps-container {
            /* Steps Section */
          display: flex;
            .steps-section {
          flex-wrap: wrap;
                padding: 4rem 2rem;
          gap: 10px;
                max-width: 1400px;
          justify-content: space-between;
                margin: 0 auto;
        }
            }
     
        .model-craft-step {
            .section-header {
          max-width: 48%;
                text-align: center;
          width: 100%;
                margin-bottom: 3rem;
          padding: 20px 10px;
            }
          position: relative;
     
          box-sizing: border-box;
            .section-title {
        }
                font-size: 2.5rem;
                font-weight: 800;
        .model-craft-step-content {
                margin-bottom: 0.5rem;
          background: rgba(255, 218.31, 187, 0.45);
                color: var(--text-primary);
          border-radius: 20px;
            }
          padding: 20px;
     
          margin-left: 100px;
            .section-subtitle {
          height:150px;
                font-size: 1.25rem;
        }
                color: var(--text-secondary);
            }
        .model-craft-step-number {
     
          width: 80px;
            .steps-grid {
          height: 80px;
                display: grid;
          position: absolute;
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          left: 20px;
                gap: 1.5rem;
          top: 40px;
            }
          background: rgba(255, 218.31, 187, 0.45);
     
          border-radius: 50%;
            .step-card {
          display: flex;
                background: var(--card-bg);
          justify-content: center;
                border: 1px solid var(--border-color);
          align-items: center;
                border-radius: 12px;
          color: black;
                padding: 2rem;
          font-size: 2em;
            }
          font-family: Outfit, sans-serif;
     
          font-weight: 700;
            .step-number {
          text-transform: uppercase;
                width: 50px;
        }
                height: 50px;
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        .model-craft-step-title {
                border-radius: 50%;
          color: black;
                display: flex;
          font-size: 1.5em;
                align-items: center;
          font-family: Outfit, sans-serif;
                justify-content: center;
          font-weight: 600;
                font-size: 1.25rem;
          text-transform: capitalize;
                font-weight: bold;
          margin-bottom: 20px;
                color: white;
        }
                margin-bottom: 1rem;
            }
        .model-craft-step-description {
     
          color: black;
            .step-title {
          font-size: 1em;
                font-size: 1.375rem;
          font-family: Outfit, sans-serif;
                font-weight: 700;
          font-weight: 400;
                margin-bottom: 0.75rem;
        }
                color: var(--text-primary);
            }
        .model-craft-step-description u {
     
          text-decoration: underline;
            .step-description {
        }
                color: var(--text-secondary);
            }
        @media (max-width: 768px) {
     
          .model-craft-step {
            .step-description a {
            max-width: 100%;
                color: var(--primary-color);
          }
                text-decoration: none;
            }
          .model-craft-step-content {
     
            margin-left: 0;
            .step-description a:hover {
          }
                text-decoration: underline;
            }
          .model-craft-step-number {
     
            display: none;
            .step-description ul {
          }
                list-style: none;
                padding-left: 0;
          .model-craft-step-title {
            }
            font-size: 1.5em;
     
          }
            .step-description li {
                position: relative;
          .model-craft-step-description {
                padding-left: 1.5rem;
            font-size: 1em;
                margin-bottom: 0.5rem;
          }
            }
        }
     
            .step-description li::before {
        @media (max-width: 480px) {
                content: '▸';
          .model-craft-step-title {
                position: absolute;
            font-size: 1.5em;
                left: 0;
          }
                color: var(--accent-orange);
                font-weight: bold;
          .model-craft-step-description {
            }
            font-size: 1em;
     
          }
            /* Responsive Design */
        }
            @media (max-width: 768px) {
      </style>
                .hero-content {
                    grid-template-columns: 1fr;
      <div class="model-craft-container">
                    text-align: center;
        <div class="model-craft-image-wrapper">
                }
          <img src="/images/c/ce/3d-blocks-blocks-composition-78_1.png" alt="Image" />
     
        </div>
                .hero-visual {
         <div class="model-craft-content">
                    order: -1;
          <div class="model-craft-title">
                    margin-bottom: 2rem;
            <span>MDRIVEn </span>
                }
            <span class="gradient-text">MODELCRAFT</span>
     
          </div>
                .hero-title {
          <div class="model-craft-description">
                    font-size: 2.5rem;
            ModelCraft is your introduction to the world of modeling through the MDriven lens. Here, you will gain a thorough grasp of modeling basics, understand UML, and master ViewModels.
                }
          </div>
     
        </div>
                .steps-grid {
      </div>
                    grid-template-columns: 1fr;
    <div class="model-craft-steps-container">
                }
    </html>
            }
    {{#widget:ModelCraft|step_number=1|step_title=Introduction to Software Modeling|step_description=What is a  <a href="/index.php/Documentation:Model" style="color: black; text-decoration: underline;"> Model </a> and why is it essential?}}
        </style>
    {{#widget:ModelCraft|step_number=5|step_title=Object-relational mapping (ORM)|step_description= <ul><li> <a href="/index.php/Documentation:OR_Mapping" style="color: black; text-decoration: underline;"> ORM </a> </li>
        <!-- Hero Section -->
    <li>ORM’s role in connecting object-oriented code to relational databases. </li>
         <section class="hero-section">
    <li>Popular ORM frameworks (e.g., Hibernate, Entity..)</li></ul>}}
            <div class="hero-content">
    {{#widget:ModelCraft|step_number=2|step_title=Model driven development|step_description=<ul><li>The concept of  <a href="/index.php/BestPractices:Model_Driven" style="color: black; text-decoration: underline;"> MDD </a> and its advantages.</li>
                <div class="hero-text">
    <li> <a href="/index.php/Documentation:Modal_views" style="color: black; text-decoration: underline;"> Modal views </a> </li>  
                    <h1 class="hero-title">
    <li> <a href="/index.php/Training:Praise_to_UML" style="color: black; text-decoration: underline;"> Introduction to UML </a> </li> </ul>}}
                        MDriven <br>
    {{#widget:ModelCraft|step_number=6|step_title=Codegen & Adding Code to Models|step_description= <ul><li> <a href="/index.php/Documentation:CodeDress" style="color: black; text-decoration: underline;"> CodeDress </a> </li>
                        <span class="gradient-text">ModelCraft</span>
    <li> Code vs Model and the relationship between them </li> </ul>}}
                    </h1>
    {{#widget:ModelCraft|step_number=3|step_title=UML (Unified Modeling Language)|step_description= <a href="/index.php/Documentation:UML_School" style="color: black; text-decoration: underline;"> UML School </a> }}
                    <p class="hero-description">
    {{#widget:ModelCraft|step_number=7|step_title=Debugging Models|step_description=<ul><li>Common pitfalls in modeling.</li>
                        Master the art of software modeling through the MDriven lens.  
    <li>  <a href="/index.php/Documentation:Using_the_model_debugger_to_change_the_model_itself" style="color: black; text-decoration: underline;"> How to debug models effectively. </a> </li></ul>}}
                        From UML fundamentals to advanced ViewModels, embark on a journey
    {{#widget:ModelCraft|step_number=4|step_title=Viewmodels|step_description=<ul> <li> <a href="/index.php/Training:ViewModel" style="color: black; text-decoration: underline;"> Introduction to ViewModels </a> </li>
                        that transforms how you architect software.
    <li> <a href="/index.php/Documentation:ViewModel_validations" style="color: black; text-decoration: underline;"> ViewModel validations </a> </li>
                    </p>
    <li> How to verify ViewModels </li> </ul>}}
                    <a href="#steps" class="cta-button">Start Your Journey</a>
    {{#widget:ModelCraft|step_number=8|step_title=MDriven Designer|step_description= <a href="/index.php/Documentation:MDriven_Designer_Features_%26_Settings" style="color: black; text-decoration: underline;"> Introduction to MDriven Designer features </a> }}
                </div>
    <html>
                <div class="hero-visual">
    </div>
                    <div class="image-placeholder">
                        <img src="/images/model_craft.webp" class="model-craft-image">
                    </div>
                </div>
            </div>
        </section>
     
        <!-- Steps Section -->
        <section id="steps" class="steps-section">
            <div class="section-header">
                <h2 class="section-title">Your Learning <span class="gradient-text">Path</span></h2>
                <p class="section-subtitle">Eight comprehensive modules to modeling mastery</p>
            </div>
           
            <div class="steps-grid">
                <div class="step-card">
                    <div class="step-number">1</div>
                    <h3 class="step-title">Introduction to Software Modeling</h3>
                    <p class="step-description">
                        What is a <a href="/index.php/Documentation:Model">Model</a> and why is it essential?
                    </p>
                </div>
     
                <div class="step-card">
                    <div class="step-number">2</div>
                    <h3 class="step-title">Model Driven Development</h3>
                    <div class="step-description">
                        <ul>
                            <li>The concept of <a href="/index.php/BestPractices:Model_Driven">MDD</a> and its advantages</li>
                            <li><a href="/index.php/Documentation:Modal_views">Modal views</a></li>
                            <li><a href="/index.php/Training:Praise_to_UML">Introduction to UML</a></li>
                        </ul>
                    </div>
                </div>
     
                <div class="step-card">
                    <div class="step-number">3</div>
                    <h3 class="step-title">UML (Unified Modeling Language)</h3>
                    <p class="step-description">
                        <a href="/index.php/Documentation:UML_School">UML School</a>
                    </p>
                </div>
     
                <div class="step-card">
                    <div class="step-number">4</div>
                    <h3 class="step-title">ViewModels</h3>
                    <div class="step-description">
                        <ul>
                            <li><a href="/index.php/Training:ViewModel">Introduction to ViewModels</a></li>
                            <li><a href="/index.php/Documentation:ViewModel_validations">ViewModel validations</a></li>
                            <li>How to verify ViewModels</li>
                        </ul>
                    </div>
                </div>
     
                <div class="step-card">
                    <div class="step-number">5</div>
                    <h3 class="step-title">Object-Relational Mapping (ORM)</h3>
                    <div class="step-description">
                        <ul>
                            <li><a href="/index.php/Documentation:OR_Mapping">ORM</a></li>
                            <li>ORM's role in connecting object-oriented code to relational databases</li>
                            <li>Popular ORM frameworks (e.g., Hibernate, Entity..)</li>
                        </ul>
                    </div>
                </div>
     
                <div class="step-card">
                    <div class="step-number">6</div>
                    <h3 class="step-title">Codegen & Adding Code to Models</h3>
                    <div class="step-description">
                        <ul>
                            <li><a href="/index.php/Documentation:CodeDress">CodeDress</a></li>
                            <li>Code vs Model and the relationship between them</li>
                        </ul>
                    </div>
                </div>
     
                <div class="step-card">
                    <div class="step-number">7</div>
                    <h3 class="step-title">Debugging Models</h3>
                    <div class="step-description">
                        <ul>
                            <li>Common pitfalls in modeling</li>
                            <li><a href="/index.php/Documentation:Using_the_model_debugger_to_change_the_model_itself">How to debug models effectively</a></li>
                        </ul>
                    </div>
                </div>
     
                <div class="step-card">
                    <div class="step-number">8</div>
                    <h3 class="step-title">MDriven Designer</h3>
                    <p class="step-description">
                        <a href="/index.php/Documentation:MDriven_Designer_Features_%26_Settings">Introduction to MDriven Designer features</a>
                    </p>
                </div>
            </div>
        </section>
     
        <script>
            // Simple smooth scrolling
            document.querySelector('.cta-button').addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector('#steps').scrollIntoView({
                    behavior: 'smooth'
                });
            });
        </script>
    </html>
    </html>
    __HIDECREDIT__
    __NOBREADCRUMBS__

    Latest revision as of 02:04, 21 July 2025

    MDriven
    ModelCraft

    Master the art of software modeling through the MDriven lens. From UML fundamentals to advanced ViewModels, embark on a journey that transforms how you architect software.

    Start Your Journey

    Your Learning Path

    Eight comprehensive modules to modeling mastery

    1

    Introduction to Software Modeling

    What is a Model and why is it essential?

    2

    Model Driven Development

    3

    UML (Unified Modeling Language)

    UML School

    4

    ViewModels

    5

    Object-Relational Mapping (ORM)

    • ORM
    • ORM's role in connecting object-oriented code to relational databases
    • Popular ORM frameworks (e.g., Hibernate, Entity..)
    6

    Codegen & Adding Code to Models

    • CodeDress
    • Code vs Model and the relationship between them
    7

    Debugging Models

    8

    MDriven Designer

    Introduction to MDriven Designer features

    __HIDECREDIT__


    Retrieved from "https://wiki.mdriven.net/index.php?title=Training:ModelCraft&oldid=27573"

    © 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