Message from Yann
[Landing page]
In this free workshop you'll code and design your own landing page using HTML/CSS & the Twitter Bootstrap CSS library. We will also cover lots of design pro-tips to find icons, fonts, colors.
👉 Overview
- Go through HTML / CSS core notions
- Discover lots of graphical tips and tools (fontawesome, Google Fonts, Coolors, etc..)
- Introduce Bootstrap and its responsive grid system
Pre-Session Materials
👉 Pre-requisite
- No pre-requisite, this is a workshop for beginners!
- This is a 100% online workshop on Zoom
- Install Chrome (https://www.google.com/chrome/browser/desktop/index.html) and VS code (https://code.visualstudio.com/) before coming
Session Materials
Link for workshops platform:
Video:
Post-Session Materials
Design mantra:
- Good design = design you don’t notice, be simple and subtle
- If you’re a bad designer, be a good design copycater!
- Begin with fonts and colors
- For well proportioned sizes, use multiple of 8px ( 8px, 16px, 24px, 32px, 40px,..)
Great references for…
- icons: Noon Project (B/W), Nucleoapp (color), Coding language icons, Fontawesome, Japanese Pictograms font
- images: Pexels (free pics), Placeholder pics, Placeholder pics (w/ keyword), Undraw (free illustrations), Avatar placeholders
- backgrounds: svgbackgrounds.com, patternico.com, cssgradient.io
- video backgrounds: Pexels videos, coverr.co
- colors: coolors.co, colohunt.co, sipapp.io (Mac free trial), colorzilla.com (All), colormind.io/bootstrap
- design examples: dribbble.com, behance.net
- website designs examples: awwwards.com, siiimple.com, csswinner.com, onepagelove.com
- css tricks : Neumorphism UI generator, Tips for Dark mode pages, old school NES CSS framework, infinity of cool CSS tutorials, Japanese fonts, CSS transform playground, Small CSS animations (more here), Devices in CSS for portfolio, pure CSS toggle button, SVG waves, scroll animation
And more: