Learning Web Design
I’ve taken an interest in learning the basics of web design so that I can publish some of my musings in a blog. I’ve dabbled with this a little in the past, but never got very far. As I began this adventure anew, I found that there is a lot of information to assimilate just to get started. So, I’m trying to capture some things as I go along. Hopefully, this will be helpful not only for me but for others who may be starting on this journey.
So, where to begin? There are programs, templates, and websites which say that blogs and websites can be built without any knowledge of coding. This may be true, but it seems that it would be a good idea to develop at least a rudimentary knowledge of what goes on behind the curtain. Of course, there are many university and community college programs and degrees in web design and web development. But these are costly, time consuming and beyond the scope of what I want to do at this point. Besides there are a lot of free (or semi-free) sources for learning these skills.
There are many books and websites available for learning the basics of web design. There are web based courses that are free or that offer free trials. These are a fantastic way to get a start in the field without a cash investment. Some links to websites that list these free sources are shown below:
- 18 Free Web Design Courses to Learn Web Design
- 12 Best Free Web Design Courses For Beginner
- 11 Best Online Web Design Courses: Learn How To Create Websites
In addition, there are free graphic design courses that may be helpful:
- 14 Extremely Helpful (And Free!) Online Graphic Design Courses
- 10 Best-Free-Graphic-Design-Courses-Online
And there are beginning web development courses that provide the essential training needed to get a site up and running:
Recommendation for starters:
I have found a couple of sources that provide good basic information for a beginner like me. One is the Introduction to Web Development from Coursera If you want to take Coursera courses for free, the best way is to “audit” them. You won’t get a certificate, but you can learn from the classes. Not all of their courses are available for free auditing, but this website provides information on how to sign up to access the free courses A Guide on How to Sign up for Coursera Courses for Free
The best source that I have found so far is W3Schools This site gives many great examples and shows exactly how to do things. The information is free and there is no sign up. It is a fantastic resource. I hope it stays free and available.
Choosing an Editor
In order to create and manage a website, a text editor is needed. Both windows and Macs have free simple editors: Notepad and Textedit, respectively. These can be used, but there are free or low cost editors that have more features and make things simpler. Some of these are listed at 16 Best Free HTML Editors in 2019. I have a Mac so the list of editors for the Mac is somewhat shorter 10 Best Text Editors for Mac. I have tried Notepad (on a PC), Sublime, Brackets and Eclipse (Mac). Eclipse seems more difficult to use, but I like both Brackets and Sublime. Brackets has a nice feature that makes is very simple to view drafts of the work in a browser. Also, it is free. Sublime can be tested, but there is a (fair) cost if one wants to keep using the full featured version. For now, Brackets suits my purposes fine. On the other end, there are more expensive programs like Dreamweaver. I’m sure that these are great and have many nice features, but the simpler editors are recommended for beginners. In the next section, I’ll explain how I used the few simple things that I have learned so far.
Basic html template
The first step was to learn some basic HTML (hyper-text markup language). HTML is a series of elements or “tags” that tell the browser how to display a web page. The tags identify the type of content (heading, table, image, etc.). The browser doesn’t display the tags themselves; the tags inform the browser about what to display on the page.
Below is an example of the most basic html code needed for a page. It begins by identifying the document type as html (<!Doctype html >). The document begins and ends with “html” and the body portion of the text is between the “body” tags. (Note: if I put actual tags in this text with the brackets as shown in the example, the browser would think that they are tags rather than text and wouldn’t display them. So, “html entities” are used. That is, special characters are used instead of < or >, and other entities are used for other codes. The use of “entities” are explained here with many other examples. When the entities are used the content that the browser actually shows is illustrated below.) After html and body tags, the next tag is h1 which is a heading tag. The heading tags work rather like headings in a word processor. “h1” is the first level heading (larger font), h2, h3, etc. are subheadings in smaller font. The next tag is p for paragraph. Without the p tag, the text would all run together in one long paragraph.
The browser should display the above text (with “entities”) as shown below.
Under the “Learning Resources” paragraph there are lists of links to websites. These were made using the html list tag (as shown below) and hyperlinks, which will be described in the next section.
<body><h2>Unordered List with Square Bullets</h2>
The browser displays the code on the left as shown below.
Unordered List with Square Bullets
- Item 1
- Item 2
- Item 3
Okay, the bullets look like circles to me too (which is another option), but they are supposed to be squares.
Attributes and links
HTML tags can have attributes, which provide additional information about the element. The begin with a start tag <a and usually come in pairs like name=”value”. For example “<a href=”https://www.w3schools.com”>This is a link</a>” This provides a link to the w3schools website but browser will only display the text highlighted in blue which may be clicked (as shown on the right). Links may be to other websites or to images or text that is local. Also, buttons may be links and links may be designed to open in a new browser window, etc.
These are just a few examples of html tags and how they are used. Obviously, there are many, many more html tags and the w3schools.com web site is an excellent source of information about these. The next post will provide a very short discussion of CSS (custom style sheets). This is used to indicate the page style such as colors, fonts, etc.