https://github.com/henrytwo/utmdsc-web-101
https://github.com/henrytwo/utmdsc-web-101
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/henrytwo/utmdsc-web-101
- Owner: henrytwo
- Created: 2019-10-16T04:06:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-02T00:13:27.000Z (over 6 years ago)
- Last Synced: 2025-02-07T23:37:33.083Z (over 1 year ago)
- Language: HTML
- Size: 775 KB
- Stars: 0
- Watchers: 2
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UTMDSC-Web-101
By Henry Tu
## Demo Pages
[Hello World!](https://henrytwo.github.io/UTMDSC-Web-101/step-1-helloworld)
[HTML Tags](https://henrytwo.github.io/UTMDSC-Web-101/step-2-tags)
[CSS](https://henrytwo.github.io/UTMDSC-Web-101/step-3-css)
[Bootstrap](https://henrytwo.github.io/UTMDSC-Web-101/step-4-bootstrap)
## Bread and Butter
There are 3 main components to a website (frontend).
HTML - The backbone / skeleton
CSS - The style and formatting
JS - The logic (and actual code)
## Creating an HTML Page
### Comments
```
```
### How tags work
Replace `X` with the name of the tag. Be sure to close any tags that you open!
```$xslt
```
### Sample Page
```
Hello, world!
This is a cool website.
```
### Basic text
```$xslt
This is a paragraph
BIG TEXT
LESS BIG TEXT
LESS BIG TEXT
SMOL TEXT
SMOLLER TEXT
```
### Hyperlinks
You can use `a` tags to direct users to another page.
```$xslt
Go to Google!
```
Add ``target="_blank"`` to the `a` tag to make it open in a new tab.
```$xslt
Go to Google!
```
### Images
You can use `img` tags to add images to your website! Put the path to your desired image in `src=""`
```$xslt
```
### Linking CSS
It's good practice to put CSS in a different file so that your code doesn't become super cluttered. Put the path to your CSS file in `href=""`.
``
``
### Scale on mobile properly
Add this to make sure your website scales on mobile properly.
``````
### Bootstrap
Bootstrap is a popular framework for frontend web projects. Why make something from scratch when it already exists?
To install bootstrap, add the following in your ``.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Here's some documentation to help you get started:
[Bootstrap Documentation](https://getbootstrap.com/docs/4.3/getting-started/introduction/)