{"id":555,"date":"2023-05-23T11:49:30","date_gmt":"2023-05-23T06:19:30","guid":{"rendered":"https:\/\/dashingknights.com\/news\/?p=555"},"modified":"2023-12-08T14:35:09","modified_gmt":"2023-12-08T09:05:09","slug":"building-simple-dashboard-flask-html-integration-guide","status":"publish","type":"post","link":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/","title":{"rendered":"Building a Simple Dashboard with Flask and HTML: Integration Guide for Mac and Windows"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction: <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we will explore how to integrate Flask, a lightweight web framework, with HTML to create a basic dashboard. We&#8217;ll use iframes to embed content within the dashboard, allowing us to display multiple web pages or components in a single view. By the end, you&#8217;ll have a good understanding of how to leverage Flask and HTML to build dynamic dashboards for your web applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Prerequisites: Before we dive into the tutorial, make sure you have the following installed:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Project Structure :<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">project\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">app.py<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">templates\/<\/span><span style=\"color: #D8DEE9FF\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">dashboard.html<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">content1.html<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">\u2514\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">content2.html<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dashingknights.com\/news\/python-user-input-input-function-explanation\/\">Python<\/a> (version 3.x)<\/li>\n\n\n\n<li>Flask (install using <code>pip install Flask<\/code>)<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"pip install flask\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">pip install flask<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Python<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: <\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Setting up the Flask Application Let&#8217;s start by creating a new directory for our project. Open your terminal or command prompt and execute the following commands:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>For Mac :<\/strong><\/h4>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"$ mkdir flask-dashboard\n$ cd flask-dashboard\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">$<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">mkdir<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">flask-dashboard<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">$<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">cd<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">flask-dashboard<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Bash<\/span><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>For Windows :<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"$ mkdir flask-dashboard\n$ cd flask-dashboard\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">$<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">mkdir<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">flask-dashboard<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">$<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">cd<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">flask-dashboard<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Bash<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Next<\/strong>, create a new Python file called <code><strong>app.py<\/strong><\/code> and open it in your preferred code editor. Import Flask and create a Flask application object as follows:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"from flask import Flask\n\napp = Flask(__name__)\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">from<\/span><span style=\"color: #D8DEE9FF\"> flask <\/span><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> Flask<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">app <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Flask<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\">__name__<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Python<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Defining Routes and Rendering HTML In Flask, routes are used to define different URLs within your application. Let&#8217;s create a route for the dashboard and a basic HTML template for rendering the dashboard.(include the below code on app.py)<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"from flask import render_template\n\n@app.route('\/')\ndef dashboard():\n    return render_template('dashboard.html')\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">from<\/span><span style=\"color: #D8DEE9FF\"> flask <\/span><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> render_template<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">@<\/span><span style=\"color: #D08770\">app<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D08770\">route<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">def<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">dashboard<\/span><span style=\"color: #ECEFF4\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">render_template<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">dashboard.html<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Python<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creating the HTML Template Create a new directory called <code><strong>templates<\/strong><\/code> inside the project directory. Within the <code>templates<\/code> directory, create a new HTML file called <code><strong>dashboard.html<\/strong><\/code> and open it in your code editor.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Flask Dashboard&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Welcome to the Flask Dashboard!&lt;\/h1&gt;\n    &lt;iframe src=&quot;{{ url_for('content1') }}&quot;&gt;&lt;\/iframe&gt;\n    &lt;iframe src=&quot;{{ url_for('content2') }}&quot;&gt;&lt;\/iframe&gt;\n       &lt;!--dont forget to remove the curly braces and replace your iframe url :\n    Such as :\n    &lt;iframe src=&quot;https:\/\/dashingknights.com\/&quot;&gt;&lt;\/iframe&gt;  \/\/ Enter your prefered dashboard url\n    --&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Flask Dashboard<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;h1&gt;<\/span><span style=\"color: #D8DEE9FF\">Welcome to the Flask Dashboard!<\/span><span style=\"color: #81A1C1\">&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;iframe<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">{{ url_for(&#39;content1&#39;) }}<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/iframe&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;iframe<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">{{ url_for(&#39;content2&#39;) }}<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/iframe&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #616E88\">&lt;!--dont forget to remove the curly braces and replace your iframe url :<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">    Such as :<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">    &lt;iframe src=&quot;https:\/\/dashingknights.com\/&quot;&gt;&lt;\/iframe&gt;  \/\/ Enter your prefered dashboard url<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">    --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">HTML<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 4: <\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding Content Pages Let&#8217;s create two additional routes in <code><strong>app.py<\/strong><\/code> to render content within the iframes in the dashboard.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@app.route('\/content1')\ndef content1():\n    return render_template('content1.html')\n\n@app.route('\/content2')\ndef content2():\n    return render_template('content2.html')\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">@<\/span><span style=\"color: #D08770\">app<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D08770\">route<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/content1<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">def<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">content1<\/span><span style=\"color: #ECEFF4\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">render_template<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">content1.html<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">@<\/span><span style=\"color: #D08770\">app<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D08770\">route<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/content2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">def<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">content2<\/span><span style=\"color: #ECEFF4\">():<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">render_template<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">content2.html<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Python<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 5:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creating Content HTML Templates Create two new HTML files inside the <code>templates<\/code> directory: <code><strong>content1.html<\/strong><\/code> and <code><strong>content2.html<\/strong><\/code>. Feel free to add any content you want to these files. For demonstration purposes, we&#8217;ll keep them simple:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>content1.html<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Content 1&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h2&gt;Content Page 1&lt;\/h2&gt;\n    &lt;p&gt;This is the first content page.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Content 1<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;h2&gt;<\/span><span style=\"color: #D8DEE9FF\">Content Page 1<\/span><span style=\"color: #81A1C1\">&lt;\/h2&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;p&gt;<\/span><span style=\"color: #D8DEE9FF\">This is the first content page.<\/span><span style=\"color: #81A1C1\">&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">HTML<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>content2.html<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Content 2&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h2&gt;Content Page 2&lt;\/h2&gt;\n    &lt;p&gt;This is the second content page.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Content 2<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;h2&gt;<\/span><span style=\"color: #D8DEE9FF\">Content Page 2<\/span><span style=\"color: #81A1C1\">&lt;\/h2&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;p&gt;<\/span><span style=\"color: #D8DEE9FF\">This is the second content page.<\/span><span style=\"color: #81A1C1\">&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">HTML<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 6: <\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Running the Application Save all your changes and return to the terminal or command prompt. Make sure you are in the <strong><code>flask-dashboard<\/code> directory<\/strong> and execute the following command to start the Flask development server:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>For Mac and Windows Similar Commands :<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"$ python app.py\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">$<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">python<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">app.py<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Bash<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>(or)<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"flask run\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">flask<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">run<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Bash<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>You should see output similar to:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Running on http:\/\/127.0.0.1:5000\/ (Press CTRL+C to quit)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open your web browser and visit <code><strong>http:\/\/127.0.0.1:5000\/<\/strong><\/code> or <code><strong>http:\/\/localhost:5000\/<\/strong><\/code>. You should see the Flask dashboard with iframes displaying the content pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><strong>Congratulations!<\/strong> You have successfully integrated Flask with HTML to create a simple dashboard. By leveraging Flask&#8217;s routing capabilities and HTML&#8217;s iframe element, you can build <strong>dynamic dashboards<\/strong> that display multiple components or web pages in a single view. This approach provides flexibility and allows you to incorporate various content into your dashboard. Experiment with adding more routes, content pages, or customizations to further enhance your dashboard based on your project requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember to explore Flask&#8217;s extensive <a href=\"https:\/\/flask.palletsprojects.com\/en\/2.3.x\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a> and HTML&#8217;s capabilities to unlock additional features and create more sophisticated dashboards. Happy coding!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note: This tutorial focused on the integration of Flask with HTML to build a basic dashboard. For a production-ready application, you may need to consider security measures, data persistence, and other advanced functionalities.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: In this tutorial, we will explore how to integrate Flask, a lightweight web framework, with HTML to create a basic dashboard. We&#8217;ll use iframes to embed content within the dashboard, allowing us to display multiple web pages or components in a single view. By the end, you&#8217;ll have a good understanding of how to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-container-style":"default","site-container-layout":"default","site-sidebar-layout":"default","disable-article-header":"default","disable-site-header":"default","disable-site-footer":"default","disable-content-area-spacing":"default","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1,95],"tags":[159,161,160],"class_list":["post-555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-education","category-lets-know","tag-flask","tag-html-integration-with-python","tag-python"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a Simple Dashboard with Flask and HTML: Integration Guide for Dynamic Web Applications<\/title>\n<meta name=\"description\" content=\"Learn how to integrate Flask with HTML to build a simple dashboard using iframes. This comprehensive guide provides step-by-step instructions and code snippets, enabling you to create a dynamic web application dashboard with ease. Explore the power of Flask&#039;s routing capabilities and HTML&#039;s iframe element to display multiple components or web pages within a single view. Enhance your web development skills and build interactive dashboards using Flask and HTML today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Simple Dashboard with Flask and HTML: Integration Guide for Dynamic Web Applications\" \/>\n<meta property=\"og:description\" content=\"Learn how to integrate Flask with HTML to build a simple dashboard using iframes. This comprehensive guide provides step-by-step instructions and code snippets, enabling you to create a dynamic web application dashboard with ease. Explore the power of Flask&#039;s routing capabilities and HTML&#039;s iframe element to display multiple components or web pages within a single view. Enhance your web development skills and build interactive dashboards using Flask and HTML today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"News Beat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/groups\/609976580889610\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/groups\/609976580889610\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-23T06:19:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-08T09:05:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Depak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Building a Simple Dashboard with Flask and HTML: Integration Guide for Dynamic Web Applications\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to integrate Flask with HTML to build a simple dashboard using iframes. This comprehensive guide provides step-by-step instructions and code snippets, enabling you to create a dynamic web application dashboard with ease. Explore the power of Flask&#039;s routing capabilities and HTML&#039;s iframe element to display multiple components or web pages within a single view. Enhance your web development skills and build interactive dashboards using Flask and HTML today.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp?fit=512%2C512&ssl=1\" \/>\n<meta name=\"twitter:creator\" content=\"@DashingKnights\" \/>\n<meta name=\"twitter:site\" content=\"@DashingKnights\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Depak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Simple Dashboard with Flask and HTML: Integration Guide for Dynamic Web Applications","description":"Learn how to integrate Flask with HTML to build a simple dashboard using iframes. This comprehensive guide provides step-by-step instructions and code snippets, enabling you to create a dynamic web application dashboard with ease. Explore the power of Flask's routing capabilities and HTML's iframe element to display multiple components or web pages within a single view. Enhance your web development skills and build interactive dashboards using Flask and HTML today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/","og_locale":"en_US","og_type":"article","og_title":"Building a Simple Dashboard with Flask and HTML: Integration Guide for Dynamic Web Applications","og_description":"Learn how to integrate Flask with HTML to build a simple dashboard using iframes. This comprehensive guide provides step-by-step instructions and code snippets, enabling you to create a dynamic web application dashboard with ease. Explore the power of Flask's routing capabilities and HTML's iframe element to display multiple components or web pages within a single view. Enhance your web development skills and build interactive dashboards using Flask and HTML today.","og_url":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/","og_site_name":"News Beat","article_publisher":"https:\/\/www.facebook.com\/groups\/609976580889610","article_author":"https:\/\/www.facebook.com\/groups\/609976580889610","article_published_time":"2023-05-23T06:19:30+00:00","article_modified_time":"2023-12-08T09:05:09+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp","type":"image\/webp"}],"author":"Depak","twitter_card":"summary_large_image","twitter_title":"Building a Simple Dashboard with Flask and HTML: Integration Guide for Dynamic Web Applications","twitter_description":"Learn how to integrate Flask with HTML to build a simple dashboard using iframes. This comprehensive guide provides step-by-step instructions and code snippets, enabling you to create a dynamic web application dashboard with ease. Explore the power of Flask's routing capabilities and HTML's iframe element to display multiple components or web pages within a single view. Enhance your web development skills and build interactive dashboards using Flask and HTML today.","twitter_image":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp?fit=512%2C512&ssl=1","twitter_creator":"@DashingKnights","twitter_site":"@DashingKnights","twitter_misc":{"Written by":"Depak","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#article","isPartOf":{"@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/"},"author":{"name":"Depak","@id":"https:\/\/dashingknights.com\/news\/#\/schema\/person\/1b1fb25832e42bc14f058e78c40fc91f"},"headline":"Building a Simple Dashboard with Flask and HTML: Integration Guide for Mac and Windows","datePublished":"2023-05-23T06:19:30+00:00","dateModified":"2023-12-08T09:05:09+00:00","mainEntityOfPage":{"@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/"},"wordCount":504,"commentCount":0,"publisher":{"@id":"https:\/\/dashingknights.com\/news\/#organization"},"image":{"@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp?fit=512%2C512&ssl=1","keywords":["flask","html integration with python","python"],"articleSection":["Education","Let's Know"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#respond"]}]},{"@type":["WebPage","QAPage"],"@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/","url":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/","name":"Building a Simple Dashboard with Flask and HTML: Integration Guide for Dynamic Web Applications","isPartOf":{"@id":"https:\/\/dashingknights.com\/news\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#primaryimage"},"image":{"@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp?fit=512%2C512&ssl=1","datePublished":"2023-05-23T06:19:30+00:00","dateModified":"2023-12-08T09:05:09+00:00","description":"Learn how to integrate Flask with HTML to build a simple dashboard using iframes. This comprehensive guide provides step-by-step instructions and code snippets, enabling you to create a dynamic web application dashboard with ease. Explore the power of Flask's routing capabilities and HTML's iframe element to display multiple components or web pages within a single view. Enhance your web development skills and build interactive dashboards using Flask and HTML today.","breadcrumb":{"@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#primaryimage","url":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp?fit=512%2C512&ssl=1","contentUrl":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp?fit=512%2C512&ssl=1","width":512,"height":512,"caption":"html-flask-integration"},{"@type":"BreadcrumbList","@id":"https:\/\/dashingknights.com\/news\/building-simple-dashboard-flask-html-integration-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dashingknights.com\/news\/"},{"@type":"ListItem","position":2,"name":"Building a Simple Dashboard with Flask and HTML: Integration Guide"}]},{"@type":"WebSite","@id":"https:\/\/dashingknights.com\/news\/#website","url":"https:\/\/dashingknights.com\/news\/","name":"News Beat","description":"Stay Ahead: Get the News Before Everyone Else","publisher":{"@id":"https:\/\/dashingknights.com\/news\/#organization"},"alternateName":"dashing knights news","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dashingknights.com\/news\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/dashingknights.com\/news\/#organization","name":"dashing knights - NewsBeat","alternateName":"NewsBeat - dashing knights","url":"https:\/\/dashingknights.com\/news\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dashingknights.com\/news\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/01\/cropped-dashingknights.com_.jpg?fit=564%2C565&ssl=1","contentUrl":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/01\/cropped-dashingknights.com_.jpg?fit=564%2C565&ssl=1","width":564,"height":565,"caption":"dashing knights - NewsBeat"},"image":{"@id":"https:\/\/dashingknights.com\/news\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/groups\/609976580889610","https:\/\/x.com\/DashingKnights","https:\/\/www.instagram.com\/_dashing_knights_\/","https:\/\/www.instagram.com\/depak002021\/"]},{"@type":"Person","@id":"https:\/\/dashingknights.com\/news\/#\/schema\/person\/1b1fb25832e42bc14f058e78c40fc91f","name":"Depak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3408507aebbe08301de82a7aeba3beb366149b3e45491c934a6043faa39413d8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3408507aebbe08301de82a7aeba3beb366149b3e45491c934a6043faa39413d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3408507aebbe08301de82a7aeba3beb366149b3e45491c934a6043faa39413d8?s=96&d=mm&r=g","caption":"Depak"},"sameAs":["https:\/\/dashingknights.com\/","https:\/\/www.facebook.com\/groups\/609976580889610","https:\/\/www.instagram.com\/_dashing_knights_\/","https:\/\/www.linkedin.com\/in\/depak-kumarasan-999542227\/"],"url":"https:\/\/dashingknights.com\/news\/author\/dk-101002098\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/05\/html-flask-integration.webp?fit=512%2C512&ssl=1","jetpack-related-posts":[{"id":339,"url":"https:\/\/dashingknights.com\/news\/websites-vs-webapps\/","url_meta":{"origin":555,"position":0},"title":"Website&#8217;s Or WebApps \ud83e\udd14, Are They Same?","author":"Depak","date":"February 26, 2023","format":false,"excerpt":"Websites and web applications, or web apps, are both important components of the modern internet landscape. While both of these terms may sound similar, there are some fundamental differences between them. In this news blog, we will explore the key differences between websites and web apps, and discuss the benefits\u2026","rel":"","context":"In &quot;Education&quot;","block_context":{"text":"Education","link":"https:\/\/dashingknights.com\/news\/category\/education\/"},"img":{"alt_text":"webites vs webapps","src":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/websites-vs-webapps.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/websites-vs-webapps.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/websites-vs-webapps.jpg?fit=1080%2C1080&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/websites-vs-webapps.jpg?fit=1080%2C1080&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/websites-vs-webapps.jpg?fit=1080%2C1080&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":361,"url":"https:\/\/dashingknights.com\/news\/program-alphabetics\/","url_meta":{"origin":555,"position":1},"title":"Program-alphabetics \ud83d\ude26","author":"Depak","date":"March 3, 2023","format":false,"excerpt":"Let's Know Programming - A Beginner's Choice\ud83e\udd29 As the demand for software development continues to grow, so does the need for skilled programmers. Whether you are a seasoned developer or just starting out in your programming journey, there are certain things that every programmer should be aware of. From algorithms\u2026","rel":"","context":"In &quot;Education&quot;","block_context":{"text":"Education","link":"https:\/\/dashingknights.com\/news\/category\/education\/"},"img":{"alt_text":"learn about programmers A to Z","src":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/03\/programmers-A-To-Z-jpg.webp?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/03\/programmers-A-To-Z-jpg.webp?fit=1080%2C1080&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/03\/programmers-A-To-Z-jpg.webp?fit=1080%2C1080&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/03\/programmers-A-To-Z-jpg.webp?fit=1080%2C1080&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/03\/programmers-A-To-Z-jpg.webp?fit=1080%2C1080&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1,"url":"https:\/\/dashingknights.com\/news\/dashingknights-learning-portal\/","url_meta":{"origin":555,"position":2},"title":"Dashing Knights Learning Portal!","author":"Depak","date":"January 29, 2023","format":false,"excerpt":"Dashing Knights Learning Portal is a modern and dynamic platform that provides individuals with a unique opportunity to enhance their knowledge and skills. The portal boasts a wide range of expert-led courses and interactive activities that cater to different levels of learners. Whether you are a beginner or an advanced\u2026","rel":"","context":"In &quot;Education&quot;","block_context":{"text":"Education","link":"https:\/\/dashingknights.com\/news\/category\/education\/"},"img":{"alt_text":"dashing-knights-learning-portal-posts","src":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/01\/dashing-knights-learning-portal.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/01\/dashing-knights-learning-portal.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/01\/dashing-knights-learning-portal.jpg?fit=1080%2C1080&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/01\/dashing-knights-learning-portal.jpg?fit=1080%2C1080&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/01\/dashing-knights-learning-portal.jpg?fit=1080%2C1080&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":707,"url":"https:\/\/dashingknights.com\/news\/the-great-debate-java-vs-python-for-beginners\/","url_meta":{"origin":555,"position":3},"title":"The Great Debate: Java vs Python for Beginners","author":"Depak","date":"February 26, 2024","format":false,"excerpt":"Introduction Embarking on a journey into the world of programming can be both exciting and overwhelming, especially for beginners. The choice of the first programming language plays a crucial role in shaping the learning experience. Two giants in the programming landscape, Java and Python, often find themselves at the center\u2026","rel":"","context":"In &quot;Education&quot;","block_context":{"text":"Education","link":"https:\/\/dashingknights.com\/news\/category\/education\/"},"img":{"alt_text":"python vs java programming","src":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2024\/02\/python-vs-java-programming-scaled.webp?fit=1200%2C686&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2024\/02\/python-vs-java-programming-scaled.webp?fit=1200%2C686&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2024\/02\/python-vs-java-programming-scaled.webp?fit=1200%2C686&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2024\/02\/python-vs-java-programming-scaled.webp?fit=1200%2C686&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2024\/02\/python-vs-java-programming-scaled.webp?fit=1200%2C686&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":69,"url":"https:\/\/dashingknights.com\/news\/full-stack-development\/","url_meta":{"origin":555,"position":4},"title":"Full Stack Chart","author":"Depak","date":"February 1, 2023","format":false,"excerpt":"Welcome to Newsbeat's Full-Stack Chart blog! Here, we'll be exploring the latest and greatest trends in full-stack development and how they impact the world of news and journalism. From cutting-edge technologies to tried-and-true methodologies, our goal is to provide readers with a comprehensive look at the development landscape. Join us\u2026","rel":"","context":"In &quot;Education&quot;","block_context":{"text":"Education","link":"https:\/\/dashingknights.com\/news\/category\/education\/"},"img":{"alt_text":"full stack chart by newsbeat dashing knights","src":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/full-stack-chart.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/full-stack-chart.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/full-stack-chart.jpg?fit=1080%2C1080&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/full-stack-chart.jpg?fit=1080%2C1080&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/dashingknights.com\/news\/wp-content\/uploads\/2023\/02\/full-stack-chart.jpg?fit=1080%2C1080&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":595,"url":"https:\/\/dashingknights.com\/news\/python-global-variable-modification-code-output-analysis\/","url_meta":{"origin":555,"position":5},"title":"Understanding Global Variable Increment in Python: Analyzing Code Output","author":"Depak","date":"July 1, 2023","format":false,"excerpt":"Exploring the Output of a Python Code Snippet What will be the output of the following Python code? x = 10 def foo(): global x x += 5 return x print(foo()) Python Options: A. 10 B. 15 C. 20 D. Error: invalid syntax Correct Answer: B. 15 Explanation: The correct\u2026","rel":"","context":"In &quot;Let's Know&quot;","block_context":{"text":"Let's Know","link":"https:\/\/dashingknights.com\/news\/category\/tech-news\/lets-know\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/peyf42-8X","_links":{"self":[{"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/posts\/555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/comments?post=555"}],"version-history":[{"count":5,"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/posts\/555\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/posts\/555\/revisions\/660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/media\/557"}],"wp:attachment":[{"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/media?parent=555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/categories?post=555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dashingknights.com\/news\/wp-json\/wp\/v2\/tags?post=555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}