novice – Leon The Progressive Coder

Four Web Resources Every Aspiring Web Developer Should Utilize..

By: Leon “2K” Asare

Web resources are extremely important to every web developer. They can range from an online YouTube tutorial to a coding repository that can save your code for you like an online bank for your code. So, just in case you lose or something happens to your computer, you will still be able to retrieve your hard coded work. Here are four of my top web resources for the aspiring web developer.

1.W3schools.com is the largest and most used website for web developers. It is not only a magnificent educational tool and online coding academy for newbie coders, but it’s also a good reference website for experienced programmers.

2.Stackoverflow.com is another website that is a good reference resource for the up-and-coming or even professional software engineers. It’s a website where you can take part in public and private Q&As to have your developer questions answered or you can answer questions of other developers who need some useful advice. One of the great features of Stackoverflow.com is the the section that allows you to browse for web development jobs.

3.https://github.com/ is a website the allows web developers to save their thousands or even hundreds of thousands of lines code in an online repository, which can be easily accessed anywhere in the world. The great thing about Github is that it allows for team member collaboration for online web projects. Team members don’t even have to be on the same continent to work on a project together. You can be on a beautiful beach in Ghana West Africa, and your teammates can be scattered throughout America, Asia and Europe; and yet the entire team can can be working on a project simultaneously.

4. YouTube is one of my favorite websites to find free online tutorials. There are literally hundreds or even thousands of hours of free coding tutorials. Most of them are taught by experienced web professionals. One of my favorite YouTube coding channels is https://youtube.com/c/TraversyMedia. It’s taught by one of the best programmers I have ever seen give tutorials (free or paid). He literally has hundreds of hours of free online tutorials on markup and programming languages like HTML, CSS, Javascript, Python, PHP, MYSQL and NodeJs and web frameworks like Reactjs, Bootstrap, AngularJs, Jquery and much more.

“The #1 Reason People Fail at Learning Web Development”

HTML AND CSS BASICS: WHY USE HTML COMMENTS <!– –> ?

Leon “2K” Asare

FIRST WHAT ARE HTML COMMENTS?

HTML <!–comments–> are little sentences or paragraphs that you put into your HTML document. The comments can be read by (you) the web developer, but are not meant to be viewed by your website visitors.

THEN WHY USE COMMENTS IF VISITORS CAN’T SEE THEM?

The usefulness of HTML comments come in the fact that they can and should be used as notes for web developers. For example, let’s assume that you have a large HTML document, with many links, sections, images and hundreds if not thousands of lines of code. It would be a very good idea to put comments in each section and area that has it’s own unique task. The reason for this is because the next time you revisit your code to upgrade it, you may need to be reminded of the reason each section of your code was invented for, also if you work in a team, your development team will find it helpful if your comments help guide then through the matrix of your code syntax.

Creating Your First HTML Document/Webpage

Note: I am a Windows user, so I will educate you on how I code as a PC user.

By: Leon “2K” Asare

To start your first html web document go to the programs section on your computer.

Or if you can’t find it, type in the name Notepad in the programs section.

The simplest and easiest way to get started is to go to your All Programs section and select Notepad.

Note: there are also free text editors that are much better and easier to use than Notepad. My favorite is Visual Studio Code, but there are many more.

Why HTML?

The building blocks of websites and apps and web development is HTML, which stands for Hypertext Markup Language. With this language alone, you can code your website and upload it to the internet. Obviously, your website won’t look very pretty with out CSS (Cascading Stylesheets) and won’t be that functional without Javascript, but with HTML alone, you can add text, images, links, create lists, etc.

Note: how to add links from W3schools.com

Adding pictures with HTML, courtesy of W3schools.com

Getting Started Coding

Note: Most Html elements, also called tags have an open < and > closing bracket.

These are meta tags, these will not be seen by a visitor to your website. They will be explained more later. Picture courtesy of W3schools.com

The tags within the <body> tags </body> will be seen by the visitor, unless they are comments <!–comment–>. comments are used to remind you of something you placed in your code.

How HTML tags are used

The meta tags within the head will not be seen by your visitors to your website. Meta tags or metadata are what tell a browser how to perceive or view your website. Here are some examples:

Every HTML document starts with the <DOCTYPE html> tag, it tells the browser this is an HTML document.

The <html lang=”en-us”> tag, tells the browser what language you are using in your document.

The <meta charset=”utf-8″> tells the browser what characters or alphabet you are using in your document.

The <meta name =”viewport” content=”width=device-width, initial-scale=1.0″> tag tells the browser to scale your website based on the size/scale of the screen.

The <meta name=”description” content=”This is an example”> tag tells your browser what the webpage/website is about.

The <meta name=”keywords” content=”your, keywords, go, here”> are where you put keys words that help your website place higher with search engines.

The <meta name=”author” content=”your name”> This tells the browser who wrote the Website.

The <title>Example</title> is were you place the name of your webpage.

The opening <body> and closing </body> tags are where you put your content that you want to be viewed by the website visitor.

The headings tags, which start at <h1> heading</h1> and ends with <h6> Heading </h6>. Heading one is the largest and most important, Heading six is the smallest and least important Heading.

The <p> tag is where you put your paragraph it ends with the </p>. Everything in between will be seen by the website visitor.

The <a href=”leontheprogressivecoder.com”>The Progressive Coder Website link</a>. The (a) anchor and href tells your browser where to go. The so-called “href” or “anchor” tag, ends with </a>. Note : the text in between the opening <a href> and closing tag </a> is where your visitors will click on to go to the site or page you want your visitors to go.

How to Save Your First HTML Document

Go to file menu and select save as. For your first page it will be index.html. Each additional page will saved according to their title and function, for example: about.html will be your about page.

Visual Studio Code is a little different, instead of using All Files, you would choose the “save as type” as HTML.

Note: If you intend to utilize more than one page for your project, you will want to create a folder for that specific project.