2 Intro Web Dev: Notes

2020-Dec-5

Home

1 Intro Web Dev Quick Start

3 Intro Web Dev: Accessibility

Install Bluefish

Make a Bluefish Template

email Feedback About This Page

Web Development
A Computer For Hand Coding Web Dev
Improve Your Web Dev Environment: Hardware
Monitor
Desktop
Laptop
RAM
Testing Web Pages
Tablet Screen Resolution Stats Worldwide
Mobile Screen Resolution Stats Worldwide
Web Browser
Browser Market Share Worldwide
Browser Market Share in Canada
Browser Market Share in USA
Internet Connection
Web Browser
Text Editor for Web Dev
Bluefish: Some Tips
My generator, author, date meta content changes when page saved
Explaining the meta Tags
Use Bluefish's Quickstart to Remove Default Meta Tags
Viewport
4 Concepts to Keep in Mind
Use Bluefish's Quickstart to Add a Meta Tag

 

Web Development 🔼

There are all kinds of ways to get into web dev:

Whatever method/tool you use, it takes time and patience to set up your computer with the proper environment for the method/tool you decide upon and learn it. There are free tutorials for all methods/tools.

Hand coding is the easiest way to get started. You already have a computer, browser and text editor.


If you want to get a job doing web dev, how long will it take to be job-ready? Very difficult to answer because it depends on several factors:

 

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

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:

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:

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.

 

Web Browser 🔼

Looking at these browser stats, use   Chrome   as your web dev environment. You can use Safari as a secondary choice.

All browsers are now   HTML5   compliant. Don't worry about anything before that unless somebody wants to pay you big bucks for the headaches involved.

There can be slight differences between a browser on a desktop monitor/laptop screen and on a tablet/smartphone screen. These are usually small and can be worked around.

Browser Market Share Worldwide 🔼

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 🔼

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 🔼

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:

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:

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.


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

  1. 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.
  2. 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.
  3. Click Edit on top menu bar.
    Click Preferences at the bottom of the popup menu.
  4. Edit preferences window opens.
  5. 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 .
  6. 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:

Metadata is not displayed to a person browsing.

Metadata is used by:

  1. <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.
  2. <meta name="author" content="eugene" >
    If use Quickstart... feature the author's name can be inserted automatically.
    Doesn't have to be there.
  3. <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.
  4. <meta name="copyright" content="Copyright Eugene Ruthven" >
    Manually entered.
    Doesn't have to be there.
  5. <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.
  6. <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.
  7. <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.
  8. <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.
  9. <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.
  10. <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.
  11. <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 🔼

  1. The default set of meta tags presented by Bluefish:
  2. On the right side are 2 buttons: Add (enabled) and Remove (disabled):
  3. When name="generator" content="Bluefish" is clicked it is highlighted and the Remove button is enabled:
  4. 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.
  5. You see a much smaller <head> </head> section:
  6. After saving the file with a .html file extension Bluefish uses its color coding settings:
  7. 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 🔼

  1. Avoid a poor user experience by not having pages scroll horizontally or zoom out to see the whole web page.
  2. 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;
    }
  3. 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.
  4. 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.

 

Use Bluefish's Quickstart to Add a Meta Tag 🔼

  1. How Quickstart looks after removing unwanted meta tags:
  2. To add a meta tag click Add:
  3. A new text entry area appears under the Head section:
  4. A common tag to add is the viewport. The following is typed followed by Enter:
         name="viewport" content="width=device-width, initial-scale=1"
    The viewport is part of responsive web design (RWD).
  5. Type the Title and click OK.
  6. Quickstart sets up the basic starting HTML tags for the web page.
  7. Saving the file with a html extension allows Bluefish to apply its color scheme.
  8. You're ready to continue to add your information.
🔼