loading...
Cover image for Day 24 of #100DaysOfCode: Design the Prototype of the Website - Content Page and Shared Components

Day 24 of #100DaysOfCode: Design the Prototype of the Website - Content Page and Shared Components

jenhsuan profile image Jen-Hsuan Hsieh ・2 min read

Introduction

I begin to design and develop the prototype forDay 20 of #100DaysOfCode: Brainstorming for CS50W's final project Today.

My target is to build a website for readers to browse my articles easily. The technical stacks will be Django/DRF + PostgreSQL + ReactJS/Next.js.

This article is to note common components or skills for designing the content page and the shared components.

  • Content page: may show your products and provide operation choices for readers
  • Shared components: may include NavBar, SideBar, Footer, etc

Part 1. Content page

1. Modal

  • Sometimes we need modal to help or teach users doing the next actions. The package I used is react-bootstrap Alt Text

2. Pagination

  • Pagination is important if we have to show many products to users. The package I used is react-paginate Alt Text

3. Transition

  • We can also make the website naturally by adding transitions if the website provides filters or pagination. The package I used is react-paginatereact-transition-group Alt Text

Part 2. Shared components

1. NavBar

  • The most common components on NavBar are Brand logo, About, Tools, Sign in/Sign out/Sign up
  • The things on NavBar depends on the user has login or not Alt Text

2. Side bar

  • The things on Side Bar depends on what kind of abilities you want to provide to users

3. Footer

  • The most common components on Footer are slogan, call-to-action, social media buttons, copy right text Alt Text

About me

There are some of my articles. Feel free to check if you like!

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh

@jenhsuan

6+ year work experience in the software engineering field. 2+ year work experience with front-end JavaScript framework like React.js, Knockout.js. and Microsoft solution.

Discussion

markdown guide