# Web Technologies Included in Day 31-35 of Python-100-Days: Frontend Fundamentals

> Discover the web frontend technologies from Days 31-35 of the Python-100-Days course. Learn HTML, CSS, JavaScript, Vue.js, and more.

- Repository: [骆昊/Python-100-Days](https://github.com/jackfrued/Python-100-Days)
- Tags: tutorial
- Published: 2026-02-24

---

**Day 31-35 of the Python-100-Days course covers the essential web frontend stack including HTML, CSS, and JavaScript, alongside modern frameworks like Vue.js, UI libraries such as Element UI and ECharts, CSS frameworks including Bulma and Bootstrap, and asynchronous Ajax techniques.**

The `jackfrued/Python-100-Days` repository dedicates Days 31-35 to web frontend development, specifically within the `Day31-35/32-33.Web前端入门.md` file. This section transitions Python learners from backend scripting to full-stack capabilities by introducing the core technologies that power modern web interfaces.

## Core Web Stack: HTML, CSS, and JavaScript

The foundation of the Day 31-35 curriculum rests on the standard web trinity that every full-stack developer must master.

### HTML for Document Structure

**HTML** provides the structural backbone of web pages. In `Day31-35/32-33.Web前端入门.md` (starting at line 5), the course introduces fundamental HTML tags and their semantic roles within browser rendering engines. The material emphasizes how HTML elements form the document object model (DOM) tree that JavaScript and CSS manipulate.

### CSS for Visual Presentation

**CSS** controls the visual layer and responsive behavior. The repository details CSS-based rendering, selector specificity, layout models, and responsive design principles around line 61 of the markdown file. Learners explore how styles cascade and how to build mobile-friendly interfaces without modifying the underlying HTML structure.

### JavaScript for Client-Side Interactivity

**JavaScript** enables dynamic behavior through client-side scripting. The Day 31-35 content covers core syntax, DOM manipulation methods, event handling patterns, and the basics of asynchronous programming. According to the source code around line 55, the tutorial emphasizes practical scripting techniques that allow web pages to respond to user interactions without server round-trips.

## Modern Frontend Frameworks and Libraries

Beyond vanilla technologies, Day 31-35 introduces several production-ready tools that accelerate frontend development.

### Vue.js Progressive Framework

**Vue.js** serves as the primary JavaScript framework in this section. The `Day31-35/32-33.Web前端入门.md` file (lines 75-86) provides a complete quick-start example demonstrating how to embed Vue via CDN and implement declarative data binding. This approach allows Python developers to understand component-based architecture without complex build tooling.

```html
<!-- Simple Vue.js binding example from the course -->
<div id="app">
  <h1>{{ message }}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: { message: 'Hello, Vue!' }
  })
</script>

```

### Element UI Component Library

**Element UI** extends Vue.js with pre-built interface components. The tutorial demonstrates importing Element's CSS and JavaScript assets from unpkg CDN and utilizing button and dialog components (referenced around line 96). This introduces learners to the concept of design systems and component libraries common in enterprise development.

```html
<!-- Element UI component usage -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="elem">
  <el-button @click="visible = true">打开弹窗</el-button>
  <el-dialog :visible.sync="visible" title="Element UI 示例">
    <p>这里是对话框内容。</p>
  </el-dialog>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#elem',
    data: { visible: false }
  })
</script>

```

### ECharts for Data Visualization

**ECharts** appears as the recommended solution for dashboard visualizations and data charts. While the repository mentions this library around line 101 as a powerful charting tool, it positions ECharts as the standard for Python developers who need to present backend data visually in the browser.

## CSS Frameworks for Rapid Development

Day 31-35 includes two distinct CSS frameworks that illustrate different approaches to styling.

### Bulma Flexbox Framework

**Bulma** represents a modern, Flexbox-based approach to CSS frameworks. The course material (lines 108-115) introduces Bulma's mobile-first methodology through a simple demo page. Unlike JavaScript-heavy frameworks, Bulma provides pure CSS utility classes for layout and components.

```html
<!-- Bulma layout example -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<section class="section">
  <div class="container">
    <h1 class="title">Bulma 示例</h1>
    <button class="button is-primary">按钮</button>
  </div>
</section>

```

### Bootstrap Responsive Toolkit

**Bootstrap** receives coverage as the widely-used responsive UI toolkit. The tutorial explains Bootstrap's grid system, pre-styled components, and utility classes around line 114. This provides learners with exposure to the most common CSS framework in web development history.

## Asynchronous Communication with Ajax

**Ajax** (Asynchronous JavaScript and XML) enables dynamic data loading without page refreshes. The `Day31-35/32-33.Web前端入门.md` file dedicates a subsection around line 48 to demonstrating how JavaScript fetches data from APIs in the background. This technique bridges Python backend services with JavaScript frontends.

```html
<!-- Bootstrap grid with Ajax fetch -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row" id="data"></div>
</div>

<script>
fetch('https://api.example.com/items')
  .then(r => r.json())
  .then(items => {
    const container = document.getElementById('data')
    items.forEach(i => {
      const col = document.createElement('div')
      col.className = 'col-md-4'
      col.innerHTML = `<div class="card"><div class="card-body"><h5>${i.title}</h5></div></div>`
      container.appendChild(col)
    })
  })
</script>

```

## Summary

- **Day 31-35** in the `jackfrued/Python-100-Days` repository covers the complete frontend stack through the `Day31-35/32-33.Web前端入门.md` file.
- Core technologies include **HTML** (structure), **CSS** (styling), and **JavaScript** (behavior), with specific coverage of DOM manipulation and event handling.
- The curriculum introduces **Vue.js** as the primary frontend framework, paired with **Element UI** for components and **ECharts** for visualization.
- **Bulma** and **Bootstrap** provide alternative approaches to responsive CSS frameworks.
- **Ajax** techniques demonstrate how to connect JavaScript frontends to Python backends asynchronously.

## Frequently Asked Questions

### What specific file covers the web technologies in Day 31-35?

The primary content resides in `Day31-35/32-33.Web前端入门.md` within the `jackfrued/Python-100-Days` repository. This markdown file contains all code examples, explanations, and technology introductions for the frontend portion of the course, spanning from basic HTML tags to Vue.js implementation.

### Does Day 31-35 cover backend Python web frameworks?

No, Days 31-35 focus exclusively on frontend technologies. While the repository is Python-centric, this specific section transitions learners to client-side development using HTML, CSS, and JavaScript. Backend Python web frameworks like Django or Flask appear in other sections of the 100-day curriculum.

### Which JavaScript framework is emphasized in the Python-100-Days course?

**Vue.js** receives the primary emphasis in Day 31-35. The tutorial provides a complete quick-start example showing how to instantiate Vue instances, bind data to templates, and handle user interactions. This progressive framework choice allows Python developers to incrementally adopt frontend complexity without overwhelming build configurations.

### How are CSS frameworks like Bulma and Bootstrap differentiated in the tutorial?

The course positions **Bulma** as a modern Flexbox-based alternative with a mobile-first philosophy, while **Bootstrap** represents the traditional, widely-adopted responsive grid system. Both frameworks are presented as tools for rapid prototyping, with Bulma introduced first (around line 108) followed by Bootstrap (around line 114), allowing learners to compare utility-first versus component-based CSS methodologies.