Bootcamp
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(29 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
    <style>
<style>
        body {
#mw-content-text.mw-body-content.mw-content-ltr {
         
    background-image: url('https://wiki.mdriven.net/images/background_desktop.webp');
        }
    background-size: cover;
     
    background-position: center;
        .title {
    background-repeat: no-repeat;
            font-size: 48px;
     min-height: 100vh;
            font-weight: 700;
            margin: 20px 0;
        }
        .subtitle {
            background: rgba(255, 218, 187, 0.45);
            font-size: 24px;
            font-weight: 700;
            margin: 0 auto;
            padding: 10px;
        }
        .section {
            display: flex;
            align-items: center;
            margin: 20px 0;
            padding: 10px;
        }
        .section-icon {
            flex: 1;
            text-align: left;
        }
        .section-text {
            flex: 3;
            font-size: 20px;
            font-weight: 700;
            text-align: left;
        }
        .section-arrow {
    flex: 1;
     text-align: right;
     display: flex;
     display: flex;
     justify-content: flex-end;
    flex-direction: column;
     justify-content: flex-start;
    align-items: flex-start;
    padding: 2em;
}
}


.section-arrow svg {
.top-box {
     transition: transform 0.3s ease;
     border-radius: 35px;
    background: rgba(255, 255, 255, 0.50);
    padding: 20px;
    max-width: 80%;
    width: 100%;
    text-align: left;
    font-size: 1.2em;
    color: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 4em;
    opacity: 0;
    animation: fadeIn 1.5s ease-out forwards;
}
}


.section-arrow svg.collapsed {
.top-box-title {
     transform: rotate(90deg);
     font-weight: bold;
    font-size: 1.5em;
}
}


.section-content {
.top-box-subtitle {
     display: none;
     font-weight: bold;
    font-size: 1.8em;
     margin-top: 10px;
     margin-top: 10px;
}
}


.section-content.expanded {
.top-box-description {
     display: block;
     font-size: 1.2em;
}
.section-content {
    display: none;
     margin-top: 10px;
     margin-top: 10px;
    border-radius: 30px;
    background: rgba(226, 245, 250, 0.75);
    padding: 20px;
}
}


.section-content.expanded {
.video-container {
     display: block;
     text-align: left;
    margin-bottom: 60px;
    opacity: 0;
    animation: fadeIn 1.5s ease-out 0.5s forwards;
}
}


.content-title {
.video-container iframe {
     font-weight:bold;
     width: 100%;
    max-width: 800px;
    height: 450px;
    border: none;
    border-radius: 15px;
}
}


     </style>
.next-step-button {
     <div class="container">
    display: inline-block;
        <div class="title">BOOTCAMP</div>
    margin-top: 20px;
        <div class="subtitle">BEFORE STARTING GUIDE</div>
    padding: 10px 20px;
    border-radius: 25px;
    background: #E2F5FA;
    color: #000;
    font-size: 1.1em;
    font-weight: bold;
     text-decoration: none;
     text-align: center;
    opacity: 0;
    animation: fadeIn 1.5s ease-out 1s forwards;
}


  <!-- Section 1 -->
.video-container iframe {
     
    width: 100%;
      <div class="section" onclick="toggleSection(this)">
     max-width: 640px;
     <div class="section-icon">
     height: 360px;
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
     border: none;
     </div>
     border-radius: 15px;
    <div class="section-text">EXPECTATIONS</div>
}
     <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>
<div class="section-content">
     <div class="content-text">
        <span>Set clear expectations regarding participation, engagement, and completion.<br/></span>
        <span class="content-title">PARTICIPATION<br/></span>
        <span>Learn how to handle the tool, including adding classes and creating associations. We have noticed that it can be challenging for people to use the tool for the first time, so we dedicate extra effort to these initial steps to ensure you understand the concepts fully. For instance, we emphasize separating the model as a repository with all the classes instead of using diagrams that only display part of the model.<br/></span>
        <span class="content-title">ENGAGEMENT<br/></span>
        <span>If you want to understand MDriven or achieve meaningful results, learning how to use it is important. Creating information systems for real-world applications can be complicated, but life itself is complex. We strive to simplify the mastery of MDriven for everyone interested in exploring its capabilities, ensuring you can revisit and enhance your knowledge as needed. Each step is accompanied by a video tutorial, making the learning process as natural as if we were right there with you.<br/></span>
        <span class="content-title">COMPLETION<br/></span>
        <span>Highlight the importance of practice and hands-on exercises. How long will it take you to complete Bootcamp? Well, that depends on where you fit into these three paths.<br/></span>
<ol>
        <li>Beginner: May take up to 3 months or more</li><br/>
        <li>Intermediate: May use 2 months to grasp the concepts</li><br/>
        <li>Advanced: May learn everything in 1 month</li><br/>
</ol>
<ul>
        <li> Outline the training schedule (dates, times, and duration). In hours (ask Ichama or check Clockify)</li><br/>
  <li>Advanced (*MDriven Accelerator)</li><br/>
  <li>Intermediate (*MDriven Modeler’s Journey)</li><br/>
  <li>Beginner (*MDriven Mastery Path)<br/>
  <li>*MDriven Detours*</li><br/>
  <li>(*MDriven ModelCraft)<br/>
<ul>
        <li> Learn to think like a modeler</li><br/>
        <li> Master modeling</li><br/>
</ul>
</ul>
    </div>
</div>


<!-- Section 2 -->
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


<div class="section" onclick="toggleSection(this)">
@media (max-width: 767px) {
    <div class="section-icon">
     #mw-content-text.mw-body-content.mw-content-ltr {
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
        background-image: url('https://wiki.mdriven.net/images/bootcamp_background_mobile.webp');
    </div>
        padding: 1em;
    <div class="section-text">MATERIALS</div>
     }
    <div class="section-arrow">
}
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
</style>
            <g clip-path="url(#clip0_2800_1942)">
     <div class="top-box">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
         <span class="top-box-title">MDriven <span style="color:#F67A07;"> Learn </span> presents:</span><br>
            </g>
         <span class="top-box-subtitle">BOOTCAMP</span><br>
            <defs>
        <span class="top-box-description">Learn how to model, prototype and build anything.</span>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
     </div>
</div>
 
<div class="section-content">
    <div class="content-text">
        <div>
    <h2 style="color: black; font-size: 35px; font-family: Outfit; font-weight: 600; text-transform: uppercase;">Essentials</h2>
    <p style="color: black; font-size: 35px; font-family: Outfit; font-weight: 400;">
        Before you begin, make sure you have the following essentials in place:
    </p>
    <ul style="color: black; font-size: 35px; font-family: Outfit; font-weight: 400;">
        <li>A computer with a Windows operating system</li>
        <li>A modern web browser for development (Google Chrome, Mozilla Firefox, or Microsoft Edge)</li>
    </ul>
 
<h2 style="color: black; font-size: 35px; font-family: Outfit; font-weight: 600; text-transform: uppercase;">Dual Learning:</h2>
    <h3 style="color: black; font-size: 35px; font-family: Outfit; font-weight: 400;">Videos</h3>
     <p style="color: black; font-size: 35px; font-family: Outfit; font-weight: 400;">
        Starting from Chapter 1, a video tutorial serves as a guide for users to learn how to use MDriven Designer. Each video covers a number of steps showcasing a different area of the Designer. The videos become increasingly more complex as users gain more experience and understanding.
    </p>
 
<h3 style="color: black; font-size: 35px; font-family: Outfit; font-weight: 400;">Wiki: Text Instructions</h3>
     <p style="color: black; font-size: 35px; font-family: Outfit; font-weight: 400;">
         The instructions are laid out in a text format in the Wiki. You can follow along via text to ensure you don’t miss anything. Screenshots and GIFs are also included.
    </p>
 
<h2 style="color: black; font-size: 35px; font-family: Outfit; font-weight: 600; text-transform: uppercase;">Additional Learning Resources</h2>
    <ul style="color: black; font-size: 35px; font-family: Outfit; font-weight: 400;">
        <li>The MDriven Book: Read the book to internalize the philosophy upon which MDriven’s approach to model-driven development is built.</li>
        <li>UML School: Provides insight into UML (Unified Modeling Language).</li>
        <li>W3 Schools: Find additional learning materials, definitions, and examples here.</li>
         <li>Other MDD sources</li>
    </ul>
</div>
</div>
</div>
 
<!-- Section 3 -->
 
<div class="section">
    <div class="section-icon">
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
    </div>
    <div class="section-text">EXPECTATIONS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
     </div>
     </div>
</div>
<!-- Section 4 -->


<div class="section">
<div class="video-container">
    <div class="section-icon">
         <iframe src="https://www.youtube.com/embed/xdbXkwVMz8c?si=rZuxuJbCBLlEwnrr" allowfullscreen></iframe>
         <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
        <a href="/index.php/Training:Bootcamp/Start" class="next-step-button">NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE</a>
     </div>
     </div>
    <div class="section-text">EXPECTATIONS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>
<!-- Section 5 -->
<div class="section">
    <div class="section-icon">
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
    </div>
    <div class="section-text">EXPECTATIONS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>
<button class="start-button">Click here to START BOOTCAMP</button>
    </div>
<script>
    function toggleSection(section) {
        const arrowContainer = section.querySelector('.section-arrow');
        const content = section.nextElementSibling;
        const isExpanded = content.classList.toggle('expanded');
     
        if (isExpanded) {
            arrowContainer.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
                    <path d="M3.97048 10.9169C4.42569 10.5302 5.043 10.313 5.68667 10.313C6.33033 10.313 6.94764 10.5302 7.40285 10.9169L19.4186 21.1262L31.4343 10.9169C31.8921 10.5412 32.5053 10.3333 33.1418 10.338C33.7782 10.3427 34.387 10.5596 34.8371 10.942C35.2872 11.3244 35.5425 11.8417 35.548 12.3825C35.5535 12.9233 35.3088 13.4442 34.8667 13.8332L21.1348 25.5008C20.6796 25.8875 20.0622 26.1047 19.4186 26.1047C18.7749 26.1047 18.1576 25.8875 17.7024 25.5008L3.97048 13.8332C3.51541 13.4465 3.25977 12.9219 3.25977 12.375C3.25977 11.8281 3.51541 11.3036 3.97048 10.9169Z" fill="black"/>
                </svg>`;
        } else {
            arrowContainer.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
                    <g clip-path="url(#clip0_2800_1942)">
                        <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
                    </g>
                    <defs>
                        <clipPath id="clip0_2800_1942">
                            <rect width="38.8387" height="33" fill="white"/>
                        </clipPath>
                    </defs>
                </svg>`;
        }
    }
</script>
</html>
</html>

Latest revision as of 00:54, 21 August 2024

MDriven Learn presents:
BOOTCAMP
Learn how to model, prototype and build anything.
NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE

Retrieved from "https://newwikicopy.mdriven.net/index.php?title=Training:Bootcamp&oldid=19368"

© MDRIVEN . All Rights Reserved

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

© MDRIVEN . All Rights Reserved