2 Intro Web Dev

A Computer For Hand Coding Web Dev 🔼

Any computer can be used to get started donig hand coding web dev.

It can be a windows or mac or even linux.

All computers have a browser and a text editor.

Access to tutorials - these can be found on the internet using google and the search terms: web development beginner tutorial.

At this point - use only free tutorials. There are plenty of resources: web sites, youtube videos, through your library, a friend.

Now - you just need the patience to sit down and do it.

So there - that's all there is to getting started.

From this point you can change your web dev environment to make it easier and more enjoyable.

Improve Your Web Dev Environment: Hardware 🔼

Monitor 🔼

Get the largest monitor with the highest resolution you can afford.

Picking a new/used monitor is an area where the variety of old and new technology makes for complications and headaches.

This is when buying a desktop/monitor as a set or a laptop makes things simple - someone else made the decision of monitor size and resolution for you.

Desktop 🔼

For a desktop getting a larger monitor is simple - and not too expensive if it is used - just make sure the monitor's video connection can be connected to the desktop's video connection - which means having the proper cable.

A computer store will be able to help you. This is where an in-person visit is useful to see what can be done.

If the desktop has internal slots, a card can be added to allow multiple monitors on one desktop. Again, a computer store will be able to help you.

Laptop 🔼

For a laptop - get an external monitor.

Check the method of connection on the laptop and monitor: VGA, HDMI, Displayport, DVI. A computer store will be able to help you. Take your laptop with you to the computer store.

I prefer using an external full sized keyboard and mouse for a laptop. I usually use wireless keyboards and mice so I've invested in rechargeable batteries and a battery charger.

Examples of Monitor Resolutions

1920 x 1080
1920 x 1200
2560 x 1080
3840 x 2160 - 2 1920 x 1080 monitors

Resolutons are written as width x height and the numbers are the number of pixels.

RAM 🔼

Adding more RAM to your computer gives an immediate seeable benefit.

If you have a 64bit computer with 4gb of RAM add 4gb to get an immediate seeable benefit.

Computers/laptops being sold these days usually have at least 8gb of RAM. If not, insist on 8gb before buying a desktop/laptop. This may add $25-$60 to the price. Also, what is the maximum amount of RAM that can be installed on that desktop/laptop? A useful piece of info to have.

If you have a 32bit computer with less than 4gb of RAM bump it up 4gb to an immediate seeable benefit. It may be difficult to find the proper RAM because it's old technology. A computer store can help you with this.

If you are looking to buy an used desktop/laptop, check the amount of RAM it has. If it isn't at least 8gb, then check with a computer store to see if the proper RAM is available. This will be $25-$60 for each RAM stick. If the proper RAM is NOT available, DON'T BUY that desktop/laptop.

If you get any desktop/laptop offered to you for free, take it. You can:

have it as a backup - computers do die
use it for testing
install Linux on it
maybe you'll find the proper RAM later
it may be good enough if a lightweight Linux is installed on it
I've installed Linux Mint Mate on a HP Mini netbook with 1gb of RAM - it works ok - just now it's running a slideshow of family pictures
Best Lightweight Linux Distributions For Older Computers 2020-Nov-05
run a slideshow on it
take it apart and see what's inside
reinstall its operating system to have a system to test other applications
backup your main computer to it - there's no such thing as too many backups

Testing Web Pages 🔼

When you're learning web dev, testing web pages on your own computer and browser is sufficient.

But when you've reached a high enough skill level you'll want to see how your web pages look in different browsers, monitor resolutions, tablets and smartphones.

There's very little difference between browsers and monitors for desktop systems.

There's a greater difference between desktop monitors and laptop screens. Laptop screens have resolutions much smaller than a desktop monitor which means what appears first on their screens is less than a regular monitor.

The lowest common monitor resolution is 1920x1080 while laptop screens are much less. Examples of laptop screen resolutions:

1360 x 768
1280 x 1024
1280 x 960
1280 x 720
1024 x 768
800 x 600

And the size of text in browsers also affects presentation.

Then there's tablets and smartphones.

You can connect your tablet/smartphone directly to your computer for testing web pages. Google to see how this is done for your device.

Tablet Screen Resolution Stats Worldwide 🔼

Tablet Screen Resolution Stats Worldwide November 2020
768x1024	49.02%
1280x800	7.24%
800x1280	5.6%
601x962	5.05%
962x601	3.54%
810x1080	2.75%

Mobile Screen Resolution Stats Worldwide 🔼

Mobile Screen Resolution Stats Worldwide November 2020
360x640	13.37%
414x896	8.16%
375x667	7.14%
360x780	5.52%
375x812	5.41%
360x760	4.61%

Besides having smaller screens, some html tag/css combinations don't behave in the same way as on desktop monitors/laptop screens.

One example is the select tag - the size attribute has weird behaviour on tablets and smartphones.

Browser Market Share Worldwide November 2020
Chrome	63.54%
Safari	19.24%
Firefox	3.79%
Samsung Internet	3.49%
Edge	3.01%
Opera	2.11%

Browser Market Share in Canada November 2020
Chrome	51.84%
Safari	29.9%
Edge	5.24%
Firefox	4.83%
Samsung Internet	3.65%
IE	1.5%

Browser Market Share in USA November 2020
Chrome	46.17%
Safari	37.83%
Edge	4.87%
Firefox	3.7%
Samsung Internet	2.3%
IE	2.19%

Internet Connection 🔼

If you've got a good internet connection that you're happy with, good for you - get learning!

If you don't have an internet connection or a poor one, you will need to go elsewhere to get a good internet connection so you can use online resources. This is when a laptop is great. You can go to a connection with it:

school
coffee shop
public library
friend
work - after hours

Once you're connected, if possible download tutorials and make notes so you can learn offline. You will need to be efficient with your time - don't use social media .

You can borrow or buy a book for beginning web dev and learn offline. At this time only look at HTML and CSS - maybe also Javascript but it'll be awhile before you'll need to worry about it.

Text Editor for Web Dev 🔼

There are many advantages to using an editor designed for web pages instead of notepad. Some of these are:

syntax highlighting
auto indentation
auto-completion
brace matching
easier to edit multiple pages at once

There are many free editors available. To get one just go to its website, download and install. The website will recognize your computer as a windows or mac.

Whichever editor you choose, it'll take time to get comfortable with it to use it efficiently. Lots and lots of time! You need lots of PATIENCE !

Here are a few editors that have caught my attention:

Name	Cost	Textual	WYSIWYG	Windows	Mac	Have I used it?	Ease of Learning	Website	Do I recommend it?
gedit	Free	Yes	No	Yes	Yes	Yes	Easy	Softonc	No
Notepad++	Free	Yes	No	Yes	No	Yes	Hard	Notepad++	No
Adobe Dreamweaver CC	$	Yes	Yes	Yes	Yes	No	n/a	Adobe	n/a
Visual Studio Code (VS Code)	Free	Yes	No	Yes	Yes	Yes	Hard	Visual Studio Code	Yes
BlueGriffon	Free	Yes	Yes	Yes	Yes	Yes	Hard	BlueGriffon	No
Bluefish	Free	Yes	No	Yes	Yes	Yes	Easy	Bluefish	Yes
Eclipse	Free	Yes	No	Yes	Yes	No	n/a	Eclipse	n/a
EditPlus	$	Yes	No	Yes	No	Yes	Easy	EditPlus	No

WYSIWYG: What You See Is What You Get

This is where having an internet connection is needed - even for just a few minutes - to download and install your editor of choice.

I've used Bluefish for several years so I'm biased. I first used it on Linux. I liked it. Notepad and gedit are okay for simple files but are no match for Bluefish's features.

Install Bluefish

When I make examples I'll use Bluefish as the editor.

Bluefish: Some Tips 🔼

shift-ctrl-c creates a comment around a block of selected text.

if CSS text it'll be a CSS comment
if HTML text it'll be a HTML comment
if Javascript text it'll be a Javascript comment

shift-ctrl then clicking a link causes that link to open in a new tab and switch the focus to it.

My generator , author , date meta content changes when page is saved. 🔼

Say you use Quicktstart and you keep all the meta tags - you get your initial basic html document before it is saved. In the red rectangle below are the meta tags for 3 names:
- generator
- author
- date
Keep an eye on these after saving it with a html file extension.
After saving it as a html file, you see the content attribute of the 3 names change to:
- name="generator" content="Bluefish 2.2.10"
- name="author" content="eugene" >
- name="date" content="2020-12-08T21:09:46-0500"
These are automatically set and updated each time the file is saved because of a Preferences setting.
If you remove these tags you won't have to worry about them.
I don't like these values but I haven't found a way to change them. For example I want date/time in yyyy-mmm-dd HH:SS format.
I will change the Preferences setting.
Click Edit on top menu bar.
Click Preferences at the bottom of the popup menu.
Edit preferences window opens.
Scroll down the left side to Plugins and click HTML Features.
To the right you see checkboxes for the 3 names to be automatically updated.
These are updated each time the file is saved.
Uncheck or check your choices.
Click Apply.
Click OK .
Use Quickstart again and save it with html file extension.

Explaining the meta Tags 🔼

Gives the browser information - the metadata - about the web page which it uses to show how to display the page.

There can be many meta tags or none. This describes some common meta values.

meta tags always go inside the head element - between <head> and </head>.

Can specify:

character set
page description
keywords
author of the web page

Metadata is not displayed to a person browsing.

Metadata is used by:

browsers - how to display content or reload page
search engines - keywords
other web services

<meta name="generator" content="Bluefish 2.2.10" >
If use Quickstart... feature the name of the editor can be inserted automatically.
Doesn't have to be there.
<meta name="author" content="eugene" >
If use Quickstart... feature the author's name can be inserted automatically.
Doesn't have to be there.
<meta name="date" content="2020-12-05T07:38:21-0500" >
If use Quickstart... feature the date can be inserted automatically.
Doesn't have to be there.
<meta name="copyright" content="Copyright Eugene Ruthven" >
Manually entered.
Doesn't have to be there.
<meta name="keywords" content="web, html, editor, introduction, internet, beginner" >
Can be used by search engines.
Manually entered.
Limited value these days.
Doesn't have to be there.
<meta name="description" content="Basic web development - an introduction." >
Can be used on search engine result pages.
Manually entered.
Limit: 160 characters - including spaces.
Doesn't have to be there.
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" >
NOINDEX tells content search engines not to index and display to users within search engine result pages.
NOFOLLOW tells content search engines don't follow links on this page.
Doesn't have to be there.
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
Called http-equiv(alent) because all the allowed values are names of particular HTTP headers.
Used for http response message headers.
Declares the MIME type and character encoding of the document.
If specified, the content attribute must have the value text/html; charset=utf-8.
Same as <meta charset="utf-8" >.
Doesn't have to be there.
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" >
Called http-equiv(alent) because all the allowed values are names of particular HTTP headers.
Used for http response message headers.
Not needed because of previous content-type.
<meta http-equiv="content-type-type" content="text/css" >
Called http-equiv(alent) because all the allowed values are names of particular HTTP headers.
Used for http response message headers.
Specifies the default style sheet language for a web page.
Default form is text/css.
Doesn't have to be there.
<meta http-equiv="expires" content="0" >
Called http-equiv(alent) because all the allowed values are names of particular HTTP headers.
Used for http response message headers.
Keeps a browser from caching the web page.
Load web page every time from the server and NOT from cache.
Doesn't have to be there.

Use Bluefish's Quickstart to Remove Default Meta Tags 🔼

The default set of meta tags presented by Bluefish:
On the right side are 2 buttons: Add (enabled) and Remove (disabled):
When name="generator" content="Bluefish" is clicked it is highlighted and the Remove button is enabled:
When the Remove button is clicked, name="generator" content="Bluefish" is removed.
Do the same for the following:
- name="author" content=""
- name="date" content=""
- name="copyright" content=""
- name="keywords" content=""
- name="description" content=""
- http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"
and click OK when you are finished.
You see a much smaller <head> </head> section:
After saving the file with a .html file extension Bluefish uses its color coding settings:
Now you're ready to continue by adding the information and html tags you want.

Viewport 🔼

📚 w3schools: Responsive Web Design - The Viewport

What is it?

It's the user's visible area of a web page.
It varies with the device, and will be smaller on a mobile phone than on a desktop/laptop computer screen.

A Quick Fix

When tablets and mobile phones started to be used to surf the internet, fixed size web pages were too large to fit the viewport. The quick fix was browsers on those devices scaled down the entire web page to fit the screen.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, using a <meta> tag.

Include the following <meta> viewport element in all web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device - which will vary depending on the device.

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Size Content to The Viewport

Users are used to scrolling websites vertically on both desktop and mobile devices - but not horizontally!

4 Concepts to Keep in Mind 🔼

Avoid a poor user experience by not having pages scroll horizontally or zoom out to see the whole web page.
Do NOT use large fixed width elements.
An image displayed at a width wider than the viewport will cause the viewport to scroll horizontally.

Remember to adjust this content to fit within the width of the viewport.
Including the following styling in the <style></style> section solves this problem with images:
img { width: 100%; height: auto; }
Do NOT let the content rely on a particular viewport width to render well.
Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.
Use CSS media queries to apply different styling for small and large screens.
Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device.
Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.

2 Intro Web Dev: Notes

2020-Dec-5

Web Development 🔼