Quick Start

Python
import streamlit as st

# Beautiful header with custom styling
st.markdown("""
<style>
.main-header {
    font-size: 3rem;
    color: #1E88E5;
    text-align: center;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(90deg, #1E88E5, #43A047);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>
<div class="main-header">Your Project Title</div>
""", unsafe_allow_html=True)

# Clean sidebar
with st.sidebar:
    st.image("logo.png", width=150)  # Add your logo
    selected = st.selectbox("Navigate", ["Home", "Analysis", "Results"])

Workflow

Progress:

• Setup base styling - Custom CSS theme and colors
• Design header section - Logo, title, navigation
• Create sidebar navigation - Clean menu structure
• Style main content areas - Cards, containers, spacing
• Add interactive elements - Buttons, forms, feedback
• Implement responsive design - Mobile-friendly layouts
• Polish details - Icons, animations, loading states

1. Create custom CSS file (style.css):

CSS
/* Hide Streamlit branding */
#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
header {visibility: hidden;}

/* Custom color scheme */
.stApp {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Beautiful cards */
.metric-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 1rem 0;
}

2. Load styling:

Python
def load_css():
    with open('style.css') as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

load_css()

3. Create reusable components:

Python
def metric_card(title, value, delta=None):
    delta_html = f"<span style='color: green'>↗ {delta}</span>" if delta else ""
    st.markdown(f"""
    <div class="metric-card">
        <h3>{title}</h3>
        <h1>{value} {delta_html}</h1>
    </div>
    """, unsafe_allow_html=True)

Examples

Example 1: Dashboard Layout Input: Final year ML project dashboard Output:

Python
col1, col2, col3 = st.columns(3)
with col1:
    metric_card("Accuracy", "94.2%", "+2.1%")
with col2:
    metric_card("Predictions", "1,247")
with col3:
    metric_card("Model Score", "0.89")

# Beautiful chart container
with st.container():
    st.markdown("### Model Performance")
    chart = alt.Chart(data).mark_line(color='#1E88E5', strokeWidth=3)
    st.altair_chart(chart, use_container_width=True)

Example 2: Form Styling Input: User input form Output:

Python
with st.form("prediction_form"):
    st.markdown("### Make a Prediction")
    
    col1, col2 = st.columns(2)
    with col1:
        feature1 = st.slider("Feature 1", 0, 100, 50)
    with col2:
        feature2 = st.selectbox("Feature 2", ["A", "B", "C"])
    
    submitted = st.form_submit_button("🚀 Predict", use_container_width=True)

Example 3: Professional Navigation Input: Multi-page app navigation Output:

Python
# Create tabs with icons
tab1, tab2, tab3 = st.tabs(["📊 Dashboard", "🔍 Analysis", "📈 Results"])

with tab1:
    st.header("Dashboard Overview")
    # Dashboard content
    
with tab2:
    st.header("Data Analysis")
    # Analysis content

Best Practices

• Use consistent color palette - Pick 2-3 main colors and stick to them
• White space is your friend - Don't cram everything together
• Icons enhance UX - Use emojis or Font Awesome icons for visual appeal
• Mobile-first design - Test on phone screens using st.columns()
• Loading states - Show spinners for long operations with st.spinner()
• Error handling - Use st.error(), st.warning(), st.success() appropriately
• Professional typography - Limit to 2 font families max

CSS
/* Remove padding */
.block-container {padding-top: 1rem;}

/* Custom button */
.stButton > button {
    background: linear-gradient(90deg, #667eea, #764ba2);
    color: white;
    border-radius: 20px;
    border: none;
    padding: 0.5rem 2rem;
}

/* Sidebar styling */
.css-1d391kg {background: #f8f9fa;}

Common Pitfalls

• Don't overuse colors - Too many bright colors look unprofessional
• Avoid tiny text - Keep minimum 14px font size
• Don't ignore mobile - Test responsive design early
• Skip heavy animations - They slow down Streamlit
• Don't hide important controls - Keep navigation visible and intuitive
• Avoid cluttered layouts - Use containers and spacing effectively

1. Add a professional header with university logo
2. Use metric cards for key statistics
3. Implement progress bars for multi-step processes
4. Add download buttons for results/reports
5. Include "About" section explaining your methodology
6. Use proper chart styling with consistent colors