# Introduction to Web Design
This guide is to learn building a simple personal website using Bootstrap.

Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive websites, which saves developers from writing lots of CSS codes.

# Resources
The resources that will be used during this webminar:
* Bootstrap: https://getbootstrap.com
* Codeply: https://www.codeply.com
* Google Fonts: https://fonts.google.com/
* Font Awesome: https://fontawesome.com/
* Personal website example: https://github.com/youthinkk/bootstrap-demo

# Wireframing
A wireframe is a map to your website that prototypes the design. It will be as a guide as the developer put these designs into codes.

Recommended tools:
* [Sneakpeekit](https://sneakpeekit.com/)
* [Sketch](https://www.sketch.com/)
* [Balsamiq](https://balsamiq.com/)
* [Adobe XD](https://www.adobe.com/sg/products/xd.html)
* [Figma](https://www.figma.com/)

# Bootstrap
Bootstrap v5.0.2 is used in this webminar. Topics covered are:
1. How to read the Bootstrap documentations
2. How to include Bootstrap into the codes
3. Build personal websites with:
* [Container](https://getbootstrap.com/docs/5.0/layout/containers/)
* [Navigation bar](https://getbootstrap.com/docs/5.0/components/navbar/)
* [Carousel](https://getbootstrap.com/docs/5.0/components/carousel/)
* [Card](https://getbootstrap.com/docs/5.0/components/card/)
* [Grid](https://getbootstrap.com/docs/5.0/layout/grid/)
* [Gutter](https://getbootstrap.com/docs/5.0/layout/gutters/)

# Images

| Image | URL |
| :-----: | :---: |
|  | `https://i.imgur.com/o4ew0kY.jpg` |
|  | `https://i.imgur.com/ynI79iH.jpg` |
|  | `https://i.imgur.com/vDEsXdO.jpg` |
|  | `https://i.imgur.com/aEcq0H2.jpg` |
|  | `https://i.imgur.com/9MdhplO.jpg` |

# Fonts
Font source:

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Oswald&family=Sacramento&display=swap');

Font rules:

font-family: 'Amatic SC', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Sacramento', cursive;