[toc]

background

Brief project background and technical background on “Dada Lin’s personal blog” based on school curriculum

Remote repositories: Gitee, Github

Project background

In this semester's "Web Framework Application and Development" course, I learned jQuery + Bootstrap responsive UI framework. The project theme of "personal blog" was selected, and "Lin Dada's personal blog" was developed from zero to record his daily life.Copy the code

Technical background

Front-end technology: Responsive UI framework with jQuery + Bootstrap. Back-end technology: No back-end page.Copy the code

task

  • Use a responsive framework called Bootstrap.
  • At least 5 different look and feel pages.
  • Contains eight of the following components: navigation bar, navigation, playplayer, list group, media object, card, Collapse and expansion panel, table, form, paging, button group, input group, Modal box, pop-up box, info prompt box, and Loading animation.
  • Submit material: source code package (no more than 5M) + documentation.

page

Perform the page presentation of the project.

Home page

Miss and Sir

Miss Luo’s picture

Our time

About us

component

  1. Public: responsive layout, navigation bar, navigation, collapsible panel, cards, media objects. (4)
  2. Home page: giant screen, mask layer. (2)
  3. Miss and Sir: media object, form, information box. (2)
  4. Miss Luo’s picture: a waterfall. (1)
  5. Our time: Personally written “CSS3 Glitch Text Animation” and “Canvas Ball Animation Timer”.
  6. About us: List groups, round diagrams. (2)

Total 11 components + personal programming 2 components + global CSS3 animation effects.

directory

Source directory details

- Components: HTML pages for components other than the home page. - CSS: indicates the project CSS module file. -img: indicates the IMG file corresponding to the project. -js: the js file used by the project. -inde.js: the basic JS function. - Time: "Our Time" page, Canvas ball animation timer. - index. HTML: home HTML page - readme.md: project description document.Copy the code

At the end

The above is the responsive UI framework of jQuery + Bootstrap that I learned based on the course of “Web Framework Application and Development”. I built a simple personal blog project to record personal cases for learning together. Yo! Feel good remember to like young man!