Introduction to websites #4

noobling · 2019-06-25T02:41:40Z

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 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

<!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.

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.

Download the assets https://github.com/noobling/learn/blob/html-css-example/assets-to-download.zip
Create a GitHub repo
Clone the repo onto your local machine
Make an initial commit to it
Push it up to Github to test if everything is working
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

Signup for a now.sh account
Install now desktop https://zeit.co/download
use your cli now

Changing each others

Now try to make a change to each others code base

Go to there github repo
Fork the github repo
Make a change and commit it
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

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

The text was updated successfully, but these errors were encountered:

JeremiahPinto · 2019-06-30T09:53:48Z

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

Viewport units:
vw: Based on current width of device. E.g. 10vw means that it's 10% of the width of the device and 100vw means that it's the full width of the device.
vh: Based on current height of device. E.g. 20vh means that it's 20% of the height of the device and 100vh means that it's the full height of the device.
vmin: Compares the height and width of the device and chooses the lower of the two values. E.g.: if height of the device is 1000px and width is 500px, vmin will use the value of 500px.
vmax Compares the height and width of the device and chooses the higher of the two values. Using the same example from above, the value used will be 1000px

  More units https://www.w3schools.com/cssref/css_units.asp

JeremiahPinto · 2019-06-30T10:35:19Z

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Link for how to effectively use flexbox

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduction to websites #4

Introduction to websites #4

noobling commented Jun 25, 2019 •

edited

Loading

JeremiahPinto commented Jun 30, 2019

CSS Units

JeremiahPinto commented Jun 30, 2019

Introduction to websites #4

Introduction to websites #4

Comments

noobling commented Jun 25, 2019 • edited Loading

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

JeremiahPinto commented Jun 30, 2019

CSS Units

JeremiahPinto commented Jun 30, 2019

noobling commented Jun 25, 2019 •

edited

Loading