Bootcamp/Levels/Beginner
<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