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!