Hello and welcome back in this blog let us explore something different today.
This blog totally focuses on helping a novice to understand these three things:
- What is Streamlit?
- Why Streamlit?
- What are the basic terminologies of Streamlit?
- Basic Terminologies of CSS.
Before diving into the details let us understand what is Streamlit and why only Streamlit?
First Question “What is Streamlit?“
Streamlit is an open-source framework designed to simplify the creation of web applications for data science and machine learning projects purely written in Python.
Now Second Question “Why Streamlit?“
Ease of use
You will not need so much of HTML, CSS or JavaScript because you write almost everything in Python.
Interactive Widgets
You will be provided with many widgets already inbuilt such as sliders, buttons, text elements to create interactive elements in the app.
Sharing and Deployment
You can share and deploy your Streamlit application onto various platforms and Streamlit’s own cloud service.
Now let us understand some of the terminologies of Streamlit so we can get comfortable with the coding:
“Basic Terminologies:”
st - Streamlit is denoted as st or it is the alias of streamlit st.write - this works like a print command for the application st.title - this is used to give a title to the application. st.header - this is used to give header to the application. st.subheader - this is used to give a subheader to the application. st.text - this is used to display text which are very simple and doesn't require much formatting. st.markdown - this is basically a lightweight markup language used to format text. It converts to structurally valid HTML at last. st.session_state - maintain and track the state of your application across various user interactions. st.query_params - this is a way to access query of the current url. (the page we are in) st.dataframe - used to make interactive table of the data input by the user it allows you to scroll, filter, the data. st.table - it just makes you a table doesn't care about the aesthetics.
Now for a website what all are the required things?
We may require the following things:
- A Navigation bar (Navbar) which will hold all the options of the website, title of the website and logo.
- Multiple pages so that content of the website is understood based upon categories we divide.
Before cooking a website we need to make sure to have this things:
An empty folder which can hold multiple files which will contain your pages, a main app file, images, and css file.
Structure of my folder for the app:
prequelcoding/
│
├── main.py
├── assets/
│ └── style.css
└── page/
├── navbar.py
├── home.py
├── about.py
├── contact.py
├── blog.py
└── css.py
Before getting into the CSS details let us understand some of the terminologies in CSS which improves our understanding of CSS.
background-color: Sets the background color of an element, like giving a navbar or page a color to stand out or blend in.
color: Controls the color of the text inside an element. This is what makes your text readable and visually appealing.
padding: Adds space between the content of an element and its border. Think of it as cushioning inside a box, making sure content doesn’t touch the edges.
position: Determines how an element is positioned on the page. It lets you control where elements appear.
top: Moves the element down from the top of its containing element.
left: Moves the element to the right from the left edge of its containing element.
right: Moves the element to the left from the right edge of its containing element.
bottom: Moves the element up from the bottom of its containing element.
width: Sets the width of an element. For a navbar, it can make it span the full width of the viewport, ensuring it stretches from one side to the other.
z-index: Ensures that elements don’t overlap incorrectly. It keeps your navbar visible on top of other content by setting its stack order.
box-shadow: Adds a shadow effect around an element, giving it a sense of depth.
Horizontal Offset: Moves the shadow left or right.
Vertical Offset: Moves the shadow up or down.
Blur Radius: Controls how soft or sharp the shadow’s edges are.
Color: Adjusts the shadow’s color and how transparent or opaque it is.
box-sizing: Helps manage how the width and height of an element are calculated, so you avoid unexpected sizing issues. It includes padding and borders within the element’s total width and height.
list-style-type: Defines the style of markers in lists, like bullets or numbers.
Unordered Lists: Marked with symbols like bullets (•), circles (○), or squares (□).
Ordered Lists: Marked with numbers, letters, or Roman numerals.
display: Determines how an element is displayed on the page. It affects layout and how elements flow.
gap: Specifies the space between items in a container, like managing the spacing between elements in a grid or flex box layout.
margin: Sets the space outside the borders of an element. It’s like the outer cushioning that pushes the element away from other content.
the above css terminologies lets you understand the css code in a more effective way.
This is not the end in the next part let us see how do we build a website from scratch.