Introduction to websites

There is a strong emphasis on websites and frontend development not because I am biased towards them I think OS development, mobile development, desktop development are just if not more important. It is just a fact that the world right now is mainly investing in website development and also the programming community is largely concentrated in this space. There are two major benefits here: first is job opportunities and the second is support/tooling.

Web development is a large field in itself there are a lot of different jobs in this area: Designer -> frontend developer -> backend developer -> QA tester -> Dev Ops Engineer -> Database Administrator -> Network Administrator -> IT

In practice, the roles overlap. The most common titles you will hear are frontend developer, backend developer, and full stack. They are the broadest, frontend development refers to everything in the browser (client side), backend development is related to servers (server-side) and creation and communication with databases. Full stack is just frontend and backend development together. 

We will focus on frontend development mainly because you will likely spend most of your time here and this is the most active community and in terms of frameworks/libraries there is sort of a community consensus on which one to use. You can see from this graph that most Github stars are concentrated in two frameworks https://popularly.nooblingis.now.sh/. For backend development, everyone has their own favourite framework and they span across many different languages e.g. php, Java, JavaScript, Go, Ruby, Python so it's hard to teach a framework because likely it will change when you start working.

## Building blocks of the web

I am sure you have heard of HTML, CSS, JS. The reason is that **all** websites consist of these three languages. The browser is the program that interprets these three languages and outputs the website on your screen. Over time we have lost touch with these basic building blocks because of all the popular frameworks out there: bootstrap, React, Vue and the tooling: Webpack, Babel, Gulp, Node. However, they are all just abstractions over HTML, CSS, JS and you can build very nice websites with just those three languages. 

It may seem strange that we need three languages to build websites but the main intention by the [designers of the web](https://www.w3.org/standards/) is that we get separation of concerns. Where HTML defines the structure of our website, CSS makes it pretty and JavaScript makes it dynamic e.g. when a user clicks a button something pops up. It doesn't have to be completely separate things and popular frameworks like React have blurred the lines with JSX (JavaScript inside HTML).

## First webpage

By convention, we define the main page/document as `index.html`. You can think of this as the entry point to your website. Subsequent website pages can be defined with any name `foo.html` and to navigate to that page you just go to `/foo`. Let's build something.

Create a new file called `index.html` or use https://codesandbox.io/s/vanilla 
```html
<!DOCTYPE html>
<html>

<head>
	<title>Web page title</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app"></div>

	<script src="linkToSomeScriptFile.js">
	</script>

       	<h1>Hello world</h1>

	<p>I like my first web page</p>
</body>

</html>
```
* `<!DOCTYPE>` is an instruction to the web browser about what version HTML the page is written in. . `<!DOCTYPE html>` specifies HTML5 the latest HTML version.
* HTML elements are written with this syntax `<ElementName> Content of html element </ElementName>` The most important role of this syntax is to convey the semantics to the developer. HTML elements do come with some styling but most of the time we override them with CSS. 
* Common html elements
  * `ul -> li` Unordered list
  * `ol` Ordered list
  * `p` Paragraph
  * `pre` Pre-formatted text
  * `blockquote`
  * `br` Line Break
  * `div` Division or container
  * `hr` Horizontal line
  * `span` Dummy element
  * `strong` Bold text
  * `table -> th -> tr -> td` table

> Demo https://codesandbox.io/embed/vigorous-smoke-ywiwu

## Making the website pretty with CSS

It is easy to get started but it is very hard to master you have to understand the fundamentals well along with a lot of experience. To position elements into an exact spot is not as easy as you might think.

![image](https://user-images.githubusercontent.com/23206864/60089438-0efcea00-9773-11e9-8ddc-3cc41cbbbfeb.png)

### Selectors 

To select the exact html elements to style you use "selectors"

* HTML element `p {}`
* id `#elementID {}` 
* class `.elementClass {}`
* data attribute `[data-tid="btn-save"]` `<div data-tid="btn-save"></div>`
* element attribute `input[name="firstname"]` `<input name="firstname" />`

### Common CSS properties
* `color` font color
* `display` https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display
* `position` where to place the element
* `font-size` Font size of text inside element
* `border` border of the element
* `box-shadow` https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
* `font-weight` Thickness of font dependent on what fonts you have downloaded
* `height` Height of element
* `width` Width of element
* `padding` spacing inside element
* `margin` spacing outside element
* `z-index` If two element stacked on top of each other the higher index one is shown

#### Psuedo classes

* `:hover` When you hover over the element
* `:blur` When you go out of the element
* `:active` When you have an active link

### CSS Units
Common units used
* `px` Pixels (1px = 1/96th of 1in)
* `rem` Relative to the font size of root element
* `em` Relative to the current font size e.g. 2em means 28px if current font size is 14px
* `vw` and `vh` view width and view height are relative units based on devices current width and height
More units https://www.w3schools.com/cssref/css_units.asp

### Layouts 

A very important function of CSS is to layout your webpage. The modern way to do it is using `flex-box` and `CSS grids` previously a major function of CSS libraries like bootstrap was to help with this because layouts were hard to achieve.

### Flex box
The definitive guide on flex box https://css-tricks.com/snippets/css/a-guide-to-flexbox/

`display: flex`

Gives container and children elements ability to position nicely. It is great to evenly space elements but if you want more control CSS grids might be a better option.

Here are the common properties you will use
* `flex-direction: column|row`
* `flex-wrap: wrap|nowrap`
* `justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly`
* `align-items: stretch | flex-start | flex-end | center | baseline`
* `align-content: flex-start | flex-end | center | space-between | space-around | stretch`

### CSS Grid

A great guide to learn grid https://css-tricks.com/snippets/css/complete-guide-grid/ however we will skip it because I want to keep things simple. Flexbox is incredibly powerful and you can build a full website with it but for more control, you may want to include grid. Here is an example where grid shines. https://blog.codersforcauses.org/creating-a-mosaic-in-html-cs/

## Building a portfolio site with just HTML and CSS

You can view an example website here: https://github.com/noobling/learn/tree/html-css-example
and it is hosted here: https://example-portoflio-webiste.nooblingis.now.sh/

We are going to try to build something like that.

0. Download the assets https://github.com/noobling/learn/blob/html-css-example/assets-to-download.zip
1. Create a GitHub repo
2. Clone the repo onto your local machine
3. Make an initial commit to it
4. Push it up to Github to test if everything is working
5. Start making your changes

### Key takeaways

* Appreciate the role of HTML and CSS
* It is easy to build a good looking website that loads very quickly with pure HTML and CSS with SVGs
* Somethings are easy to do and other things are very hard to do
* The biggest issue is scalability if we want to create a website with multiple pages then we have to copy and paste a lot of code. What happens if we need to change a line of code?

### Making your website accessible to everyone

1. Signup for a now.sh account
2. Install now desktop https://zeit.co/download
3. use your cli `now` 

### Changing each others 

Now try to make a change to each others code base
1. Go to there github repo
2. Fork the github repo
3. Make a change and commit it
4. Make a pull request

### Going further

The best way to learn is to make your own additions to the website here are some things you could do to give the website a unique look.
- Change the color pallet right now it is only 3 colors
- Instead of using straight edges use some border radius
- Add background images to each section or use parallax scrolling
- Add more html pages
- Add more sections to create a real portfolio site
- Make the contact form work

## Further reading & examples
*  https://popularly.nooblingis.now.sh/
* https://www.w3.org/standards/
* https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* https://example-portoflio-webiste.nooblingis.now.sh/
* https://css-tricks.com/snippets/css/complete-guide-grid/ 
* https://zeit.co/

# 🎉 We did it next we are going to look at JavaScript and its role in web



Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduction to websites #4

Building blocks of the web

First webpage

Making the website pretty with CSS

Selectors

Common CSS properties

Psuedo classes

CSS Units

Layouts

Flex box

CSS Grid

Building a portfolio site with just HTML and CSS

Key takeaways

Making your website accessible to everyone

Changing each others

Going further

Further reading & examples

🎉 We did it next we are going to look at JavaScript and its role in web

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development