Skip to content
CBI and IBAY Web Design Workshop — Nov 5-7, 2019
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

🇨🇲 Yaoundé web design workshop

CBI and IBAY Web Design Workshop held November 5-7, 2019

👉 Objectives

To provide training in HTML, CSS, Web Design and Web Site Development for students and early career professionals at HEIS, IITA and CRESA.

👉 Outputs

Each student will design and build a personal website.

“On Tuesday morning, my students knew no HTML or CSS. Today, they’re publishing their first web page, using CSS Grid.”
– Andy Clarke

👩‍👩‍👦‍👦 Student websites and GitHub profiles

  1. Freddy Sany | GitHub Profile

  2. Kamta Romeo | GitHub Profile

  3. Eric Onguene | GitHub Profile

  4. Julia-yossa's website | GitHub Profile

  5. Blondelle Mélina Atsafack | GitHub Profile

  6. kamkodoriane | GitHub Profile

  7. Tchuekam Tchatchoua Alain Michel | GitHub Profile

  8. dassikouam | GitHub Profile

  9. Ngwa Rogers | GitHub Profile

  10. Godswill Ntsomboh Ntsefong | GitHub Profile

  11. Ndifor James Nih | GitHub Profile

  12. Alain Brice Tonle Tonle | GitHub Profile

  13. Ousseni Mfouapon Mbohou | GitHub Profile

  14. tchanou-tchapda | GitHub Profile

  15. Eric Nana | GitHub Profile

  16. | GitHub Profile

  17. Ashu Mpey Ayuk Bernice | GitHub Profile

  18. Menye Yollande | GitHub Profile

  19. Eric Rostand | GitHub Profile

  20. Nicole Maffo | GitHub Profile

  21. Deguema | GitHub Profile

👨‍🏫 Instructor Websites

🦍 Andy Clarke

🐴 Scott Gruber

🔗 Links

📰 Newsletters

  • CSS Layout News
    A weekly collection of tutorials, news and information on all things CSS Layout by Rachel Andrew
  • Veerle's Designers newsletter
    A weekly newsletter filled with design inspiration, a curated downloadable swatches color palette, quick design tips and the same resources I learn from.
  • Responsive Design Newsletter
    A once-weekly round-up of responsive design articles, tools, tips tutorials and inspirational links.

👍 W3C Online Courses Free!

Learn how to build Web sites using HTML5 and basic CSS, directly from W3C, creator of the latest Web standards.

  1. HTML5 and CSS Fundamentals
  2. CSS Basics

👍 Learn the Web

Learn the Web is a structured, curated, living guide to web development for graphic designers. Good reference materials available.

  1. All Topics

  2. Using Paths and Folders

  3. Naming Files Rules

  4. Basic typography

👍 🛠 Carpentries

Teaching basic skills for research computing. Online workshops for Python, R, Ecology, Genomics, Geospatial Data, Working with Data, OpenRefine.


📚 Books

🎨 More Resources and Sites

W3C: Standards and Accessibility

The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.

🍇 Fonts

Mozilla Developer Network

👉 CSS Grid

  1. Quickly master CSS Grid

  2. CSS Grid Layout

👉 Web Developer information

  1. Learn Web Development
  2. Getting started with the Web
  3. Learn HTML
  4. Learn CSS
  5. Learn JavaScript

👉 CSS: Cascading Style Sheets

  1. CSS Introduction, Tutorials and Reference
  2. CSS Flexbox Layout
  3. CSS Variables
  4. CSS Shapes
  5. CSS Transforms
  6. CSS Animation

🎮 Games

👍 More on CSS Grid

  1. Grid by Example by Rachel Andrew
    Everything you need to learn CSS Grid Layout
  2. CSS Grid Generator
  3. CSS Tricks Guide to CSS Grid

🛠 Apps

👉 Editors

👉 Git

👉 Browsers

👉 Graphic and Video Editors

👉 Server

👉 Social developer tools


Day 1

Session 1: Setup

  • Introduction
  • Tools & Apps
  • Naming conventions
  • Using paths & folders
  • Demo blank web site

Hands on

  • Setup your computer
  • Create first HTML and CSS

Session 2: How do I build a web page?

  • HTML tags
  • CSS properties
  • Look at how to write HTML and how to choose the proper HTML tags
  • Learn how to change the colors and type on a website.

Hands on

  • Markup text file

Session 3: How do I build a website?

  • Demo blank site
  • Setup files and folders
  • Page structure
  • Setup nav links
  • Writing for the web

Hands on

  • Plan your site by sketching, writing text
  • Starting to write code and make pages
  • Setup nav links
  • Markup text on pages

Session 4: How do I publish a website?

  • Version control & GitHub
  • How to use GitHub
  • Push and Pull
  • Fork and clone a repo
  • Publish to GitHub Pages
  • Demo GitHub Pages

Hands on

  • Create “Hello World” web page
  • Setup GitHub account
  • Working with Git
  • Publish to GitHub

Day 2

Session 5: Photography for the Web

  • Using mobile phone camera
  • Framing and Light
  • Photograph people and landscapes
  • Prepare photos for the web

Hands on

  • Take photos
  • Prepare photos for the web
  • Add photos to your site

Session 6: Design for the Web

  • Atmosphere
  • Color
  • Type

Hands on

  • Color palette
  • Google fonts
  • Modular Type Scale
  • CSS custom properties

Session 7: Art Direction for the Web

  • Demo art directed layouts
  • Building a Grid
  • Layout and placing content

Hands on

  • Design your site

Day 3:

Session 8: Publish my website

  • Debug and testing site
  • Making changes

Hands on

  • Finishing your site
  • Publish your site

Session 9: Presentations

  • Next steps
You can’t perform that action at this time.