Add images css and alert boxes

content/en/docs/tutorials/kubernetes-basics/_index.md

@@ -35,41 +35,43 @@ container orchestration, combined with best-of-breed ideas from the community.
 
 ## Kubernetes Basics Modules
 
-<!-- this css code is to preserve the original format -->
+<!-- css code to preserve original format -->
-<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;">
+<link rel="stylesheet" href="/css/style_tutorials.css">
-  <div style="width: 30%; text-align: center;">
+
+<div class="tutorials-modules">
+  <div class="module">
     <a href="/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro/">
-      <img src="/docs/tutorials/kubernetes-basics/public/images/module_01.svg?v=1469803628347" alt="Module 1" style="width: 100%;">
+      <img src="/docs/tutorials/kubernetes-basics/public/images/module_01.svg?v=1469803628347" alt="Module 1">
       <h5>1. Create a Kubernetes cluster</h5>
     </a>
   </div>
-  <div style="width: 30%; text-align: center;">
+  <div class="module">
     <a href="/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/">
-      <img src="/docs/tutorials/kubernetes-basics/public/images/module_02.svg?v=1469803628347" alt="Module 2" style="width: 100%;">
+      <img src="/docs/tutorials/kubernetes-basics/public/images/module_02.svg?v=1469803628347" alt="Module 2">
       <h5>2. Deploy an app</h5>
     </a>
   </div>
-  <div style="width: 30%; text-align: center;">
+  <div class="module">
     <a href="/docs/tutorials/kubernetes-basics/explore/explore-intro/">
-      <img src="/docs/tutorials/kubernetes-basics/public/images/module_03.svg?v=1469803628347" alt="Module 3" style="width: 100%;">
+      <img src="/docs/tutorials/kubernetes-basics/public/images/module_03.svg?v=1469803628347" alt="Module 3">
       <h5>3. Explore your app</h5>
     </a>
   </div>
-  <div style="width: 30%; text-align: center;">
+  <div class="module">
     <a href="/docs/tutorials/kubernetes-basics/expose/expose-intro/">
-      <img src="/docs/tutorials/kubernetes-basics/public/images/module_04.svg?v=1469803628347" alt="Module 4" style="width: 100%;">
+      <img src="/docs/tutorials/kubernetes-basics/public/images/module_04.svg?v=1469803628347" alt="Module 4">
       <h5>4. Expose your app publicly</h5>
     </a>
   </div>
-  <div style="width: 30%; text-align: center;">
+  <div class="module">
     <a href="/docs/tutorials/kubernetes-basics/scale/scale-intro/">
-      <img src="/docs/tutorials/kubernetes-basics/public/images/module_05.svg?v=1469803628347" alt="Module 5" style="width: 100%;">
+      <img src="/docs/tutorials/kubernetes-basics/public/images/module_05.svg?v=1469803628347" alt="Module 5">
       <h5>5. Scale up your app</h5>
     </a>
   </div>
-  <div style="width: 30%; text-align: center;">
+  <div class="module">
     <a href="/docs/tutorials/kubernetes-basics/update/update-intro/">
-      <img src="/docs/tutorials/kubernetes-basics/public/images/module_06.svg?v=1469803628347" alt="Module 6" style="width: 100%;">
+      <img src="/docs/tutorials/kubernetes-basics/public/images/module_06.svg?v=1469803628347" alt="Module 6">
       <h5>6. Update your app</h5>
     </a>
   </div>

content/en/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro.md

@@ -11,13 +11,11 @@ weight: 10
 
 ## Kubernetes Clusters
 
-<div class="col-md-8">
+{{% alert %}}
-  <div class="content__box content__box_fill">
+_Kubernetes is a production-grade, open-source platform that orchestrates
-    <p><i>Kubernetes is a production-grade, open-source platform that orchestrates
 the placement (scheduling) and execution of application containers
-      within and across computer clusters.</i></p>
+within and across computer clusters._
-  </div>
+{{% /alert %}}
-</div>
 
 **Kubernetes coordinates a highly available cluster of computers that are connected
 to work as a single unit.** The abstractions in Kubernetes allow you to deploy
@@ -43,11 +41,10 @@ A Kubernetes cluster consists of two types of resources:
 coordinates all activities in your cluster, such as scheduling applications, maintaining
 applications' desired state, scaling applications, and rolling out new updates.
 
-<div class="col-md-8">
+{{% alert %}}
-  <div style="background-color: #eaf7ff; border-left: 5px solid #3771e3; padding: 15px; margin: 20px 0;">
+_Control Planes manage the cluster and the nodes that are used to host the running
-    <p><i>Control Planes manage the cluster and the nodes that are used to host the running applications.</i></p>
+applications._
-  </div>
+{{% /alert %}}
-</div>
 
 **A node is a VM or a physical computer that serves as a worker machine in a Kubernetes
 cluster.** Each node has a Kubelet, which is an agent for managing the node and

content/en/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro.md

@@ -10,6 +10,10 @@ weight: 10
 
 ## Kubernetes Deployments
 
+{{% alert %}}
+_A Deployment is responsible for creating and updating instances of your application._
+{{% /alert %}}
+
 {{< note >}}
 This tutorial uses a container that requires the AMD64 architecture. If you are using
 minikube on a computer with a different CPU architecture, you could try using minikube with
@@ -36,6 +40,11 @@ provide a fundamentally different approach to application management.
 
 ## Deploying your first app on Kubernetes
 
+{{% alert %}}
+_Applications need to be packaged into one of the supported container formats in
+order to be deployed on Kubernetes._
+{{% /alert %}}
+
 {{< figure src="/docs/tutorials/kubernetes-basics/public/images/module_02_first_app.svg" class="diagram-medium" >}}
 
 You can create and manage a Deployment by using the Kubernetes command line interface,

content/en/docs/tutorials/kubernetes-basics/explore/explore-intro.md

@@ -11,6 +11,11 @@ weight: 10
 
 ## Kubernetes Pods
 
+{{% alert %}}
+_A Pod is a group of one or more application containers (such as Docker) and includes
+shared storage (volumes), IP address and information about how to run them._
+{{% /alert %}}
+
 When you created a Deployment in [Module 2](/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/),
 Kubernetes created a **Pod** to host your application instance. A Pod is a Kubernetes
 abstraction that represents a group of one or more application containers (such as Docker),
@@ -39,6 +44,11 @@ the cluster.
 
 {{< figure src="/docs/tutorials/kubernetes-basics/public/images/module_03_pods.svg" class="diagram-medium" >}}
 
+{{% alert %}}
+_Containers should only be scheduled together in a single Pod if they are tightly
+coupled and need to share resources such as disk._
+{{% /alert %}}
+
 ## Nodes
 
 A Pod always runs on a **Node**. A Node is a worker machine in Kubernetes and may
@@ -75,8 +85,8 @@ operations can be done with the following kubectl subcommands:
 You can use these commands to see when applications were deployed, what their current
 statuses are, where they are running and what their configurations are.
 
-Now that we know more about our cluster components and the command line, let's explore
+Now that we know more about our cluster components and the command line, let's
-our application.
+explore our application.
 
 ### Check application configuration
 

content/en/docs/tutorials/kubernetes-basics/expose/expose-intro.md

@@ -22,6 +22,11 @@ each Pod in a Kubernetes cluster has a unique IP address, even Pods on the same
 so there needs to be a way of automatically reconciling changes among Pods so that your
 applications continue to function.
 
+{{% alert %}}
+_A Kubernetes Service is an abstraction layer which defines a logical set of Pods and
+enables external traffic exposure, load balancing and service discovery for those Pods._
+{{% /alert %}}
+
 A [Service](/docs/concepts/services-networking/service/) in Kubernetes is an abstraction
 which defines a logical set of Pods and a policy by which to access them. Services
 enable a loose coupling between dependent Pods. A Service is defined using YAML or JSON,
@@ -146,7 +151,6 @@ Then use the given URL to access the app:
 ```shell
 curl 127.0.0.1:51082
 ```
-
 {{< /note >}}
 
 And we get a response from the server. The Service is exposed.

content/en/docs/tutorials/kubernetes-basics/scale/scale-intro.md

@@ -9,6 +9,11 @@ weight: 10
 
 ## Scaling an application
 
+{{% alert %}}
+_You can create from the start a Deployment with multiple instances using the --replicas
+parameter for the kubectl create deployment command._
+{{% /alert %}}
+
 Previously we created a [Deployment](/docs/concepts/workloads/controllers/deployment/),
 and then exposed it publicly via a [Service](/docs/concepts/services-networking/service/).
 The Deployment created only one Pod for running our application. When traffic increases,
@@ -34,7 +39,6 @@ with its `type` set to `LoadBalancer`:
 ```shell
 kubectl expose deployment/kubernetes-bootcamp --type="LoadBalancer" --port 8080
 ```
-
 {{< /note >}}
 
 ## Scaling overview
@@ -42,10 +46,6 @@ kubectl expose deployment/kubernetes-bootcamp --type="LoadBalancer" --port 8080
 <!-- animation -->
 <div class="col-md-8">
   <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
-    <ol class="carousel-indicators">
-      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-      <li data-target="#myCarousel" data-slide-to="1"></li>
-    </ol>
     <div class="carousel-inner" role="listbox">
       <div class="item carousel-item active">
         <img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg">
@@ -54,15 +54,13 @@ kubectl expose deployment/kubernetes-bootcamp --type="LoadBalancer" --port 8080
         <img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg">
       </div>
     </div>
-      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
-        <span class="sr-only ">Previous</span>
-      </a>
-      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
-        <span class="sr-only">Next</span>
-      </a>
   </div>
 </div>
 
+{{% alert %}}
+_Scaling is accomplished by changing the number of replicas in a Deployment._
+{{% /alert %}}
+
 Scaling out a Deployment will ensure new Pods are created and scheduled to Nodes
 with available resources. Scaling will increase the number of Pods to the new desired
 state. Kubernetes also supports [autoscaling](/docs/tasks/run-application/horizontal-pod-autoscale/)

content/en/docs/tutorials/kubernetes-basics/update/update-intro.md

@@ -9,6 +9,11 @@ Perform a rolling update using kubectl.
 
 ## Updating an application
 
+{{% alert %}}
+_Rolling updates allow Deployments' update to take place with zero downtime by
+incrementally updating Pods instances with new ones._
+{{% /alert %}}
+
 Users expect applications to be available all the time, and developers are expected
 to deploy new versions of them several times a day. In Kubernetes this is done with
 rolling updates. A **rolling update** allows a Deployment update to take place with
@@ -28,12 +33,6 @@ versioned and any Deployment update can be reverted to a previous (stable) versi
 <!-- animation -->
 <div class="col-md-8">
   <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
-    <ol class="carousel-indicators">
-      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-      <li data-target="#myCarousel" data-slide-to="1"></li>
-      <li data-target="#myCarousel" data-slide-to="2"></li>
-      <li data-target="#myCarousel" data-slide-to="3"></li>
-    </ol>
     <div class="carousel-inner" role="listbox">
       <div class="item carousel-item active">
         <img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg">
@@ -48,15 +47,14 @@ versioned and any Deployment update can be reverted to a previous (stable) versi
         <img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg">
       </div>
     </div>
-      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
-        <span class="sr-only ">Previous</span>
-      </a>
-      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
-        <span class="sr-only">Next</span>
-      </a>
   </div>
 </div>
 
+{{% alert %}}
+_If a Deployment is exposed publicly, the Service will load-balance the traffic
+only to available Pods during the update._
+{{% /alert %}}
+
 Similar to application Scaling, if a Deployment is exposed publicly, the Service
 will load-balance the traffic only to available Pods during the update. An available
 Pod is an instance that is available to the users of the application.
@@ -206,7 +204,7 @@ kubectl describe pods
 The Deployment is once again using a stable version of the app (`v2`). The rollback
 was successful.
 
-Remember to clean up your local cluster
+Remember to clean up your local cluster.
 
 ```shell
 kubectl delete deployments/kubernetes-bootcamp services/kubernetes-bootcamp

static/css/style_tutorials.css

@@ -1,4 +1,4 @@
-/* styles for kubernetes-basics tutorials */
+/* kubernetes-basics tutorials */
 .tutorials-modules {
     display: flex;
     flex-wrap: wrap;