Created using Colab

Fixed error in problem 4.8 question.

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Notebooks/Chap01/1_1_BackgroundMathematics.ipynb

@@ -1,18 +1,16 @@
 {
   "cells": [
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
-        "colab_type": "text",
+        "id": "view-in-github",
-        "id": "view-in-github"
+        "colab_type": "text"
       },
       "source": [
         "<a href=\"https://colab.research.google.com/github/udlbook/udlbook/blob/main/Notebooks/Chap01/1_1_BackgroundMathematics.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "s5zzKSOusPOB"
@@ -41,7 +39,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "WV2Dl6owme2d"
@@ -49,11 +46,11 @@
       "source": [
         "**Linear functions**<br> We will be using the term *linear equation* to mean a weighted sum of inputs plus an offset. If there is just one input $x$, then this is a straight line:\n",
         "\n",
-        "\\begin{equation}y=\\beta+\\omega x,\\end{equation} \n",
+        "\\begin{equation}y=\\beta+\\omega x,\\end{equation}\n",
         "\n",
         "where $\\beta$ is the y-intercept of the linear and $\\omega$ is the slope of the line. When there are two inputs $x_{1}$ and $x_{2}$, then this becomes:\n",
         "\n",
-        "\\begin{equation}y=\\beta+\\omega_1 x_1 + \\omega_2 x_2.\\end{equation} \n",
+        "\\begin{equation}y=\\beta+\\omega_1 x_1 + \\omega_2 x_2.\\end{equation}\n",
         "\n",
         "Any other functions are by definition **non-linear**.\n",
         "\n",
@@ -99,7 +96,7 @@
         "ax.plot(x,y,'r-')\n",
         "ax.set_ylim([0,10]);ax.set_xlim([0,10])\n",
         "ax.set_xlabel('x'); ax.set_ylabel('y')\n",
-        "plt.show\n",
+        "plt.show()\n",
         "\n",
         "# TODO -- experiment with changing the values of beta and omega\n",
         "# to understand what they do.  Try to make a line\n",
@@ -107,7 +104,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "AedfvD9dxShZ"
@@ -192,7 +188,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "i8tLwpls476R"
@@ -236,7 +231,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "fGzVJQ6N-mHJ"
@@ -275,11 +269,10 @@
         "# Compute with vector/matrix form\n",
         "y_vec = beta_vec+np.matmul(omega_mat, x_vec)\n",
         "print(\"Matrix/vector form\")\n",
-        "print('y1= %3.3f\\ny2 = %3.3f'%((y_vec[0],y_vec[1])))\n"
+        "print('y1= %3.3f\\ny2 = %3.3f'%((y_vec[0][0],y_vec[1][0])))\n"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "3LGRoTMLU8ZU"
@@ -293,7 +286,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "7Y5zdKtKZAB2"
@@ -325,11 +317,10 @@
         "ax.plot(x,y,'r-')\n",
         "ax.set_ylim([0,100]);ax.set_xlim([-5,5])\n",
         "ax.set_xlabel('x'); ax.set_ylabel('exp[x]')\n",
-        "plt.show"
+        "plt.show()"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "XyrT8257IWCu"
@@ -345,7 +336,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "R6A4e5IxIWCu"
@@ -373,11 +363,10 @@
         "ax.plot(x,y,'r-')\n",
         "ax.set_ylim([-5,5]);ax.set_xlim([0,5])\n",
         "ax.set_xlabel('x'); ax.set_ylabel('$\\log[x]$')\n",
-        "plt.show"
+        "plt.show()"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "yYWrL5AXIWCv"
@@ -397,8 +386,8 @@
   ],
   "metadata": {
     "colab": {
-      "include_colab_link": true,
+      "provenance": [],
-      "provenance": []
+      "include_colab_link": true
     },
     "kernelspec": {
       "display_name": "Python 3 (ipykernel)",

Notebooks/Chap02/2_1_Supervised_Learning.ipynb

@@ -4,7 +4,6 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyOmndC0N7dFV7W3Mh5ljOLl",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -235,8 +234,8 @@
         "levels = 40\n",
         "ax.contour(phi0_mesh, phi1_mesh, all_losses ,levels, colors=['#80808080'])\n",
         "ax.set_ylim([1,-1])\n",
-        "ax.set_xlabel('Intercept, $\\phi_0$')\n",
+        "ax.set_xlabel(r'Intercept, $\\phi_0$')\n",
-        "ax.set_ylabel('Slope, $\\phi_1$')\n",
+        "ax.set_ylabel(r'Slope, $\\phi_1$')\n",
         "\n",
         "# Plot the position of your best fitting line on the loss function\n",
         "# It should be close to the minimum\n",

Notebooks/Chap03/3_1_Shallow_Networks_I.ipynb

@@ -1,18 +1,16 @@
 {
   "cells": [
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
-        "colab_type": "text",
+        "id": "view-in-github",
-        "id": "view-in-github"
+        "colab_type": "text"
       },
       "source": [
         "<a href=\"https://colab.research.google.com/github/udlbook/udlbook/blob/main/Notebooks/Chap03/3_1_Shallow_Networks_I.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "1Z6LB4Ybn1oN"
@@ -42,7 +40,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "wQDy9UzXpnf5"
@@ -102,8 +99,8 @@
       "source": [
         "# Define a shallow neural network with, one input, one output, and three hidden units\n",
         "def shallow_1_1_3(x, activation_fn, phi_0,phi_1,phi_2,phi_3, theta_10, theta_11, theta_20, theta_21, theta_30, theta_31):\n",
-        "  # TODO Replace the lines below to compute the three initial lines\n",
+        "  # TODO Replace the code below to compute the three initial lines\n",
-        "  # (figure 3.3a-c) from the theta parameters.  These are the preactivations\n",
+        "  # from the theta parameters (i.e. implement equations at bottom of figure 3.3a-c).  These are the preactivations\n",
         "  pre_1 = np.zeros_like(x)\n",
         "  pre_2 = np.zeros_like(x)\n",
         "  pre_3 = np.zeros_like(x)\n",
@@ -199,7 +196,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "T34bszToImKQ"
@@ -210,7 +206,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "jhaBSS8oIWSX"
@@ -269,7 +264,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "osonHsEqVp2I"
@@ -354,9 +348,8 @@
   ],
   "metadata": {
     "colab": {
-      "authorship_tag": "ABX9TyPBNztJrxnUt1ELWfm1Awa3",
+      "provenance": [],
-      "include_colab_link": true,
+      "include_colab_link": true
-      "provenance": []
     },
     "kernelspec": {
       "display_name": "Python 3",

Notebooks/Chap04/4_1_Composing_Networks.ipynb

@@ -134,7 +134,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "Let's define two networks.  We'll put the prefixes n1_ and n2_ before all the variables to make it clear which network is which.  We'll just consider the inputs and outputs over the range [-1,1].  If you set the \"plot_all\" flat to True,  you can see the details of how they were created."
+        "Let's define two networks.  We'll put the prefixes n1_ and n2_ before all the variables to make it clear which network is which.  We'll just consider the inputs and outputs over the range [-1,1]."
       ],
       "metadata": {
         "id": "LxBJCObC-NTY"

Notebooks/Chap04/4_2_Clipping_functions.ipynb

@@ -4,7 +4,7 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyPkFrjmRAUf0fxN07RC4xMI",
+      "authorship_tag": "ABX9TyPZzptvvf7OPZai8erQ/0xT",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -127,26 +127,26 @@
         "    fig, ax = plt.subplots(3,3)\n",
         "    fig.set_size_inches(8.5, 8.5)\n",
         "    fig.tight_layout(pad=3.0)\n",
-        "    ax[0,0].plot(x,layer2_pre_1,'r-'); ax[0,0].set_ylabel('$\\psi_{10}+\\psi_{11}h_{1}+\\psi_{12}h_{2}+\\psi_{13}h_3$')\n",
+        "    ax[0,0].plot(x,layer2_pre_1,'r-'); ax[0,0].set_ylabel(r'$\\psi_{10}+\\psi_{11}h_{1}+\\psi_{12}h_{2}+\\psi_{13}h_3$')\n",
-        "    ax[0,1].plot(x,layer2_pre_2,'b-'); ax[0,1].set_ylabel('$\\psi_{20}+\\psi_{21}h_{1}+\\psi_{22}h_{2}+\\psi_{23}h_3$')\n",
+        "    ax[0,1].plot(x,layer2_pre_2,'b-'); ax[0,1].set_ylabel(r'$\\psi_{20}+\\psi_{21}h_{1}+\\psi_{22}h_{2}+\\psi_{23}h_3$')\n",
-        "    ax[0,2].plot(x,layer2_pre_3,'g-'); ax[0,2].set_ylabel('$\\psi_{30}+\\psi_{31}h_{1}+\\psi_{32}h_{2}+\\psi_{33}h_3$')\n",
+        "    ax[0,2].plot(x,layer2_pre_3,'g-'); ax[0,2].set_ylabel(r'$\\psi_{30}+\\psi_{31}h_{1}+\\psi_{32}h_{2}+\\psi_{33}h_3$')\n",
-        "    ax[1,0].plot(x,h1_prime,'r-'); ax[1,0].set_ylabel(\"$h_{1}^{'}$\")\n",
+        "    ax[1,0].plot(x,h1_prime,'r-'); ax[1,0].set_ylabel(r\"$h_{1}^{'}$\")\n",
-        "    ax[1,1].plot(x,h2_prime,'b-'); ax[1,1].set_ylabel(\"$h_{2}^{'}$\")\n",
+        "    ax[1,1].plot(x,h2_prime,'b-'); ax[1,1].set_ylabel(r\"$h_{2}^{'}$\")\n",
-        "    ax[1,2].plot(x,h3_prime,'g-'); ax[1,2].set_ylabel(\"$h_{3}^{'}$\")\n",
+        "    ax[1,2].plot(x,h3_prime,'g-'); ax[1,2].set_ylabel(r\"$h_{3}^{'}$\")\n",
-        "    ax[2,0].plot(x,phi1_h1_prime,'r-'); ax[2,0].set_ylabel(\"$\\phi_1 h_{1}^{'}$\")\n",
+        "    ax[2,0].plot(x,phi1_h1_prime,'r-'); ax[2,0].set_ylabel(r\"$\\phi_1 h_{1}^{'}$\")\n",
-        "    ax[2,1].plot(x,phi2_h2_prime,'b-'); ax[2,1].set_ylabel(\"$\\phi_2 h_{2}^{'}$\")\n",
+        "    ax[2,1].plot(x,phi2_h2_prime,'b-'); ax[2,1].set_ylabel(r\"$\\phi_2 h_{2}^{'}$\")\n",
-        "    ax[2,2].plot(x,phi3_h3_prime,'g-'); ax[2,2].set_ylabel(\"$\\phi_3 h_{3}^{'}$\")\n",
+        "    ax[2,2].plot(x,phi3_h3_prime,'g-'); ax[2,2].set_ylabel(r\"$\\phi_3 h_{3}^{'}$\")\n",
         "\n",
         "    for plot_y in range(3):\n",
         "      for plot_x in range(3):\n",
         "        ax[plot_y,plot_x].set_xlim([0,1]);ax[plot_x,plot_y].set_ylim([-1,1])\n",
         "        ax[plot_y,plot_x].set_aspect(0.5)\n",
-        "      ax[2,plot_y].set_xlabel('Input, $x$');\n",
+        "      ax[2,plot_y].set_xlabel(r'Input, $x$');\n",
         "    plt.show()\n",
         "\n",
         "    fig, ax = plt.subplots()\n",
         "    ax.plot(x,y)\n",
-        "    ax.set_xlabel('Input, $x$'); ax.set_ylabel('Output, $y$')\n",
+        "    ax.set_xlabel(r'Input, $x$'); ax.set_ylabel(r'Output, $y$')\n",
         "    ax.set_xlim([0,1]);ax.set_ylim([-1,1])\n",
         "    ax.set_aspect(0.5)\n",
         "    plt.show()"

Notebooks/Chap04/4_3_Deep_Networks.ipynb

@@ -118,7 +118,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "Let's define a network.  We'll just consider the inputs and outputs over the range [-1,1].  If you set the \"plot_all\" flat to True,  you can see the details of how it was created."
+        "Let's define a network.  We'll just consider the inputs and outputs over the range [-1,1]."
       ],
       "metadata": {
         "id": "LxBJCObC-NTY"

Notebooks/Chap05/5_1_Least_Squares_Loss.ipynb

@@ -118,7 +118,7 @@
         "  ax.plot(x_model,y_model)\n",
         "  if sigma_model is not None:\n",
         "    ax.fill_between(x_model, y_model-2*sigma_model, y_model+2*sigma_model, color='lightgray')\n",
-        "  ax.set_xlabel('Input, $x$'); ax.set_ylabel('Output, $y$')\n",
+        "  ax.set_xlabel(r'Input, $x$'); ax.set_ylabel(r'Output, $y$')\n",
         "  ax.set_xlim([0,1]);ax.set_ylim([-1,1])\n",
         "  ax.set_aspect(0.5)\n",
         "  if title is not None:\n",
@@ -222,7 +222,7 @@
         "gauss_prob = normal_distribution(y_gauss, mu, sigma)\n",
         "fig, ax = plt.subplots()\n",
         "ax.plot(y_gauss, gauss_prob)\n",
-        "ax.set_xlabel('Input, $y$'); ax.set_ylabel('Probability $Pr(y)$')\n",
+        "ax.set_xlabel(r'Input, $y$'); ax.set_ylabel(r'Probability $Pr(y)$')\n",
         "ax.set_xlim([-5,5]);ax.set_ylim([0,1.0])\n",
         "plt.show()\n",
         "\n",

Notebooks/Chap05/5_2_Binary_Cross_Entropy_Loss.ipynb

@@ -119,12 +119,12 @@
         "  fig.set_size_inches(7.0, 3.5)\n",
         "  fig.tight_layout(pad=3.0)\n",
         "  ax[0].plot(x_model,out_model)\n",
-        "  ax[0].set_xlabel('Input, $x$'); ax[0].set_ylabel('Model output')\n",
+        "  ax[0].set_xlabel(r'Input, $x$'); ax[0].set_ylabel(r'Model output')\n",
         "  ax[0].set_xlim([0,1]);ax[0].set_ylim([-4,4])\n",
         "  if title is not None:\n",
         "    ax[0].set_title(title)\n",
         "  ax[1].plot(x_model,lambda_model)\n",
-        "  ax[1].set_xlabel('Input, $x$'); ax[1].set_ylabel('$\\lambda$ or Pr(y=1|x)')\n",
+        "  ax[1].set_xlabel(r'Input, $x$'); ax[1].set_ylabel(r'$\\lambda$ or Pr(y=1|x)')\n",
         "  ax[1].set_xlim([0,1]);ax[1].set_ylim([-0.05,1.05])\n",
         "  if title is not None:\n",
         "    ax[1].set_title(title)\n",

Notebooks/Chap06/6_1_Line_Search.ipynb

@@ -4,7 +4,6 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyN4E9Vtuk6t2BhZ0Ajv5SW3",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -67,7 +66,7 @@
         "  fig,ax = plt.subplots()\n",
         "  ax.plot(phi_plot,loss_function(phi_plot),'r-')\n",
         "  ax.set_xlim(0,1); ax.set_ylim(0,1)\n",
-        "  ax.set_xlabel('$\\phi$'); ax.set_ylabel('$L[\\phi]$')\n",
+        "  ax.set_xlabel(r'$\\phi$'); ax.set_ylabel(r'$L[\\phi]$')\n",
         "  if a is not None and b is not None and c is not None and d is not None:\n",
         "      plt.axvspan(a, d, facecolor='k', alpha=0.2)\n",
         "      ax.plot([a,a],[0,1],'b-')\n",

Notebooks/Chap06/6_5_Adam.ipynb

@@ -108,8 +108,8 @@
         "    ax.contour(phi0mesh, phi1mesh, loss_function, 20, colors=['#80808080'])\n",
         "    ax.plot(opt_path[0,:], opt_path[1,:],'-', color='#a0d9d3ff')\n",
         "    ax.plot(opt_path[0,:], opt_path[1,:],'.', color='#a0d9d3ff',markersize=10)\n",
-        "    ax.set_xlabel(\"$\\phi_{0}$\")\n",
+        "    ax.set_xlabel(r\"$\\phi_{0}$\")\n",
-        "    ax.set_ylabel(\"$\\phi_{1}$\")\n",
+        "    ax.set_ylabel(r\"$\\phi_{1}$\")\n",
         "    plt.show()"
       ],
       "metadata": {

Notebooks/Chap08/8_1_MNIST_1D_Performance.ipynb

@@ -83,6 +83,8 @@
     {
       "cell_type": "code",
       "source": [
+        "!mkdir ./sample_data\n",
+        "\n",
         "args = mnist1d.data.get_dataset_args()\n",
         "data = mnist1d.data.get_dataset(args, path='./sample_data/mnist1d_data.pkl', download=False, regenerate=False)\n",
         "\n",
@@ -136,7 +138,6 @@
         "optimizer = torch.optim.SGD(model.parameters(), lr = 0.05, momentum=0.9)\n",
         "# object that decreases learning rate by half every 10 epochs\n",
         "scheduler = StepLR(optimizer, step_size=10, gamma=0.5)\n",
-        "# create 100 dummy data points and store in data loader class\n",
         "x_train = torch.tensor(data['x'].astype('float32'))\n",
         "y_train = torch.tensor(data['y'].transpose().astype('long'))\n",
         "x_test= torch.tensor(data['x_test'].astype('float32'))\n",

Notebooks/Chap08/8_2_Bias_Variance_Trade_Off.ipynb

@@ -92,7 +92,7 @@
     {
       "cell_type": "code",
       "source": [
-        "# Draw the fitted function, together win uncertainty used to generate points\n",
+        "# Draw the fitted function, together with uncertainty used to generate points\n",
         "def plot_function(x_func, y_func, x_data=None,y_data=None, x_model = None, y_model =None, sigma_func = None, sigma_model=None):\n",
         "\n",
         "    fig,ax = plt.subplots()\n",
@@ -203,7 +203,7 @@
         "# Closed form solution\n",
         "beta, omega = fit_model_closed_form(x_data,y_data,n_hidden=3)\n",
         "\n",
-        "# Get prediction for model across graph grange\n",
+        "# Get prediction for model across graph range\n",
         "x_model = np.linspace(0,1,100);\n",
         "y_model = network(x_model, beta, omega)\n",
         "\n",
@@ -302,7 +302,7 @@
         "sigma_func = 0.3\n",
         "n_hidden = 5\n",
         "\n",
-        "# Set random seed so that get same result every time\n",
+        "# Set random seed so that we get the same result every time\n",
         "np.random.seed(1)\n",
         "\n",
         "for c_hidden in range(len(hidden_variables)):\n",

Notebooks/Chap08/8_3_Double_Descent.ipynb

@@ -124,7 +124,7 @@
         "  D_k = n_hidden   # Hidden dimensions\n",
         "  D_o = 10    # Output dimensions\n",
         "\n",
-        "  # Define a model with two hidden layers of size 100\n",
+        "  # Define a model with two hidden layers\n",
         "  # And ReLU activations between them\n",
         "  model = nn.Sequential(\n",
         "  nn.Linear(D_i, D_k),\n",
@@ -157,7 +157,6 @@
         "  optimizer = torch.optim.SGD(model.parameters(), lr = 0.01, momentum=0.9)\n",
         "\n",
         "\n",
-        "  # create 100 dummy data points and store in data loader class\n",
         "  x_train = torch.tensor(data['x'].astype('float32'))\n",
         "  y_train = torch.tensor(data['y'].transpose().astype('long'))\n",
         "  x_test= torch.tensor(data['x_test'].astype('float32'))\n",

Notebooks/Chap08/8_4_High_Dimensional_Spaces.ipynb

@@ -224,7 +224,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "You should see see that by the time we get to 300 dimensions most of the volume is in the outer 1 percent. <br><br>\n",
+        "You should see that by the time we get to 300 dimensions most of the volume is in the outer 1 percent. <br><br>\n",
         "\n",
         "The conclusion of all of this is that in high dimensions you should be sceptical of your intuitions about how things work.  I have tried to visualize many things in one or two dimensions in the book, but you should also be sceptical about these visualizations!"
       ],

Notebooks/Chap09/9_2_Implicit_Regularization.ipynb

@@ -4,7 +4,6 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyOR3WOJwfTlMD8eOLsPfPrz",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -140,7 +139,7 @@
         "    fig.set_size_inches(7,7)\n",
         "    ax.contourf(phi0mesh, phi1mesh, loss_function, 256, cmap=my_colormap);\n",
         "    ax.contour(phi0mesh, phi1mesh, loss_function, 20, colors=['#80808080'])\n",
-        "    ax.set_xlabel('$\\phi_{0}$'); ax.set_ylabel('$\\phi_{1}$')\n",
+        "    ax.set_xlabel(r'$\\phi_{0}$'); ax.set_ylabel(r'$\\phi_{1}$')\n",
         "\n",
         "    if grad_path_typical_lr is not None:\n",
         "        ax.plot(grad_path_typical_lr[0,:], grad_path_typical_lr[1,:],'ro-')\n",

Notebooks/Chap09/9_4_Bayesian_Approach.ipynb

@@ -1,18 +1,16 @@
 {
   "cells": [
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
-        "colab_type": "text",
+        "id": "view-in-github",
-        "id": "view-in-github"
+        "colab_type": "text"
       },
       "source": [
         "<a href=\"https://colab.research.google.com/github/udlbook/udlbook/blob/main/Notebooks/Chap09/9_4_Bayesian_Approach.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "el8l05WQEO46"
@@ -159,7 +157,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "i8T_QduzeBmM"
@@ -195,7 +192,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "JojV6ueRk49G"
@@ -211,7 +207,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "YX0O_Ciwp4W1"
@@ -277,7 +272,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "GjPnlG4q0UFK"
@@ -334,7 +328,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "GiNg5EroUiUb"
@@ -343,17 +336,16 @@
         "Now we need to perform inference for a new data points $\\mathbf{x}^*$ with corresponding hidden values $\\mathbf{h}^*$.  Instead of having a single estimate of the parameters, we have a distribution over the possible parameters.  So we marginalize (integrate) over this distribution to account for all possible values:\n",
         "\n",
         "\\begin{align}\n",
-        "Pr(y^*|\\mathbf{x}^*)  &=& \\int Pr(y^{*}|\\mathbf{x}^*,\\boldsymbol\\phi)Pr(\\boldsymbol\\phi|\\{\\mathbf{x}_{i},\\mathbf{y}_{i}\\}) d\\boldsymbol\\phi\\\\\n",
+        "Pr(y^*|\\mathbf{x}^*)  &= \\int Pr(y^{*}|\\mathbf{x}^*,\\boldsymbol\\phi)Pr(\\boldsymbol\\phi|\\{\\mathbf{x}_{i},\\mathbf{y}_{i}\\}) d\\boldsymbol\\phi\\\\\n",
-        "&=& \\int \\text{Norm}_{y^*}\\bigl[[\\mathbf{h}^{*T},1]\\boldsymbol\\phi,\\sigma^2\\bigr]\\cdot\\text{Norm}_{\\boldsymbol\\phi}\\biggl[\\frac{1}{\\sigma^2}\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\\mathbf{H}\\mathbf{y},\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\\biggr]d\\boldsymbol\\phi\\\\\n",
+        "&= \\int \\text{Norm}_{y^*}\\bigl[[\\mathbf{h}^{*T},1]\\boldsymbol\\phi,\\sigma^2\\bigr]\\cdot\\text{Norm}_{\\boldsymbol\\phi}\\biggl[\\frac{1}{\\sigma^2}\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\\mathbf{H}\\mathbf{y},\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\\biggr]d\\boldsymbol\\phi\\\\\n",
-        "&=& \\text{Norm}_{y^*}\\biggl[\\frac{1}{\\sigma^2} [\\mathbf{h}^{*T},1]\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\\mathbf{H}\\mathbf{y},  [\\mathbf{h}^{*T},1]\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\n",
+        "&= \\text{Norm}_{y^*}\\biggl[\\frac{1}{\\sigma^2} [\\mathbf{h}^{*T},1]\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\\mathbf{H}\\mathbf{y},  [\\mathbf{h}^{*T},1]\\left(\\frac{1}{\\sigma^2}\\mathbf{H}\\mathbf{H}^T+\\frac{1}{\\sigma_p^2}\\mathbf{I}\\right)^{-1}\n",
-        "[\\mathbf{h}^*;1]\\biggr]\n",
+        "[\\mathbf{h}^*;1]\\biggr],\n",
         "\\end{align}\n",
         "\n",
+        "where the notation $[\\mathbf{h}^{*T},1]$ is a row vector containing $\\mathbf{h}^{T}$ with a one appended to the end and $[\\mathbf{h};1 ]$ is a column vector containing $\\mathbf{h}$ with a one appended to the end.\n",
         "\n",
         "\n",
-        "\n",
+        "To compute this, we reformulated the integrand using the relations from appendices C.3.3 and C.3.4 as the product of a normal distribution in $\\boldsymbol\\phi$ and a constant with respect\n",
-        "To compute this, we reformulated the integrand using the relations from appendices\n",
-        "C.3.3 and C.3.4 as the product of a normal distribution in $\\boldsymbol\\phi$ and a constant with respect\n",
         "to $\\boldsymbol\\phi$. The integral of the normal distribution must be one, and so the final result is just the constant. This constant is itself a normal distribution in $y^*$. <br>\n",
         "\n",
         "If you feel so inclined you can work through the math of this yourself.\n",
@@ -404,7 +396,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "8Hcbe_16sK0F"
@@ -419,9 +410,8 @@
   ],
   "metadata": {
     "colab": {
-      "authorship_tag": "ABX9TyMB8B4269DVmrcLoCWrhzKF",
+      "provenance": [],
-      "include_colab_link": true,
+      "include_colab_link": true
-      "provenance": []
     },
     "kernelspec": {
       "display_name": "Python 3",

Notebooks/Chap11/11_1_Shattered_Gradients.ipynb

@@ -4,7 +4,7 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyMLKg5ZmXqojcVrZD5BGm9g",
+      "authorship_tag": "ABX9TyP3VmRg51U+7NCfSYjRRrgv",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -267,8 +267,8 @@
         "  fig,ax = plt.subplots()\n",
         "  ax.plot(np.squeeze(x_in), np.squeeze(dydx), 'b-')\n",
         "  ax.set_xlim(-2,2)\n",
-        "  ax.set_xlabel('Input, $x$')\n",
+        "  ax.set_xlabel(r'Input, $x$')\n",
-        "  ax.set_ylabel('Gradient, $dy/dx$')\n",
+        "  ax.set_ylabel(r'Gradient, $dy/dx$')\n",
         "  ax.set_title('No layers = %d'%(K))\n",
         "  plt.show()"
       ],

Notebooks/Chap12/12_2_Multihead_Self_Attention.ipynb

@@ -4,7 +4,6 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyMSk8qTqDYqFnRJVZKlsue0",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -147,9 +146,7 @@
         "  exp_values = np.exp(data_in) ;\n",
         "  # Sum over columns\n",
         "  denom = np.sum(exp_values, axis = 0);\n",
-        "  # Replicate denominator to N rows\n",
+        "  # Compute softmax (numpy broadcasts denominator to all rows automatically)\n",
-        "  denom = np.matmul(np.ones((data_in.shape[0],1)), denom[np.newaxis,:])\n",
-        "  # Compute softmax\n",
         "  softmax = exp_values / denom\n",
         "  # return the answer\n",
         "  return softmax"

Notebooks/Chap15/15_2_Wasserstein_Distance.ipynb

@@ -128,7 +128,7 @@
     {
       "cell_type": "code",
       "source": [
-        "draw_2D_heatmap(dist_mat,'Distance $|i-j|$', my_colormap)"
+        "draw_2D_heatmap(dist_mat,r'Distance $|i-j|$', my_colormap)"
       ],
       "metadata": {
         "id": "G0HFPBXyHT6V"
@@ -197,7 +197,7 @@
       "cell_type": "code",
       "source": [
         "TP = np.array(opt.x).reshape(10,10)\n",
-        "draw_2D_heatmap(TP,'Transport plan $\\mathbf{P}$', my_colormap)"
+        "draw_2D_heatmap(TP,r'Transport plan $\\mathbf{P}$', my_colormap)"
       ],
       "metadata": {
         "id": "nZGfkrbRV_D0"

Notebooks/Chap17/17_2_Reparameterization_Trick.ipynb

@@ -1,18 +1,16 @@
 {
   "cells": [
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
-        "colab_type": "text",
+        "id": "view-in-github",
-        "id": "view-in-github"
+        "colab_type": "text"
       },
       "source": [
         "<a href=\"https://colab.research.google.com/github/udlbook/udlbook/blob/main/Notebooks/Chap17/17_2_Reparameterization_Trick.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "t9vk9Elugvmi"
@@ -40,7 +38,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "paLz5RukZP1J"
@@ -114,7 +111,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "r5Hl2QkimWx9"
@@ -139,13 +135,12 @@
         "\n",
         "fig,ax = plt.subplots()\n",
         "ax.plot(phi_vals, expected_vals,'r-')\n",
-        "ax.set_xlabel('Parameter $\\phi$')\n",
+        "ax.set_xlabel(r'Parameter $\\phi$')\n",
-        "ax.set_ylabel('$\\mathbb{E}_{Pr(x|\\phi)}[f[x]]$')\n",
+        "ax.set_ylabel(r'$\\mathbb{E}_{Pr(x|\\phi)}[f[x]]$')\n",
         "plt.show()"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "zTCykVeWqj_O"
@@ -253,13 +248,12 @@
         "\n",
         "fig,ax = plt.subplots()\n",
         "ax.plot(phi_vals, deriv_vals,'r-')\n",
-        "ax.set_xlabel('Parameter $\\phi$')\n",
+        "ax.set_xlabel(r'Parameter $\\phi$')\n",
-        "ax.set_ylabel('$\\partial/\\partial\\phi\\mathbb{E}_{Pr(x|\\phi)}[f[x]]$')\n",
+        "ax.set_ylabel(r'$\\partial/\\partial\\phi\\mathbb{E}_{Pr(x|\\phi)}[f[x]]$')\n",
         "plt.show()"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "ASu4yKSwAEYI"
@@ -269,7 +263,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "xoFR1wifc8-b"
@@ -366,13 +359,12 @@
         "\n",
         "fig,ax = plt.subplots()\n",
         "ax.plot(phi_vals, deriv_vals,'r-')\n",
-        "ax.set_xlabel('Parameter $\\phi$')\n",
+        "ax.set_xlabel(r'Parameter $\\phi$')\n",
-        "ax.set_ylabel('$\\partial/\\partial\\phi\\mathbb{E}_{Pr(x|\\phi)}[f[x]]$')\n",
+        "ax.set_ylabel(r'$\\partial/\\partial\\phi\\mathbb{E}_{Pr(x|\\phi)}[f[x]]$')\n",
         "plt.show()"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "1TWBiUC7bQSw"
@@ -403,7 +395,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "d-0tntSYdKPR"
@@ -415,9 +406,8 @@
   ],
   "metadata": {
     "colab": {
-      "authorship_tag": "ABX9TyOxO2/0DTH4n4zhC97qbagY",
+      "provenance": [],
-      "include_colab_link": true,
+      "include_colab_link": true
-      "provenance": []
     },
     "kernelspec": {
       "display_name": "Python 3",

index_old.html

@@ -15,8 +15,8 @@
         <ul>
             <li>
                 <p style="font-size: larger; margin-bottom: 0">Download full PDF <a
-                        href="https://github.com/udlbook/udlbook/releases/download/v2.0.2/UnderstandingDeepLearning_03_06_24_C.pdf">here</a>
+                        href="https://github.com/udlbook/udlbook/releases/download/v2.03/UnderstandingDeepLearning_02_26_24_C.pdf">here</a>
-                </p>2024-03-06. CC-BY-NC-ND license<br>
+                </p>2024-03-26. CC-BY-NC-ND license<br>
                 <img src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield">
             </li>
             <li> Order your copy from  <a href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">here </a></li>

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-website-smooth-scroll",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://udlbook.github.io/udlbook/",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.0.2",
+    "react-scripts": "4.0.3",
+    "react-scroll": "^1.8.4",
+    "styled-components": "^5.3.3",
+    "url-loader": "^4.1.1",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.1.1"
+  }
+}

public/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap" rel="stylesheet">
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css

@@ -0,0 +1,6 @@
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0 ;
+    font-family: 'Encode Sans Expanded', sans-serif;
+}

src/App.js

@@ -0,0 +1,19 @@
+import './App.css';
+import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
+import Home from './pages';
+
+
+
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route exact path="/" element ={<Home/>} />      
+      </Routes>
+      
+    </Router>
+  );
+}
+
+export default App;

src/components/ButtonElement.js

@@ -0,0 +1,23 @@
+import styled from  'styled-components'
+import {Link} from 'react-scroll'
+
+
+export const Button= styled(Link)` 
+    border-radius: 50px;
+    background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
+    white-space: nowrap;
+    padding: ${({big}) => (big? ' 14px 48px': '12px 30px')};
+    color: ${({dark}) => (dark ? '#010106': '#fff')};
+    font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')};
+    outline: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+        transition: all 0.2s ease-in-out;
+        background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
+    }
+`

src/components/Footer/FooterElements.js

@@ -0,0 +1,139 @@
+import styled from 'styled-components'
+import {Link} from 'react-router-dom'
+
+export const FooterContainer = styled.footer` 
+    background-color: #101522;
+`
+
+export const FooterWrap = styled.div` 
+    padding: 48x 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 1100px;
+    margin: 0 auto;
+`
+
+export const FooterLinksContainer = styled.div` 
+    display: flex;
+    justify-content: center;
+
+    @media screen and (max-width: 820px){
+        padding-top: 32px;
+    }
+`
+
+export const FooterLinksWrapper = styled.div` 
+    display: flex;
+    @media screen and (max-width: 820px){
+        flex-direction: column;
+    }
+`
+
+export const FooterLinkItems = styled.div` 
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 16px;
+    text-align: left;
+    width: 160px;
+    box-sizing: border-box;
+    color: #fff;
+
+    @media screen and (max-width: 420px){
+        margin: 0;
+        padding: 10px;
+        width: 100%;
+    }
+`
+
+export const FooterLinkTitle = styled.h1` 
+    font-size: 14px;
+    margin-bottom: 16px ; 
+`
+
+export const FooterLink = styled(Link)`
+    color: #ffffff;
+    text-decoration: none;
+    margin-bottom: 0.5rem;
+    font-size: 14px;
+
+    &:hover{
+        color: #01bf71;
+        transition: 0.3s ease-in-out;
+    }
+`
+
+export const SocialMedia = styled.section` 
+    max-width: 1000px;
+    width: 100%;
+`
+
+export const SocialMediaWrap = styled.div` 
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1100px; 
+    margin: 20px auto 0 auto ; 
+
+    @media screen and (max-width: 820px){
+        flex-direction: column;
+    }
+`
+
+export const SocialAttrWrap = styled.div` 
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 1100px; 
+    margin: 10px auto 0 auto ; 
+
+    @media screen and (max-width: 820px){
+        flex-direction: column;
+    }
+`
+
+export const SocialLogo = styled(Link)` 
+    color: #fff;
+    justify-self: start;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    font-weight: bold;
+`
+
+export const WebsiteRights = styled.small` 
+    color: #fff ; 
+    margin-bottom: 8px ; 
+`
+
+export const SocialIcons = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 60px;
+    margin-bottom: 8px ; 
+`
+
+export const SocialIconLink = styled.a` 
+    color: #fff;
+    font-size: 24px;
+`
+
+export const FooterImgWrap = styled.div` 
+    max-width: 555px;
+    height: 100%;
+`
+
+export const FooterImg = styled.img`
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;

src/components/Footer/index.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { FaLinkedin} from 'react-icons/fa'
+import { FooterContainer, FooterWrap, FooterImg } from './FooterElements'
+import { SocialMedia,  SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements'
+import { animateScroll as scroll } from 'react-scroll'
+import twitterImg from '../../images/square-x-twitter.svg'
+
+const Footer = () => {
+    const toggleHome = () => {
+        scroll.scrollToTop();
+    }
+
+    return (
+        <>
+            <FooterContainer>
+                <FooterWrap>
+                    <SocialMedia>
+                        <SocialMediaWrap>
+                            <SocialLogo to='/' onClick={toggleHome}>
+                                Understanding Deep Learning
+                            </SocialLogo>
+                            <WebsiteRights>©{new Date().getFullYear()} Simon J.D. Prince</WebsiteRights>
+                            <WebsiteRights>
+                            Images by StorySet on FreePik: <a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933"> [1] </a> <a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">[2]</a> <a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153"> [3]</a>  <a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649"> [4]</a> 
+                            </WebsiteRights>
+                            <SocialIcons>
+                                <SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter">
+                                    <FooterImg src={twitterImg} alt="twitter"/>
+                                </SocialIconLink>
+                                <SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn">
+                                    <FaLinkedin/>
+                                </SocialIconLink>
+                            </SocialIcons>
+                        </SocialMediaWrap>
+                    </SocialMedia>
+                </FooterWrap>  
+            </FooterContainer>  
+        </>
+    )
+}
+
+export default Footer

src/components/HeroSection/HeroElements.js

@@ -0,0 +1,242 @@
+import styled from "styled-components";
+
+export const HeroContainer = styled.div`
+    background: #57c6d1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0px;
+    position: static;
+    z-index: 1;
+    }
+`
+
+
+
+export const HeroContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 24px;
+    margin: 80px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center ; 
+`
+export const HeroH1 = styled.h1` 
+    color: #fff;
+    font-size: 48px;
+    text-align: center;
+
+    @media screen and (max-width: 768px) {
+        font-size: 40px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 32px;
+    }
+
+`
+
+export const HeroP = styled.p` 
+    margin-top: 24px;
+    color: #fff;
+    font-size: 24px ; 
+    text-align: center ; 
+    max-width: 600px ; 
+
+    
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+export const HeroBtnWrapper = styled.div`
+    margin-top: 32px ; 
+    display: flex;
+    flex-direction: column ; 
+    align-items: center ; 
+`
+
+
+export const HeroRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: top;
+    grid-template-areas:  'col1 col2' };
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: 'col2' 'col1';
+    }
+`
+
+
+export const HeroNewsItem = styled.div`
+    margin-left: 4px;
+    color: #000000;
+    font-size: 16px;
+    // line-height: 16px;
+    margin-bottom: 16px;
+    display: flex;  
+    justify-content: start;
+`
+export const HeroNewsItemDate = styled.div`
+    width: 20%;
+    font-size: 16px ; 
+    margin-right: 20px ; 
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+export const HeroNewsItemContent = styled.div`
+    width: 80%; 
+    color: #000000;
+    font-size: 16px ; 
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+
+
+export const HeroColumn1 = styled.div` 
+    margin-bottom: 15px;
+    margin-left: 12px;
+    margin-top: 60px;
+    padding: 10px 15px;
+    padding: 0 15px;
+    grid-area: col1;
+    align-items:left;
+    display: flex;
+    flex-direction:column;
+    justify-content: space-between;
+`
+
+
+export const HeroColumn2 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col2;
+    display: flex;
+    align-items:center;
+    flex-direction:column;
+`
+
+export const TextWrapper = styled.div`
+    max-width: 540px ; 
+    padding-top: 0;
+    padding-bottom: 0;
+`
+export const HeroImgWrap = styled.div` 
+    max-width: 555px;
+    height: 100%;
+`
+
+export const Img = styled.img`
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+export const HeroDownloadsImg = styled.img`
+    margin-top: 5px;
+    margin-right: 0;
+    margin-left: 0;
+    padding-right: 0;
+    margin-bottom: 10px;
+`
+
+export const HeroLink = styled.a`
+  color: #fff;
+  text-decoration: none;
+  padding: 0.1rem 0rem;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+
+  &.active {
+    color: #000
+    border-bottom: 3px solid #01bf71;
+  }
+`;
+
+
+export const HeroNewsTitle = styled.div` 
+    margin-left: 0px;
+    color: #000000;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 16px;
+    margin-bottom: 36px; 
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+export const HeroCitationTitle = styled.div` 
+    margin-left: 0px;
+    color: #000000;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 16px;
+    margin-bottom: 10px; 
+    margin-top:36px;
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+
+export const HeroNewsBlock = styled.div`
+
+`
+export const HeroCitationBlock = styled.div`
+    font-size: 14px;
+    margin-bottom: 0px;
+    margin-top: 0px;
+
+`
+
+
+
+
+export const HeroFollowBlock = styled.div`
+@media screen and (max-width: 768px) {
+    font-size: 24px;
+}
+
+@media screen and (max-width: 480px) {
+    font-size: 18px;
+}
+`

src/components/HeroSection/index.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent} from './HeroElements'
+import img from '../../images/F23.prince.learning.turquoise.jpg'
+
+const HeroSection = () => {
+
+
+    const citation = `
+@book{prince2023understanding,
+    author = "Simon J.D. Prince",
+    title = "Understanding Deep Learning",
+    publisher = "The MIT Press",
+    year = 2023,
+    url = "http://udlbook.com"}
+    `
+ 
+    return (
+        <HeroContainer id="home">
+            <HeroContent>
+                <HeroRow>
+                    <HeroColumn1>
+                        <HeroNewsBlock>
+                            <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>03/12/24</HeroNewsItemDate>
+                                <HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>02/15/24</HeroNewsItemDate>
+                                <HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
+                            </HeroNewsItem>
+    
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>01/29/24</HeroNewsItemDate>
+                                <HeroNewsItemContent> New blog about <a href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </a> published.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/26/23</HeroNewsItemDate>
+                                <HeroNewsItemContent> Machine Learning Street Talk  <a href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </a>  discussing book.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/19/23</HeroNewsItemDate>
+                                <HeroNewsItemContent>Deeper Insights <a href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</a> discussing book.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/06/23</HeroNewsItemDate>
+                                <HeroNewsItemContent> I did an <a href="https://www.borealisai.com/news/understanding-deep-learning/">interview</a> discussing the book with Borealis AI.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/05/23</HeroNewsItemDate>
+                                <HeroNewsItemContent> Book released by <a href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</a>.</HeroNewsItemContent>
+                            </HeroNewsItem>
+                        </HeroNewsBlock>
+                        <HeroFollowBlock>
+                            Follow me on <a href="https://twitter.com/SimonPrinceAI">Twitter</a> or <a
+                            href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</a> for updates.
+                        </HeroFollowBlock>
+                        <HeroCitationTitle>CITATION:</HeroCitationTitle>
+                        <HeroCitationBlock>
+                            <pre>
+                                <code>
+                                    <React.Fragment>{citation}</React.Fragment>
+                                </code>
+                            </pre>
+                        </HeroCitationBlock>
+                    </HeroColumn1>
+                    <HeroColumn2>
+                        <HeroImgWrap>
+                            <Img src={img} alt="book cover"/>
+                        </HeroImgWrap>
+                        <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v2.03/UnderstandingDeepLearning_02_26_24_C.pdf">Download full pdf</HeroLink>
+                        <HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/>
+                        <HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink>
+                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink>
+                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Find/Report Errata</HeroLink>
+                    </HeroColumn2>
+                </HeroRow>
+            </HeroContent>
+        </HeroContainer>
+    )
+}
+
+export default HeroSection

src/components/Instructors/InstructorsElements.js

@@ -0,0 +1,130 @@
+import styled from "styled-components";
+
+
+export const InstructorsContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
+
+    @media screen and (max-width: 768px) {
+        padding: 100px 0;
+    }
+`
+
+export const InstructorsWrapper = styled.div`
+    display: grid ; 
+    z-index: 1;
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const InstructorsRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    }
+`
+
+export const InstructorsRow2 = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: top;
+    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    }
+`
+
+
+export const Column1 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col1;
+`
+
+export const Column2 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col2;
+`
+
+export const TextWrapper = styled.div`
+    max-width: 540px ; 
+    padding-top: 0;
+    padding-bottom: 0;
+`
+
+export const TopLine = styled.p` 
+    color: #773c23;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+`
+
+export const Heading= styled.h1` 
+
+    margin-bottom: 24px;
+    font-size: 48px;
+    line-height: 1.1;
+    font-weight: 600;
+    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    
+    @media screen and (max-width: 480px)
+    {
+        font-size: 32px;
+    }
+`
+
+
+export const Subtitle = styled.p` 
+    max-width: 440px;
+    margin-bottom: 35px;
+    font-size: 18px;
+    line-height: 24px;
+    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+
+`
+
+export const BtnWrap = styled.div`
+    display: flex;
+    justify-content: flex-start;
+`
+
+export const ImgWrap = styled.div` 
+    max-width: 555px;
+    height: 100%;
+`
+
+export const Img = styled.img`
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+
+export const InstructorsContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 0px;
+    margin: 10px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: left ; 
+    list-style-position: inside;
+`

src/components/Instructors/index.js

@@ -0,0 +1,178 @@
+import React from 'react'
+import { ImgWrap, Img, InstructorsContainer, InstructorsContent, InstructorsRow2, InstructorsWrapper, InstructorsRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './InstructorsElements'
+
+// export const homeObjOne = {
+//     id: 'about',
+//     lightBg: false,
+//     lightText: true,
+//     lightTextDesc: true,
+//     topLine: 'Premium Bank',
+//     headline: 'Unlimited transactions with zero fees',
+//     description:
+//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
+//     buttonLabel: 'Get Started',
+//     imgStart: false,
+//     img: require('../../images/svg-1.svg').default,
+//     alt: 'Car',
+//     dark: true,
+//     primary: true,
+//     darkText: false
+//   };
+
+import img from '../../images/instructor.svg'
+
+
+
+const InstructorsSection = () => {
+    return (
+        <>
+            <InstructorsContainer lightBg={true} id='Instructors'>
+                <InstructorsWrapper>
+                    <InstructorsRow imgStart={false}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>Instructors</TopLine>
+                                <Heading lightText={false}>Resources for instructors</Heading>
+                                <Subtitle darkText={true}>All the figures in vector and image formats, full slides for first twelve chapters, instructor answer booklet</Subtitle>
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt='Car'/>
+                            </ImgWrap>
+                        </Column2>
+                    </InstructorsRow>
+                    <InstructorsRow2>
+                        <Column1>
+                            <TopLine>Register</TopLine>
+                            <a href="https://mitpress.ublish.com/request?cri=15055">Register</a> with MIT Press for answer booklet.
+                            <InstructorsContent>
+
+                            </InstructorsContent>
+                           
+                            <TopLine>Full slides</TopLine>
+                            <InstructorsContent>
+                                Slides for 20 lecture undergraduate deep learning course:
+                            </InstructorsContent>
+                            <InstructorsContent>
+                                <ol>
+                                    <li>Introduction <a href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">PPTX</a></li>
+                                    <li>Supervised Learning <a href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">PPTX</a></li>
+                                    <li>Shallow Neural Networks <a href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">PPTX</a></li>
+                                    <li>Deep Neural Networks <a href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">PPTX</a></li>
+                                    <li>Loss Functions <a href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">PPTX</a></li>
+                                    <li>Fitting Models <a href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">PPTX</a></li>
+                                    <li>Computing Gradients <a href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">PPTX</a></li>
+                                    <li>Initialization <a href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">PPTX</a></li>
+                                    <li>Performance <a href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">PPTX</a></li>
+                                    <li>Regularization <a href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">PPTX</a></li>
+                                    <li>Convolutional Networks <a href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">PPTX</a></li>
+                                    <li>Image Generation <a href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">PPTX</a></li>
+                                    <li>Transformers and LLMs <a href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">PPTX</a></li>
+                                </ol>
+                             </InstructorsContent>
+                        </Column1>
+                        <Column2>
+                            <TopLine>Figures</TopLine>
+                            <InstructorsContent>
+                            <ol>
+                                <li> Introduction: <a href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv"> SVG</a> / <a href="https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX </a></li>
+
+                            <li> Supervised learning: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla"> SVG</a> / <a href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Shallow neural networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI"> SVG</a> / <a href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Deep neural networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa"> SVG</a>
+                                    /
+                                    <a href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Loss functions: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">PDF
+                                    </a> / <a href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
+                                    SVG
+                                    </a> / <a
+                                        href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Training models: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">PDF
+                                    </a> / <a href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
+                                    SVG
+                                    </a> / <a
+                                        href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Gradients and initialization: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs"> SVG</a> / <a href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Measuring performance: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx"> SVG</a> / <a href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Regularization: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">PDF
+                                    </a> / <a href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
+                                    SVG
+                                    </a> / <a
+                                        href="https://docs.google.com/presentation/d/1VwIfvjpdfTny6sEfu4ZETwCnw6m8Eg-5/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Convolutional networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1-Wb3VzaSvVeRzoUzJbI2JjZE0uwqupM9"> SVG</a> / <a href="https://docs.google.com/presentation/d/1MtfKBC4Y9hWwGqeP6DVwUNbi1j5ncQCg/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Residual networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1Mr58jzEVseUAfNYbGWCQyDtEDwvfHRi1"> SVG</a> / <a href="https://docs.google.com/presentation/d/1saY8Faz0KTKAAifUrbkQdLA2qkyEjOPI/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Transformers: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap12PDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1txzOVNf8-jH4UfJ6SLnrtOfPd1Q3ebzd">
+                                    SVG</a> / <a
+                                        href="https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Graph neural networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1lQIV6nRp6LVfaMgpGFhuwEXG-lTEaAwe"> SVG</a> / <a href="https://docs.google.com/presentation/d/1YwF3U82c1mQ74c1WqHVTzLZ0j7GgKaWP/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Unsupervised learning: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1aMbI6iCuUvOywqk5pBOmppJu1L1anqsM"> SVG</a> / <a href="https://docs.google.com/presentation/d/1A-lBGv3NHl4L32NvfFgy1EKeSwY-0UeB/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                        PPTX</a></li>
+                                <li> GANs: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1EErnlZCOlXc3HK7m83T2Jh_0NzIUHvtL"> SVG</a> / <a href="https://docs.google.com/presentation/d/10Ernk41ShOTf4IYkMD-l4dJfKATkXH4w/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Normalizing flows: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap16PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1B9bxtmdugwtg-b7Y4AdQKAIEVWxjx8l3"> SVG</a> / <a href="https://docs.google.com/presentation/d/1nLLzqb9pdfF_h6i1HUDSyp7kSMIkSUUA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Variational autoencoders: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1SNtNIY7khlHQYMtaOH-FosSH3kWwL4b7"> SVG</a> / <a href="https://docs.google.com/presentation/d/1lQE4Bu7-LgvV2VlJOt_4dQT-kusYl7Vo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Diffusion models: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r"> SVG</a> / 
+                                    <a href="https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                    PPTX</a></li>
+                                <li> Deep reinforcement learning: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0"> SVG</a> / <a href="https://docs.google.com/presentation/d/1TnYmVbFNhmMFetbjyfXGmkxp1EHauMqr/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                        PPTX </a></li>
+                                <li> Why does deep learning work?: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1M2d0DHEgddAQoIedKSDTTt7m1ZdmBLQ3"> SVG</a> / <a href="https://docs.google.com/presentation/d/1coxF4IsrCzDTLrNjRagHvqB_FBy10miA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                        PPTX</a></li>
+                                <li> Deep learning and ethics: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1jixmFfwmZkW_UVYzcxmDcMsdFFtnZ0bU">SVG</a> / <a
+                                            href="https://docs.google.com/presentation/d/1EtfzanZYILvi9_-Idm28zD94I_6OrN9R/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Appendices - <a href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLAppendixPDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1k2j7hMN40ISPSg9skFYWFL3oZT7r8v-l">
+                                    SVG</a> / <a
+                                        href="https://docs.google.com/presentation/d/1_2cJHRnsoQQHst0rwZssv-XH4o5SEHks/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                            </ol>
+                            </InstructorsContent>
+                            <a href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">Instructions</a> for editing equations in figures.
+
+                            <InstructorsContent>
+                                
+                            </InstructorsContent>
+                        </Column2>
+                    </InstructorsRow2>
+
+                </InstructorsWrapper>
+            </InstructorsContainer>
+        </>
+    )
+}
+
+export default InstructorsSection

src/components/Media/MediaElements.js

@@ -0,0 +1,139 @@
+import styled from "styled-components";
+
+
+export const MediaContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
+
+    @media screen and (max-width: 768px) {
+        padding: 100px 0;
+    }
+`
+
+export const MediaWrapper = styled.div`
+    display: grid ; 
+    z-index: 1;
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const MediaRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    }
+`
+
+export const Column1 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col1;
+`
+
+export const Column2 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col2;
+`
+
+export const TextWrapper = styled.div`
+    max-width: 540px ; 
+    padding-top: 0;
+    padding-bottom: 0;
+`
+
+export const TopLine = styled.p` 
+    color: #57c6d1;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+`
+
+export const Heading= styled.h1` 
+
+    margin-bottom: 24px;
+    font-size: 48px;
+    line-height: 1.1;
+    font-weight: 600;
+    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    
+    @media screen and (max-width: 480px)
+    {
+        font-size: 32px;
+    }
+`
+
+
+export const Subtitle = styled.p` 
+    max-width: 440px;
+    margin-bottom: 35px;
+    font-size: 18px;
+    line-height: 24px;
+    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+
+`
+
+export const BtnWrap = styled.div`
+    display: flex;
+    justify-content: flex-start;
+`
+
+export const ImgWrap = styled.div` 
+    max-width: 555px;
+    height: 100%;
+`
+
+export const Img = styled.img`
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+
+export const MediaTextBlock = styled.div`
+@media screen and (max-width: 768px) {
+    font-size: 24px;
+}
+
+@media screen and (max-width: 480px) {
+    font-size: 18px;
+}
+`
+
+export const MediaContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 0px;
+    margin: 10px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: left ; 
+    list-style-position: inside;
+`
+
+export const MediaRow2 = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: top;
+    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    }
+`

src/components/Media/index.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { ImgWrap, Img, MediaContainer, MediaContent, MediaWrapper, MediaRow, MediaRow2, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './MediaElements'
+
+// export const homeObjOne = {
+//     id: 'about',
+//     lightBg: false,
+//     lightText: true,
+//     lightTextDesc: true,
+//     topLine: 'Premium Bank',
+//     headline: 'Unlimited transactions with zero fees',
+//     description:
+//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
+//     buttonLabel: 'Get Started',
+//     imgStart: false,
+//     img: require('../../images/svg-1.svg').default,
+//     alt: 'Car',
+//     dark: true,
+//     primary: true,
+//     darkText: false
+//   };
+
+import img from '../../images/media.svg'
+
+
+
+const MediaSection = () => {
+    return (
+        <>
+            <MediaContainer lightBg={false} id='Media'>
+                <MediaWrapper>
+                    <MediaRow imgStart={true}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>Media</TopLine>
+                                <Heading lightText={true}> Reviews, videos, podcasts, interviews</Heading>
+                                <Subtitle darkText={false}>Various resources connected to the book</Subtitle>                            
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt='Car'/>
+                            </ImgWrap>
+                        </Column2>
+                    </MediaRow>
+                    <MediaRow>
+                        <Column1>
+                            Machine learning street talk podcast
+                            <iframe width="560" height="315" src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        </Column1>
+                        <Column2>
+                        Deeper insights podcast 
+                        <iframe width="560" height="315" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        </Column2>
+                    </MediaRow>
+                    <MediaRow2>
+                        <Column1>
+                            <TopLine>Reviews</TopLine>
+                            <MediaContent>
+                                <ul>
+                                    <li> Amazon <a href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">reviews</a></li>          
+                                    <li>Goodreads <a href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">reviews </a></li>
+                                    <li>Book <a href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">review</a> by Vishal V.</li>
+                                </ul>
+                            </MediaContent>
+                        </Column1>
+                        <Column2>
+                            <TopLine>Interviews</TopLine>
+                            <MediaContent>
+                                <ul>
+                                    <li>Borealis AI <a href="https://www.borealisai.com/news/understanding-deep-learning/">interview</a></li>
+                                    <li>Shepherd ML book <a href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">recommendations</a></li>
+                                </ul>
+                            </MediaContent>
+                        </Column2>
+                    </MediaRow2>
+
+                </MediaWrapper>
+            </MediaContainer>
+        </>
+    )
+}
+
+export default MediaSection

src/components/More/MoreElements.js

@@ -0,0 +1,167 @@
+import styled from "styled-components";
+
+
+export const MoreContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
+
+    @media screen and (max-width: 768px) {
+        padding: 100px 0;
+    }
+`
+
+export const MoreWrapper = styled.div`
+    display: grid ; 
+    z-index: 1;
+    // height: 1050px ;  
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const MoreRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    }
+`
+
+export const MoreRow2 = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: top;
+    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    }
+`
+
+
+export const Column1 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col1;
+`
+
+export const Column2 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col2;
+`
+
+export const TextWrapper = styled.div`
+    max-width: 540px ; 
+    padding-top: 0;
+    padding-bottom: 0;
+`
+
+export const TopLine = styled.p` 
+    color: #773c23;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 16px ; 
+`
+
+export const Heading= styled.h1` 
+
+    margin-bottom: 24px;
+    font-size: 48px;
+    line-height: 1.1;
+    font-weight: 600;
+    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    
+    @media screen and (max-width: 480px)
+    {
+        font-size: 32px;
+    }
+`
+
+
+export const Subtitle = styled.p` 
+    max-width: 440px;
+    margin-bottom: 35px;
+    font-size: 18px;
+    line-height: 24px;
+    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+
+`
+
+export const BtnWrap = styled.div`
+    display: flex;
+    justify-content: flex-start;
+`
+
+export const ImgWrap = styled.div` 
+    max-width: 555px;
+    height: 100%;
+`
+
+export const Img = styled.img`
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+
+export const MoreContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 0px;
+    margin: 10px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: left ; 
+    list-style-position: inside;
+`
+
+export const MoreOuterList = styled.ul`
+    // list-style:none;
+    list-style-position: inside;
+    margin:0;
+`
+
+export const MoreInnerList = styled.ul`
+    list-style-position: inside;
+`
+
+export const MoreInnerP = styled.p`
+    padding-left: 18px;
+    padding-bottom: 10px ; 
+    padding-top: 3px ; 
+    font-size:14px;
+    color: #fff
+`
+
+export const MoreLink = styled.a`
+  color: #fff;
+  text-decoration: none;
+  padding: 0.1rem 0rem;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+
+  &.active {
+    color: #000
+    border-bottom: 3px solid #01bf71;
+  }
+`;

src/components/More/index.js

@@ -0,0 +1,750 @@
+import React from 'react'
+import { ImgWrap, Img, MoreContainer, MoreRow2, MoreWrapper, MoreRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle, MoreOuterList, MoreInnerList, MoreInnerP} from './MoreElements'
+import img from '../../images/more.svg'
+
+
+const MoreSection = () => {
+    return (
+        <>
+            <MoreContainer lightBg={true} id='More'>
+                <MoreWrapper> 
+                    <MoreRow imgStart={false}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>More</TopLine>
+                                <Heading lightText={false}>Further reading</Heading>
+                                <Subtitle darkText={true}>Other articles, blogs, and books that I have written. Most in a similar style and using the same notation as Understanding Deep Learning. </Subtitle>
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt='Car'/>
+                            </ImgWrap>
+                        </Column2>
+                    </MoreRow>
+                    <MoreRow2>
+                     
+                        <Column1>
+                            <TopLine>Book</TopLine>
+                                <MoreOuterList>
+                                    <li>
+                                        <a href="http://computervisionmodels.com" target="_blank" rel="noreferrer">Computer vision: models, learning, and inference</a>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                <li> 2012 book published with CUP </li>
+                                                <li> Focused on probabilistic models </li>
+                                                <li> Pre-"deep learning" </li>
+                                                <li> Lots of ML content</li>
+                                                <li> Individual chapters available below</li>
+                                            </MoreInnerList> 
+                                        </MoreInnerP>
+                                    </li>
+                                </MoreOuterList>
+
+                            <TopLine>Transformers & LLMs</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/" target="_blank"  rel="noreferrer">Intro to LLMs</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> What is an LLM?</li>
+                                            <li> Pretraining</li>
+                                            <li> Instruction fine-tuning</li>
+                                            <li> Reinforcement learning from human feedback</li>
+                                            <li> Notable LLMs</li>
+                                            <li> LLMs without training from scratch</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/" target="_blank"  rel="noreferrer">Transformers I</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Dot-Product self-attention </li>
+                                            <li> Scaled dot-product self-attention </li>
+                                            <li> Position encoding</li>
+                                            <li> Multiple heads </li>
+                                            <li> Transformer block </li>
+                                            <li> Encoders </li>
+                                            <li> Decoders </li>
+                                            <li> Encoder-Decoders </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/" target="_blank"  rel="noreferrer">Transformers II</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Sinusoidal position embeddings </li>
+                                            <li> Learned position embeddings </li>
+                                            <li> Relatives vs. absolute position embeddings</li>
+                                            <li> Extending transformers to longer sequences </li>
+                                            <li> Reducing attention matrix size </li>
+                                            <li> Making attention matrix sparse </li>
+                                            <li> Kernelizing attention computation </li>
+                                            <li> Attention as an RNN</li>
+                                            <li> Attention as a hypernetwork </li>
+                                            <li> Attention as a routing network </li>
+                                            <li> Attention and graphs </li>
+                                            <li> Attention and convolutions </li>
+                                            <li> Attention and gating </li>
+                                            <li> Attention and memory retrieval </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/" target="_blank"  rel="noreferrer">Transformers III</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Tricks for training transformers </li>
+                                            <li> Why are these tricks required? </li>
+                                            <li> Removing layer normalization</li>
+                                            <li> Balancing residual dependencies </li>
+                                            <li> Reducing optimizer variance </li>
+                                            <li> How to train deeper transformers on small datasets </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/" target="_blank"  rel="noreferrer">Training and fine-tuning LLMs</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Large language models </li>
+                                            <li> Pretraining </li>
+                                            <li> Supervised fine tuning</li>
+                                            <li> Reinforcement learning from human feedback </li>
+                                            <li> Direct preference optimization</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/" target="_blank"  rel="noreferrer">Speeding up inference in LLMs</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Problems with transformers</li>
+                                            <li> Attention-free transformers </li>
+                                            <li> Complexity</li>
+                                            <li> RWKV </li>
+                                            <li> Linear transformers and performers</li>
+                                            <li> Retentive network</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+
+                            <TopLine>Math for machine learning</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing" target="_blank"  rel="noreferrer">Linear algebra</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Vectors and matrices </li>
+                                            <li> Determinant and trace </li>
+                                            <li> Orthogonal matrices </li>
+                                            <li> Null space </li>
+                                            <li> Linear transformations </li>
+                                            <li> Singular value decomposition </li>
+                                            <li> Least squares problems </li>
+                                            <li> Principal direction problems </li>
+                                            <li> Inversion of block matrices</li>
+                                            <li> Schur complement identity</li>
+                                            <li> Sherman-Morrison-Woodbury</li>
+                                            <li> Matrix determinant lemma</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing" target="_blank"  rel="noreferrer">Introduction to probability</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Random variables </li>
+                                            <li> Joint probability </li>
+                                            <li> Marginal probability </li>
+                                            <li> Conditional probability </li>
+                                            <li> Bayes' rule </li>
+                                            <li> Independence </li>
+                                            <li> Expectation </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing" target="_blank"  rel="noreferrer">Probability distributions</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Bernouilli distribution </li>
+                                            <li> Beta distribution</li>
+                                            <li> Categorical distribution </li>
+                                            <li> Dirichlet distribution</li>
+                                            <li> Univariate normal distribution </li>
+                                            <li> Normal inverse-scaled gamma distribution </li>
+                                            <li> Multivariate normal distribution </li>
+                                            <li> Normal inverse Wishart distribution </li>
+                                            <li> Conjugacy </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing" target="_blank"  rel="noreferrer">Fitting probability distributions</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Maximum likelihood </li>
+                                            <li> Maximum a posteriori </li>
+                                            <li> Bayesian approach </li>
+                                            <li> Example: fitting normal </li>
+                                            <li> Example: fitting categorical </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing" target="_blank"  rel="noreferrer">The normal distribution</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Types of covariance matrix </li>
+                                            <li> Decomposition of covariance </li>
+                                            <li> Linear transformations </li>
+                                            <li> Marginal distributions </li>
+                                            <li> Conditional distributions </li>
+                                            <li> Product of two normals </li>
+                                            <li> Change of variable formula </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+
+                            <TopLine>Optimization</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing" target="_blank"  rel="noreferrer">Gradient-based optimmization</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Convexity </li>
+                                            <li> Steepest descent </li>
+                                            <li> Newton's method </li>
+                                            <li> Gauss-Newton method </li>
+                                            <li> Line search </li>
+                                            <li> Reparameterization </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/" target="_blank"  rel="noreferrer">Bayesian optimization</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Gaussian processes </li>
+                                            <li> Acquisition functions </li>
+                                            <li> Incorporating noise</li>
+                                            <li> Kernel choice </li>
+                                            <li> Learning GP parameters </li>
+                                            <li> Tips, tricks, and limitations  </li>
+                                            <li> Beta-Bernoulli bandit  </li>
+                                            <li> Random forests for BO </li>
+                                            <li> Tree-Parzen estimators </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/" target="_blank"  rel="noreferrer">SAT Solvers I</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Boolean logic and satisfiability </li>
+                                            <li> Conjunctive normal form </li>
+                                            <li> The Tseitin transformation </li>
+                                            <li> SAT and related problems </li>
+                                            <li> SAT constructions </li>
+                                            <li> Graph coloring and scheduling </li>
+                                            <li> Fitting binary neural networks</li>
+                                            <li> Fitting decision trees</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/" target="_blank"  rel="noreferrer">SAT Solvers II</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Conditioning </li>
+                                            <li> Resolution </li>
+                                            <li> Solving 2-SAT by unit propagation </li>
+                                            <li> Directional resolution </li>
+                                            <li> SAT as binary search </li>
+                                            <li> DPLL </li>
+                                            <li> Conflict driven clause learning</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank"  rel="noreferrer">SAT Solvers III</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Satisfiability vs. problem size </li>
+                                            <li> Factor graph representation </li>
+                                            <li> Max product / sum product for SAT </li>
+                                            <li> Survey propagation </li>
+                                            <li> SAT with non-binary variables </li>
+                                            <li> SMT solvers </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank"  rel="noreferrer">SAT Solvers III</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Satisfiability vs. problem size </li>
+                                            <li> Factor graph representation </li>
+                                            <li> Max product / sum product for SAT </li>
+                                            <li> Survey propagation </li>
+                                            <li> SAT with non-binary variables </li>
+                                            <li> SMT solvers </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+
+                            <TopLine>Computer vision</TopLine>
+                                <MoreOuterList>
+                                    <li>
+                                        <a href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing" target="_blank" rel="noreferrer">Image Processing</a>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                <li> Whitening </li>
+                                                <li> Histogram equalization </li>
+                                                <li> Filtering </li>
+                                                <li> Edges and corners </li>
+                                                <li> Dimensionality reduction </li>
+                                            </MoreInnerList> 
+                                        </MoreInnerP>
+                                    </li>
+                                    <li>
+                                        <a href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing" target="_blank" rel="noreferrer">Pinhole camera</a>
+                                        <MoreInnerP>
+                                            <MoreInnerList> 
+                                                <li> Pinhole camera model </li>
+                                                <li> Radial distortion </li>
+                                                <li> Homogeneous coordinates </li>
+                                                <li> Learning extrinsic parameters </li>
+                                                <li> Learning intrinsic parameters </li>
+                                                <li> Inferring three-dimensional world points </li>
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing" target="_blank" rel="noreferrer">Geometric transformations</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Euclidean, similarity, affine, projective transformations </li>
+                                            <li> Fitting transformation models </li>
+                                            <li> Inference in transformation models </li>
+                                            <li> Three geometric problems for planes </li>
+                                            <li> Transformations between images </li>
+                                            <li> Robust learning of transformations </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing" target="_blank" rel="noreferrer">Multiple cameras</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Two view geometry </li>
+                                            <li> The essential matrix </li>
+                                            <li> The fundamental matrix </li>
+                                            <li> Two-view reconstruction pipeline </li>
+                                            <li> Rectification </li>
+                                            <li> Multiview reconstruction </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>  
+
+                            <TopLine>Reinforcement learning</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://arxiv.org/abs/2307.05979" target="_blank"  rel="noreferrer">Transformers in RL</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Challenges in RL</li>
+                                            <li> Advantages of transformers for RL</li>
+                                            <li> Representation learning</li>
+                                            <li> Transition function learning</li>
+                                            <li> Reward learning </li>
+                                            <li> Policy learning </li>
+                                            <li> Training strategy </li>
+                                            <li> Interpretability </li>
+                                            <li> Applications </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+                        </Column1>
+
+                        {/* ########################################### */}
+
+                        <Column2>
+                            <TopLine>AI Theory</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://www.borealisai.com/research-blogs/gradient-flow/" target="_blank"  rel="noreferrer">Gradient flow</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Gradient flow </li>
+                                            <li> Evolution of residual </li>
+                                            <li> Evolution of parameters </li>
+                                            <li> Evolution of model predictions </li>
+                                            <li> Evolution of prediction covariance </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                <a href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/" target="_blank"  rel="noreferrer">Neural tangent kernel</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Infinite width neural networks </li>
+                                            <li> Training dynamics </li>
+                                            <li> Empirical NTK for shallow network</li>
+                                            <li> Analytical NTK for shallow network </li>
+                                            <li> Empirical NTK for ddep network </li>
+                                            <li> Analtical NTK for deep network</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+
+                            <TopLine>Temporal models</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing" target="_blank"  rel="noreferrer">Temporal models</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Kalman filter </li>
+                                            <li> Smoothing </li>
+                                            <li> Extended Kalman filter </li>
+                                            <li> Unscented Kalman filter </li>
+                                            <li> Particle filtering </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+
+                            <TopLine> Unsupervised learning</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing" target="_blank"  rel="noreferrer">Modeling complex data densities</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Hidden variables </li>
+                                            <li> Expectation maximization </li>
+                                            <li> Mixture of Gaussians </li>
+                                            <li> The t-distribution </li>
+                                            <li> Factor analysis </li>
+                                            <li> The EM algorithm in detail </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/" target="_blank"  rel="noreferrer">Variational autoencoders</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Non-linear latent variable models </li>
+                                            <li> Evidence lower bound (ELBO) </li>
+                                            <li> ELBO properties </li>
+                                            <li> Variational approximation </li>
+                                            <li> The variational autoencoder </li>
+                                            <li> Reparameterization trick </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://arxiv.org/abs/1908.09257" target="_blank"  rel="noreferrer">Normalizing flows: introduction and review</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                        <li> Normalizing flows </li>
+                                        <li> Elementwise and linear flows </li>
+                                        <li> Planar and radial flows </li>
+                                        <li> Coupling and auto-regressive flows </li>
+                                        <li> Coupling functions </li>
+                                        <li> Residual flows </li>
+                                        <li> Infinitesimal (continuous) flows </li>
+                                        <li> Datasets and performance </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+                            <TopLine>Graphical Models</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing" target="_blank"  rel="noreferrer">Graphical models</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Conditional independence </li>
+                                            <li> Directed graphical models </li>
+                                            <li> Undirected graphical models </li>
+                                            <li> Inference in graphical models </li>
+                                            <li> Sampling in graphical models </li>
+                                            <li> Learning in graphical models </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing" target="_blank"  rel="noreferrer">Models for chains and trees</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Hidden Markov models </li>
+                                            <li> Viterbi algorithm </li>
+                                            <li> Forward-backward algorithm </li>
+                                            <li> Belief propagation </li>
+                                            <li> Sum product algorithm </li>
+                                            <li> Extension to trees </li>
+                                            <li> Graphs with loops </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing" target="_blank"  rel="noreferrer">Models for grids</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Markov random fields </li>
+                                            <li> MAP inference in binary pairwise MRFs </li>
+                                            <li> Graph cuts </li>
+                                            <li> Multi-label pairwise MRFs </li>
+                                            <li> Alpha-expansion algorithm </li>
+                                            <li> Conditional random fields </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+
+                            <TopLine>Machine learning</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing" target="_blank"  rel="noreferrer">Learning and inference</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Discriminative models </li>
+                                            <li> Generative models </li>
+                                            <li> Example: regression </li>
+                                            <li> Example: classification </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing" target="_blank"  rel="noreferrer">Regression models</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Linear regression </li>
+                                            <li> Bayesian linear regression </li>
+                                            <li> Non-linear regression </li>
+                                            <li> Bayesian non-linear regression </li>
+                                            <li> The kernel trick </li>
+                                            <li> Gaussian process regression </li>
+                                            <li> Sparse linear regression </li>
+                                            <li> Relevance vector regression </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing" target="_blank"  rel="noreferrer">Classification models</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Logistic regression </li>
+                                            <li> Bayesian logistic regression </li>
+                                            <li> Non-linear logistic regression </li>
+                                            <li> Gaussian process classification </li>
+                                            <li> Relevance vector classification </li>
+                                            <li> Incremental fitting: boosting and trees </li>
+                                            <li> Multi-class logistic regression </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/" target="_blank"  rel="noreferrer">Few-shot learning and meta-learning I</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Meta-learning framework </li>
+                                            <li> Approaches to meta-learning </li>
+                                            <li> Matching networks </li>
+                                            <li> Prototypical networks </li>
+                                            <li> Relation networks </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/" target="_blank"  rel="noreferrer">Few-shot learning and meta-learning II</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> MAML & Reptile </li>
+                                            <li> LSTM based meta-learning </li>
+                                            <li> Reinforcement learning based approaches</li>
+                                            <li> Memory augmented neural networks </li>
+                                            <li> SNAIL </li>
+                                            <li> Generative models </li>
+                                            <li> Data augmentation approaches </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                           </MoreOuterList>
+
+                           <TopLine>Natural language processing</TopLine>
+                           <MoreOuterList>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/" target="_blank"  rel="noreferrer">Neural natural language generation I</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Encoder-decoder architecture </li>
+                                            <li> Maximum-likelihood training </li>
+                                            <li> Greedy search </li>
+                                            <li> Beam search </li>
+                                            <li> Diverse beam search </li>
+                                            <li> Top-k sampling </li>
+                                            <li> Nucleus sampling </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/" target="_blank"  rel="noreferrer">Neural natural language generation II</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Fine-tuning with reinforcement learning </li>
+                                            <li> Training from scratch with RL </li>
+                                            <li> RL vs. structured prediction </li>
+                                            <li> Minimum risk training </li>
+                                            <li> Scheduled sampling </li>
+                                            <li> Beam search optimization </li>
+                                            <li> SeaRNN </li>
+                                            <li> Reward-augmented maximum likelihood </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/" target="_blank"  rel="noreferrer">Parsing I</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Parse trees </li>
+                                            <li> Context-free grammars </li>
+                                            <li> Chomsky normal form </li>
+                                            <li> CYK recognition algorithm </li>
+                                            <li> Worked example </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/" target="_blank"  rel="noreferrer">Parsing II</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Weighted context-free grammars </li>
+                                            <li> Semirings </li>
+                                            <li> Inside algorithm </li>
+                                            <li> Inside weights </li>
+                                            <li> Weighted parsing </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/" target="_blank"  rel="noreferrer">Parsing III</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Probabilistic context-free grammars </li>
+                                            <li> Parameter estimation (supervised) </li>
+                                            <li> Parameter estimation (unsupervised) </li>
+                                            <li> Viterbi training </li>
+                                            <li> Expectation maximization </li>
+                                            <li> Outside from inside </li>
+                                            <li> Interpretation of outside weights </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/understanding-xlnet/" target="_blank"  rel="noreferrer">XLNet</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Language modeling </li>
+                                            <li> XLNet training objective </li>
+                                            <li> Permutations </li>
+                                            <li> Attention mask </li>
+                                            <li> Two stream self-attention </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>
+
+       
+                           
+                           <TopLine>Responsible AI</TopLine>
+                           <MoreOuterList>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/" target="_blank"  rel="noreferrer">Bias and fairness</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Sources of bias</li>
+                                            <li> Demographic Parity </li>
+                                            <li> Equality of odds</li>
+                                            <li> Equality of opportunity </li>
+                                            <li> Individual fairness</li>
+                                            <li> Bias mitigation</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/" target="_blank"  rel="noreferrer">Explainability I</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Taxonomy of XAI approaches</li>
+                                            <li> Local post-hoc explanations </li>
+                                            <li> Individual conditional explanation</li>
+                                            <li> Counterfactual explanations</li>
+                                            <li> LIME & Anchors</li>
+                                            <li> Shapley additive explanations & SHAP</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/" target="_blank"  rel="noreferrer">Explainability II</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Global feature importance</li>
+                                            <li> Partial dependence & ICE plots</li>
+                                            <li> Accumulated local effects</li>
+                                            <li> Aggregate SHAP values</li>
+                                            <li> Prototypes & criticisms</li>
+                                            <li> Surrogate / proxy models</li>
+                                            <li> Inherently interpretable models</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/" target="_blank"  rel="noreferrer">Differential privacy I</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Early approaches to privacy </li>
+                                            <li> Fundamental law of information recovery </li>
+                                            <li> Differential privacy</li>
+                                            <li> Properties of differential privacy </li>
+                                            <li> The Laplace mechanism</li>
+                                            <li> Examples</li>
+                                            <li> Other mechanisms and definitions</li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/" target="_blank"  rel="noreferrer">Differential privacy II</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Differential privacy and matchine learning</li>
+                                            <li> DPSGD</li>
+                                            <li> PATE </li>
+                                            <li> Differentially private data generation</li>
+                                            <li> DPGAN</li>
+                                            <li> PateGAN </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                           </MoreOuterList>
+                        </Column2>
+                    </MoreRow2>
+                </MoreWrapper>
+            </MoreContainer>
+        </>
+    )
+}
+
+export default MoreSection
+
+

src/components/NavBar/NavbarElements.js

@@ -0,0 +1,115 @@
+import { Link as LinkS } from 'react-scroll';
+import { Link as LinkR } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const Nav = styled.nav`
+  background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
+  height: 100px;
+  margin-top: -100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+
+  @media screen and (max-width: 960px) {
+    transition: 0.8s all ease;
+  }
+`;
+
+export const NavbarContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  height: 100px;
+  z-index: 1;
+  width: 100%;
+  padding: 0 24px;
+  max-width: 1100px;
+`;
+
+export const NavLogo = styled(LinkR)`
+  color: #fff;
+  justify-self: flex-start;
+  cursor: pointer;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+  font-weight: bold;
+  text-decoration: none;
+`;
+
+export const MobileIcon = styled.div`
+  display: none;
+
+  @media screen and (max-width: 768px) {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(-100%, 60%);
+    font-size: 1.8rem;
+    cursor: pointer;
+  }
+`;
+
+export const NavMenu = styled.ul`
+  display: flex;
+  align-items: center;
+  list-style: none;
+  text-align: center;
+  margin-right: -22px;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const NavItem = styled.li`
+  height: 80px;
+`;
+
+export const NavBtn = styled.nav`
+  display: flex;
+  align-items: center;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const NavLinks = styled(LinkS)`
+  color: #fff;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  padding: 0 1rem;
+  height: 100%;
+  cursor: pointer;
+
+  &.active {
+    border-bottom: 3px solid #57c6d1
+  }
+`;
+
+export const NavBtnLink = styled(LinkR)`
+  border-radius: 50px;
+  background: #01bf71;
+  white-space: nowrap;
+  padding: 10px 22px;
+  color: #010606;
+  font-size: 16px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+
+  &:hover {
+    transition: all 0.2s ease-in-out;
+    background: #fff;
+    color: #010606;
+  }
+`;

src/components/NavBar/index.js

@@ -0,0 +1,59 @@
+import React, {useState, useEffect} from 'react'
+import {FaBars} from 'react-icons/fa'
+import {IconContext} from 'react-icons/lib'
+import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
+import { animateScroll as scroll } from 'react-scroll'
+
+
+const Navbar = ( {toggle} ) => {
+    const [scrollNav, setScrollNav] = useState(false)
+
+    const changeNav = () =>{
+        if (window.scrollY >= 80){
+            setScrollNav(true)
+        }else{
+            setScrollNav(false)
+        }
+    }
+
+    useEffect(() =>{
+        window.addEventListener('scroll', changeNav)
+    }, [])
+
+    const toggleHome = () => {
+        scroll.scrollToTop();
+    }
+
+    return (
+        <>
+        <IconContext.Provider value={{color: '#fff'}}>
+            <Nav scrollNav={scrollNav}>
+                <NavbarContainer>
+                    <NavLogo to="/" onClick={toggleHome}>
+                        <h1> Understanding Deep Learning </h1>
+                    </NavLogo>
+                    <MobileIcon onClick={toggle}>
+                        <FaBars />
+                    </MobileIcon>
+                    <NavMenu>
+                        <NavItem>
+                            <NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks>
+                        </NavItem>
+                        <NavItem>
+                            <NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks>
+                        </NavItem>
+                        <NavItem>
+                            <NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks>
+                        </NavItem>
+                        <NavItem>
+                            <NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks>
+                        </NavItem>
+                    </NavMenu>
+                </NavbarContainer>
+            </Nav>
+        </IconContext.Provider>
+        </>
+    );
+}
+
+export default Navbar

src/components/Notebooks/NotebookElements.js

@@ -0,0 +1,105 @@
+import styled from "styled-components";
+
+
+export const NotebookContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
+
+    @media screen and (max-width: 768px) {
+        padding: 100px 0;
+    }
+`
+
+export const NotebookWrapper = styled.div`
+    display: grid ; 
+    z-index: 1;
+    // height: 1250px ;  
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const NotebookRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+
+    @media screen and (max-width: 768px){
+        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    }
+`
+
+export const Column1 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col1;
+`
+
+export const Column2 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col2;
+`
+
+export const TextWrapper = styled.div`
+    max-width: 540px ; 
+    padding-top: 0;
+    padding-bottom: 0;
+`
+
+export const TopLine = styled.p` 
+    color: #57c6d1;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+`
+
+export const Heading= styled.h1` 
+
+    margin-bottom: 24px;
+    font-size: 48px;
+    line-height: 1.1;
+    font-weight: 600;
+    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    
+    @media screen and (max-width: 480px)
+    {
+        font-size: 32px;
+    }
+`
+
+
+export const Subtitle = styled.p` 
+    max-width: 440px;
+    margin-bottom: 35px;
+    font-size: 18px;
+    line-height: 24px;
+    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+
+`
+
+export const BtnWrap = styled.div`
+    display: flex;
+    justify-content: flex-start;
+`
+
+export const ImgWrap = styled.div` 
+    max-width: 555px;
+    height: 100%;
+`
+
+export const Img = styled.img`
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;

src/components/Notebooks/index.js

@@ -0,0 +1,220 @@
+import React from 'react'
+import { ImgWrap, Img, NotebookContainer, NotebookWrapper, NotebookRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './NotebookElements'
+
+// export const homeObjOne = {
+//     id: 'about',
+//     lightBg: false,
+//     lightText: true,
+//     lightTextDesc: true,
+//     topLine: 'Premium Bank',
+//     headline: 'Unlimited transactions with zero fees',
+//     description:
+//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
+//     buttonLabel: 'Get Started',
+//     imgStart: false,
+//     img: require('../../images/svg-1.svg').default,
+//     alt: 'Car',
+//     dark: true,
+//     primary: true,
+//     darkText: false
+//   };
+
+import img from '../../images/coding.svg'
+
+
+
+const NotebookSection = () => {
+    return (
+        <>
+            <NotebookContainer lightBg={false} id='Notebooks'>
+                <NotebookWrapper>
+                    <NotebookRow imgStart={true}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>Coding exercises</TopLine>
+                                <Heading lightText={true}>Python notebooks covering the whole text</Heading>
+                                <Subtitle darkText={false}>Sixty eight python notebook exercises with missing code to fill in based on the text</Subtitle>
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt='Car'/>
+                            </ImgWrap>
+                        </Column2>
+                    </NotebookRow>
+                    <NotebookRow>
+                        <Column1>
+                            <ul>
+                                <li> Notebook 1.1 - Background mathematics: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap01/1_1_BackgroundMathematics.ipynb">ipynb/colab</a>
+                                </li>
+                                <li> Notebook 2.1 - Supervised learning: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap02/2_1_Supervised_Learning.ipynb">ipynb/colab</a>
+                                </li>
+                                <li> Notebook 3.1 - Shallow networks I: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_1_Shallow_Networks_I.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 3.2 - Shallow networks II: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_2_Shallow_Networks_II.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 3.3 - Shallow network regions: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_3_Shallow_Network_Regions.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 3.4 - Activation functions: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_4_Activation_Functions.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 4.1 - Composing networks: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_1_Composing_Networks.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 4.2 - Clipping functions: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_2_Clipping_functions.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 4.3 - Deep networks: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_3_Deep_Networks.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 5.1 - Least squares loss: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_1_Least_Squares_Loss.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 5.2 - Binary cross-entropy loss: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_2_Binary_Cross_Entropy_Loss.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 5.3 - Multiclass cross-entropy loss: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_3_Multiclass_Cross_entropy_Loss.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 6.1 - Line search: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_1_Line_Search.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 6.2 - Gradient descent: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_2_Gradient_Descent.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 6.3 - Stochastic gradient descent: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_3_Stochastic_Gradient_Descent.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 6.4 - Momentum: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_4_Momentum.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 6.5 - Adam: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_5_Adam.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 7.1 - Backpropagation in toy model: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_1_Backpropagation_in_Toy_Model.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 7.2 - Backpropagation: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_2_Backpropagation.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 7.3 - Initialization: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_3_Initialization.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 8.1 - MNIST-1D performance: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_1_MNIST_1D_Performance.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 8.2 - Bias-variance trade-off: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_2_Bias_Variance_Trade_Off.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 8.3 - Double descent: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_3_Double_Descent.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 8.4 - High-dimensional spaces: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_4_High_Dimensional_Spaces.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 9.1 - L2 regularization: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_1_L2_Regularization.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 9.2 - Implicit regularization: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_2_Implicit_Regularization.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 9.3 - Ensembling: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_3_Ensembling.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 9.4 - Bayesian approach: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_4_Bayesian_Approach.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 9.5 - Augmentation <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_5_Augmentation.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 10.1 - 1D convolution: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_1_1D_Convolution.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 10.2 - Convolution for MNIST-1D: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_2_Convolution_for_MNIST_1D.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 10.3 - 2D convolution: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_3_2D_Convolution.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 10.4 - Downsampling & upsampling: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_4_Downsampling_and_Upsampling.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 10.5 - Convolution for MNIST: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_5_Convolution_For_MNIST.ipynb">ipynb/colab </a>
+                                </li>
+                            </ul>
+                        </Column1>
+                        <Column2>
+                        <ul>
+                                <li> Notebook 11.1 - Shattered gradients: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_1_Shattered_Gradients.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 11.2 - Residual networks: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_2_Residual_Networks.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 11.3 - Batch normalization: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_3_Batch_Normalization.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 12.1 - Self-attention: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_1_Self_Attention.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 12.2 - Multi-head self-attention: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_2_Multihead_Self_Attention.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 12.3 - Tokenization: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_3_Tokenization.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 12.4 - Decoding strategies: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_4_Decoding_Strategies.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 13.1 - Encoding graphs: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_1_Graph_Representation.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 13.2 - Graph classification : <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_2_Graph_Classification.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 13.3 - Neighborhood sampling: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_3_Neighborhood_Sampling.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 13.4 - Graph attention: <a
+                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_4_Graph_Attention_Networks.ipynb">ipynb/colab </a>
+                                </li>
+                                <li> Notebook 15.1 - GAN toy example: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_1_GAN_Toy_Example.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 15.2 - Wasserstein distance: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_2_Wasserstein_Distance.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 16.1 - 1D normalizing flows: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_1_1D_Normalizing_Flows.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 16.2 - Autoregressive flows: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_2_Autoregressive_Flows.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 16.3 - Contraction mappings: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_3_Contraction_Mappings.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 17.1 - Latent variable models: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_1_Latent_Variable_Models.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 17.2 - Reparameterization trick: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_2_Reparameterization_Trick.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 17.3 - Importance sampling: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_3_Importance_Sampling.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 18.1 - Diffusion encoder: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_1_Diffusion_Encoder.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 18.2 - 1D diffusion model: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_2_1D_Diffusion_Model.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 18.3 - Reparameterized model: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_3_Reparameterized_Model.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 18.4 - Families of diffusion models: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_4_Families_of_Diffusion_Models.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 19.1 - Markov decision processes: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_1_Markov_Decision_Processes.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 19.2 - Dynamic programming: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_2_Dynamic_Programming.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 19.3 - Monte-Carlo methods: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_3_Monte_Carlo_Methods.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 19.4 - Temporal difference methods: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_4_Temporal_Difference_Methods.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 19.5 - Control variates: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_5_Control_Variates.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 20.1 - Random data: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_1_Random_Data.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 20.2 - Full-batch gradient descent: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_2_Full_Batch_Gradient_Descent.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 20.3 - Lottery tickets: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_3_Lottery_Tickets.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 20.4 - Adversarial attacks: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_4_Adversarial_Attacks.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 21.1 - Bias mitigation: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_1_Bias_Mitigation.ipynb">ipynb/colab </a></li>
+                                <li> Notebook 21.2 - Explainability: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_2_Explainability.ipynb">ipynb/colab </a></li>
+                            </ul>
+                        </Column2>
+                    </NotebookRow>
+
+                </NotebookWrapper>
+            </NotebookContainer>
+        </>
+    )
+}
+
+export default NotebookSection

src/components/ScrollToTop.js

@@ -0,0 +1,11 @@
+import {useEffect} from 'react'
+import { useLocation } from 'react-router-dom'
+
+export default function ScrollToTop() {
+    const {pathname} = useLocation()
+    useEffect(() => {
+        window.scrollTo(0,0)
+    }, [pathname])
+
+    return null;
+}

src/components/Sidebar/SidebarElements.js

@@ -0,0 +1,98 @@
+import styled from 'styled-components'
+import {Link as LinkS} from 'react-scroll'
+import {Link as LinkR} from 'react-router-dom'
+import {FaTimes} from 'react-icons/fa'
+
+
+
+export const SidebarContainer = styled.aside`
+    position:fixed ; 
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background: #0d0d0d;
+    display: grid;
+    align-items: center;
+    top: 0;
+    left: 0;
+    transition: 0.3s ease-in-out;
+    opacity: ${({ isOpen }) => (isOpen ? '100%' :  '0')};
+    top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};   
+ 
+`
+
+export const CloseIcon = styled(FaTimes)`
+    color: #fff ; 
+    &:hover {
+        color: #01bf71;
+        transition: 0.2s ease-in-out;
+    }
+`
+
+export const Icon = styled.div`
+    position: absolute;
+    top: 1.2rem;
+    right: 1.5rem;
+    background: transparent;
+    font-size: 2rem;
+    cursor: pointer;
+    outline: none;
+`
+
+export const SidebarWrapper = styled.div`
+    color: #ffffff;
+`
+
+export const SidebarMenu = styled.ul`
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(6,80px);
+    text-align: center;
+
+    @media screen and (max-width: 480px){
+        grid-template-rows: repeat(6, 60px) ; 
+    }
+`
+
+export const SidebarLink = styled(LinkS)`
+    display: flex ;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    text-decoration: none;
+    list-style: none;
+    transition: 0.2s ease-in-out;
+    text-decoration: none;
+    color: #fff;
+    cursor: pointer;
+
+    &:hover {
+        color: #01bf71;
+        transition: 0.2s ease-in-out;
+    }
+`
+
+export const SideBtnWrap = styled.div` 
+    display: flex;
+    justify-content: center;
+`
+
+export const SidebarRoute = styled(LinkR)` 
+    border-radius: 50px;
+    background: #01bf71;
+    white-space: nowrap;
+    padding: 16px 46px;
+    color: #010606;
+    font-size: 16px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    text-decoration: none;
+
+    &:hover {
+        transition: all 0.2s ease-in-out;
+        background: #fff;
+        color: #010606;
+    }
+`

src/components/Sidebar/index.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
+
+
+const Sidebar = ({isOpen, toggle}) => {
+    return (
+        <>
+        <SidebarContainer isOpen={isOpen} onClick={toggle}>
+            <Icon onClick={toggle}>
+                <CloseIcon />
+            </Icon>
+            <SidebarWrapper>
+                <SidebarMenu >
+                    <SidebarLink to="Notebooks" onClick={toggle}>
+                        Notebooks
+                    </SidebarLink>
+                    <SidebarLink to="Instructors" onClick={toggle}>
+                        Instructors
+                    </SidebarLink>
+                    <SidebarLink to="Media" onClick={toggle}>
+                        Media
+                    </SidebarLink>
+                    <SidebarLink to="More" onClick={toggle}>
+                        More
+                    </SidebarLink>
+                </SidebarMenu>
+            </SidebarWrapper>
+        </SidebarContainer>
+        </>
+    )
+}
+
+export default Sidebar

src/images/square-x-twitter.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="10"
+   width="8.75"
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg914"
+   sodipodi:docname="square-x-twitter.svg"
+   inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs918" />
+  <sodipodi:namedview
+     id="namedview916"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="65.6"
+     inkscape:cx="3.8948171"
+     inkscape:cy="4.5426829"
+     inkscape:window-width="1296"
+     inkscape:window-height="906"
+     inkscape:window-x="0"
+     inkscape:window-y="38"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg914" />
+  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path
+     d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"
+     id="path912"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>

src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+

src/pages/index.js

@@ -0,0 +1,34 @@
+import React, {useState} from 'react'
+import Sidebar from '../components/Sidebar'
+import Navbar from '../components/NavBar'
+import HeroSection from '../components/HeroSection';
+import NotebookSection from '../components/Notebooks'
+import InstructorsSection from '../components/Instructors';
+import Footer from '../components/Footer';
+import MediaSection from '../components/Media';
+import MoreSection from '../components/More';
+
+const Home = () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const toggle = () => {
+        setIsOpen(!isOpen)
+    };
+
+    return ( 
+        <>
+            <Sidebar isOpen={isOpen} toggle={toggle}/>
+            <Navbar toggle={toggle}/>
+            <HeroSection />
+            <NotebookSection/>
+            <InstructorsSection/>
+            <MediaSection/>
+            <MoreSection/>
+            <Footer/>                
+        </>
+    )
+};
+
+export default Home
+
+ 

src/pages/signin.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import ScrollToTop from '../components/ScrollToTop';
+import SignIn from '../components/SignIn';
+
+const SigninPage = () => {
+    return (
+        <>
+            <ScrollToTop />
+            <SignIn />
+        </>
+    )
+}
+
+export default SigninPage;