Home
1 Intro Web Dev Quick Start
3 Intro Web Dev: Accessibility
Install Bluefish
Make a Bluefish Template
email Feedback About This Page
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.
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.
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.
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.
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.
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: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.
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 November 2020 |
|
---|---|
Chrome | 46.17% |
Safari | 37.83% |
Edge | 4.87% |
Firefox | 3.7% |
Samsung Internet | 2.3% |
IE | 2.19% |
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.
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.
When I make examples I'll use Bluefish as the editor.
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.
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:
📚 w3schools: Responsive Web Design - The Viewport
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.
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.
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.
Users are used to scrolling websites vertically on both desktop and mobile devices - but not 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: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.