DATA VISUALIZATION
There are many options to compile your Python code. You can run it in Terminal, IPython, Spyder, Jupyter Notebook, etc. If you want an interactive compiler, maybe you will choose Jupyter Notebook. But, IPython (short term for Interactive Python) is not a bad option.
There are two types of IPython you can choose, IPython Shell and IPython Notebook. To open IPython Shell, you just write ipython in terminal and type ipython notebook to open IPython Notebook. So, what is the difference between IPython Notebook and Jupyter Notebook? I am not sure to answer it. But, if you launch IPython Notebook via terminal, you will be suggested to type jupyter notebook, not ipython notebook, as shown in Figure 2. I think IPython Notebook is migrating and merging with Jupyter Notebook.

The new alternative is Jupyter Lab, but I am not familiar with it. I am more convenient with the Jupyter Notebook. Maybe, I will write a story about it in the future.
Main Goal
In this story, I will share with you a new concept in interactive coding with Python. I introduce to you Landing Code, an application of Landing Page in website framework into Jupyter Notebook. You can see the highlight of the Landing Code I have made in Figure 1.
Yups, I will share how to build a Landing Code in your Jupyter Notebook (hereafter, Jupyter). It will give you a new experience in interactive Python coding and feel a new atmosphere in presenting your code in a new way.
Before we build a Landing Code, I want to tell you about the concept of building it. The landing Code is built in Jupyter cell, in the type of Markdown. I have explained some cell types in Jupyter; you can review it in the following link.
Problems and Solutions
We will face some issues in building Landing Code. Of course, I will give you alternative solutions to deal with it. First, we can not run CSS in Jupyter cell, only HTML (Markdown). It is a big problem, I think. But it is okay. We will cover it with simple graphical design skills. Because we can not use CSS, so we can not build a responsive Landing Code like Landing Page. Again, we will solve it using a fancy HTML and graphical design paradigm, like using a gradient, shadow effect, white space, unity concept, etc.
Preparing Elements
We will build a Landing Code and some referenced pages that are provided in the Landing Code page. Landing Code consists of Header, Main Image, Main Body, and Footer, whereas the referenced pages are consist of Header, Main Image, and some Code cell type. To achieve it, we need some elements. The Header and Main Image elements we need to build the Landing Code is shown in Figure 3.

I create Header text (LOGO, Home, Data Science, Machine Learning, Programming) elements using HTML (including hyperlink) and create the rounded blue button in Home using Inkscape (vector graphics software like Adobe Illustrator). Text in Main Image elements is generated by HTML and the image is downloaded from IRADesigns. Thanks to IRADesigns, that provides many free illustrations.
The main Body element is constructed by presenting 6 articles with its title, picture, and subtitle, as shown in Figure 4. Six pictures from each article are downloaded from Unsplash with the keyword "Data".

I create a simple footer for my Landing Code using simple HTML, as shown in Figure 5.

I create three pages, Data Science page, Machine Learning page, and Programming page for the referenced pages. The Header and Main Image elements for them are shown in Figure 6.



The Header and Main Image of each referenced pages are constructed by the same concepts in the Landing Code page. I download the images from [Manypixels](https://www.manypixels.co/gallery/). Thanks to Manypixels. After Header and Main Image, the referenced pages are followed by Code cell, as shown in Figure 7.


Procedures
The first step you do to build a Landing Code is customizing your Jupyter, using CSS format, not jupyterthemes library. You need to add some codes in the Jupyter CSS file, named custom.css. You can get it in directory ~/.jupyter/custom/custom.css. If you can not find directory .jupyter, maybe it is hidden by your setting. You can solve it by pressing Ctrl + H to view the hidden files and directories, with prefix . (dot). And, if you did not find directory custom and file custom.css, you can create them. The code contained in the custom.css is shown in Figure 8.

As you see in Figure 8, the file custom.css contains any manual CSS for Jupyter page. We just write the additional or update the style here. At the beginning of this step, we will hide ln container in Jupyter, as shown in Figure 9.


You can hide ln container with adding the following code in custom.css and save it.
div.prompt,
div.tooltiptext pre {
display:none
}
So, your updated custom.css is like in Figure 10.

After you save it, please refresh your Jupyter page. You will get the ln container is hidden now, as shown in the left panel of Figure 9.
The next step is to make the Cell container fit with the width of your display. You can do it by adding the following code in custom.css
.container {
width: 100% !important;
}
To make Notebook-container, Notebook_app, and Body Header in Jupyter become white (same with the background), you can add this following code
#notebook-container {
padding: 0px;
background-color: white;
}
.notebook_app {
background-color: white;
}
body #header{
background-color:white;
}
After you add those code, you will get the new display of your Jupyter, as shown in Figure 11.

Next, is remove border between Cells by adding this code
#notebook {
padding-top:0px !important;
padding-bottom:0px !important;
}
.container {
width:100% !important;
}
.end_space {
min-height:0px !important;
}
After applying it, you will get the new look as shown in Figure 12. Please compare it with Figure 10 and 11.

The next step in modifying custom.css is making the figure results in centered alignment with the display. You can see the figure generated in Figure 12 is left aligned. You can change it by adding the following code
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
After saving custom.css and refreshing your Jupyter page, you will get the result, as shown in Figure 13.

Next, you can hide Toggle Header and Toggle Toolbar by pressing View (at the top-left panel). Then press Toggle Header and Toggle Toolbar. After doing it, you will look at the Jupyter, as shown in Figure 14.

Here is the full styles in custom.css
In the next steps, we will discuss more in HTML frame. In Landing Code page, I set the Header, Main Image, Main Body, and Footer in one div tag. To create div, you can use the following code
<div>
Content of Your Div
</div>
All of the element backgrounds are designed in Inkscape. Figure 15 shows the main board for Landing Code.

Do you get the idea? Yups, every element that is not shown in Figure 15, is created in HTML. For example, I create Header text by combining button and hyperlink tag. You can use this code to create it
If you want to use only a hyperlink tag, it is okay. Tag is used to insert tab. Why do we need it? The answer is we can not use CSS in Jupyter cell. Only HTML :D. You need to copy the Jupyter cell code with a type of Markdown by pressing Cell -> Cell Type -> Markdown. The result is shown in Figure 16.

I add some break tag
after to make it more clearly. If you see more detail, you can not see text Home in Figure 16. You can not see it because the color of the text Home is white. You need to insert the main board design (Figure 15) in the cell using this code.
You can see that I insert many break tag in line 13. The reason is the same as previously, we can not use CSS in Jupyter cell. Yups, the Landing Code concept is a tricky one. If you run it, you will get the result, as shown in Figure 17.

After that, you need to create welcoming text with this code.
The result is shown in Figure 18.

Next, how to create the Main Body (Figure 4)? I use a table tag to create it. I create 2 tables. For each table, it has consisted of 1 row and 3 columns. You can use this code to create it.
You can add the code to the previous code, after break tag and before the closing tag of div. The result is shown in Figure 19. I will provide you with the full version in the next paragraph.

You can create the next table with the same code. After that, you need to create a simple Footer using this code
<span style="color: white"> Copyright &#169; 2020. Allrights reserved. </span>
Here is the full code to create Landing Page
After you run it, you will get a result like in Figure 20.

Next, you need to create the referenced pages, named data_science.ipynb, machine_learning.ipynb, and programming.ipnyb. Here, I just share with you the code for one page. Here it is
All of the materials, including design for the page, pictures, and .ipynb files are uploaded in my GitHub. You can visit via this link
You can watch the highlight preview in YouTube
Conclusion
Landing Code is a new concept in interactive programming (Python or R). It is a part of our preparation to construct the future because technology is always developing. It is not effective enough because we can not run CSS in the Jupyter cell. In this story, it is a little effort to make more interactive programming using Jupyter Notebook.
Are you interested in reading my other stories? You can visit my profile here. If you are interested in creating Landing Code but don’t have time, you can reach me at Fiverr.
If you liked this article, here are some other articles you may enjoy:
Python Data Visualization with Matplotlib – Part 1
5 Powerful Tricks to Visualize Your Data with Matplotlib
Matplotlib Styles for Scientific Plotting
That’s all. Thanks for reading this story. Comment and share if you like it. I also recommend you follow my account to get a notification when I post my new story.