---
# System prepended metadata

title: Introduction to Web Design

---

# 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 | 
| :-----: | :---: | 
| ![Culture-1](https://i.imgur.com/o4ew0kY.jpg =300x200) | `https://i.imgur.com/o4ew0kY.jpg` | 
| ![Culture-2](https://i.imgur.com/ynI79iH.jpg =300x200) | `https://i.imgur.com/ynI79iH.jpg` | 
| ![Culture-3](https://i.imgur.com/vDEsXdO.jpg =300x200) | `https://i.imgur.com/vDEsXdO.jpg` | 
| ![Project-1](https://i.imgur.com/aEcq0H2.jpg =300x169) | `https://i.imgur.com/aEcq0H2.jpg` | 
| ![Project-2](https://i.imgur.com/9MdhplO.jpg =300x195) | `https://i.imgur.com/9MdhplO.jpg` | 

# Fonts
Font source:
```css=
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Oswald&family=Sacramento&display=swap');
```
Font rules:
```css=
font-family: 'Amatic SC', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Sacramento', cursive;
```
