Lecture Notes: Adding Project Listing Layout

Previous Lesson Recap

• Overview of adding and customizing Chat.js.

Current Lesson Focus

• Objective: Learn how to add a project listing layout (summary of recent projects).

Key Steps to Add Project Listing

1. HTML Structure

   • Place div immediately under the charts section:

     <div class="recent-projects">
         <!-- Recent Projects here -->
     </div>
     

   • Use comments to make tracing easier in the code:

     <!-- Recent Projects -->
     

2. Project Container

   • Create a listing for each project using a container (card):
     • Class: listing
   • Each project entry should include:
     • Category color
     • Title
     • Button (Action)

3. Title Division

   • Create a div for the title of each project:

     <div class="title">
         <span class="category"></span>
         <h2>Project Title</h2>
         <p>Created by: Username</p>
         <span class="material-icon outline"></span>
     </div>
     

   • Example Title:
     • H2: "Layouting Project"
     • P: "Created by: Kachuko"

4. Duplicating Project Listings

   • Duplicate the project structure for multiple projects:
     • Example Projects:
       • Photoshoot by Musa Ismail
       • Branding by Ezekiel Arrow
       • Graphic Design (additional project)

Next Steps

• CSS Integration: Improve the aesthetic appearance of the project listings.
• Goals: Make the page visually appealing and inviting.

Conclusion

• Final thoughts on the importance of CSS for beautifying the webpage.
• Call to action: Subscribe to the YouTube channel and follow social media for updates.

Thank you for watching! See you in the next lesson!