Web Design Resources for Beginners

June 15, 2020 | Angjelin

Comments (0)

Have you been curious about web design, and would you like to know if it's something you'd be good at or enjoy doing? A recent blog showcased our eLearning resources on programming. Besides those, there are many free and open-source tools in the web that will enhance your path forward. Web development divides into two domains: front-end and back-end. Below is a list of popular and authoritative open-source tools that will aid you on your path to both. This list is not exhaustive, but it's a good way to get started.

To access the resources below from Lynda.com or access the ebooks, you will be asked to sign in with your library card.

 

Front-End Design 

Front-End Design Orange Painted Blue
Image by davisco from unsplash.com.

 

Front-end web developers create the graphical interface that we interact with when surfing the web. This includes the way the we organize data in a visual and structural manner. It also includes functions like clicking, buttons, logins and other interactive elements. The basic tools of the front-end developer are:

  • HTML, a markup language that structures information on a page
  • CSS, a language that styles that information with colours, positions, and dimension
  • Javascript, a programming language that makes possible the interactivity of the webpage

 

Below are some free and open-source resources to get started with front-end development.

 

W3Schools Online Web Tutorials    

Not to be confused with W3C (The Worldwide Web Consortium), which acts as the international organization for web standards, W3Schools is a completely free reference resource for web development. It includes tutorials on HTML, CSS, JavaScript, Python, PHP, SQL and many others. Run by the Norwegian software company Refsnes Data since 1998, the website has evolved into a great tool for beginners who need to both get started on these languages. It also serves as a rich supplementary resource for self-directed learning or taking more formal courses. 

 

Edx W3C Front-End Developer Path

Edx is the only nonprofit left in the massive online open courses movement. While certificates cost money, course content and materials are free to access. W3C, or the Worldwide Web Consortium, is the international body of many member organizations that develops web standards. Part of the education arm of W3C, this series of 5 courses hosted on Edx provide foundational instruction for the front-end developer to the complete beginner. Because course content is free but you have the option to purchase a certificate, it is great for those with professional aspirations as well as those who want to dabble

 

Codepen

Codepen is a popular online code editor and open-source community that allows users to write code in HTML, CSS, JavaScript, curate the work of others, modify it, and share it for free. Codepen is a great resource for beginners because it is easy to use, gives you access to a rich community of code snippets or "pens", and allows you to practice your skills firsthand. Codepen experiences occasional downtimes and glitches, but in general is a good beginner tool

 

JsBin

Like Codepen, JsBin is a free online code editor that serves especially well for debugging JavaScript code. JsBin contains all the major JavaScript libraries, gives you errors and warnings in real time, and allows you to register and save your work by creating an account through Github. It's especially suited for beginners who are getting acquainted with Javascript. While Codepen allows you to get inspired from other people's creations, JsBin is a great tool for writing sound JavaScript (as well as HTML & CSS) code.

Read a comparison of the advantages and disadvantages of code playgrounds such as JsBin and Codepen.

 

Github

Github is a company for hosting code repositories and provides free accounts with a great deal of open-source projects. This means that a great deal of the content is accessible for free to users to learn from and change. Github also allows users to host for free a multi-file website. This is something that a professional or amateur front-end designer may at some point want to do. You can write the documents or files on desktop code editor outlined below.

Beginning Git and Github

Sublime Text

In order to write your own code, it is important to have the right code editing software. Even though online editors allow you to save your work and so act as some sort of substitute, they do not outgrow the usefulness of a desktop editor. For larger, more involved projects, you'll want to write separate html, css, and javascript files which you'll then upload on the web. Sublime Text is one of several desktop editors such as VSCode, Atom, and Notepad++ available for free. I'm choosing to highlight it here because of its ease of use. As your knowledge and skill increases, you may wind up choosing a code editor based on the features that work best for you.

 

Khan Academy Computer Programming Basics

Khan academy is a popular, free online video tutorial website on a wide variety of topics. Even though its content on computer science is basic, it is very useful for beginners. Computer science tutorials on Khan academy give complete beginners the background they need to tackle the subject more formally. Tutorials on things such as how to host a website on Github, how to pick web and online editors, and where to find further instructional material are very useful.

 

Back-End Design

Back-End Design Image of Code
Image by Markus Spiske from unsplash.com.

 

Back-end development is also known as server-side development. It refers to the organization, management, and manipulation of the data stored on the physical server. This involves a database and an application layer that allows efficient communication between the server, database and the browser. Back-end developers use many languages including Java, PHP, ASP.net, Python, Ruby, Perl etc. to build applications as well as many database programs like MySQL and Mongo DB.

Below is a list of tools for back-end development with links for free learning resources.

 

Learn PHP on Codecademy

PHP is a well used open-source scripting language executed on the server, which is free to download and use. Even though some of its popularity has declined, it's still popular for developing web applications. Social networking platforms like Facebook and blogging platforms like Wordpress use PHP. PHP is suited for back-end beginners because it is more forgiving of errors and easy to set up. Lynda.com and codecademy have great beginner courses on PHP. Also, there are many free resources on the web such as w3Schools.

 

Learn Java on Codecademy

Java is one of the world's most popular programming languages. Its back-end uses include database connectivity, networking, image processing and web development. Java is not a beginner language but learning it has many benefits for those with some coding background because of its flexibility. Lynda.com and Codecademy have courses for complete beginners. Also, Edx offers an array of courses for different learning levels.

Java A Beginner's Guide

 

Edx: Absolute Beginner Python

Python is promoted as the fastest-growing programming language. It is a good language for beginners because it is readable due to being high level like JavaScript. This means it has a lot of features already built-in. Developers use Python in back-end development for platforms such as Django, quick automation, etc. It also has a wide application in data science and deep learning, so there are many advantages to learning Python.

 

Learn Node.Js

Even though JavaScript is known as the language of front-end web development, it also has server-side applications. Node.Js is the most popular server-side JavaScript framework. Developers use Node.Js for data-streaming, data intensive real-time, and API (application program interface) based applications. You should learn JavaScript before you delve into Node.Js.

 

MySQL and MongoDB

Databases are a major component of backend development. MySQL and MongoDB are two different and popular database management systems, and each is free and open-source. Here's an article that compares popular databases. Learn mySQL mySQL and MongoDB MongoDB.

MySQL 8 Cookbook

MongoDB Recipes

XAMPP and MAMP

XAMPP and MAMP are free and open-source software that allow you to run and test websites off your desktop computer before uploading them to a remote web server. XAMPP is used on Windows and MAMP on MacOS. These programs are useful for testing the website you've built on a virtual server before publishing it on the web.

 

Apache Server

Apache HTTP Server is an open-source web server that is free to download. It is compatible with all major operating systems. One of the uses of Apache is for virtual hosting. This is a way for you to host several websites with different domain names (your web address) in a single server. For example you can host both www.myfirstwebpage.com and www.mybusinesspage.com. Both XAMPP and MAMP applications make use of the Apache Server.

 

Stackoverflow

Stackoverflow is an online computer programming Q&A based community. All user generated content is licensed under a Creative Commons licence. This means that the cycle of content generation remains within the commons in order to promote universal access. Stackoverflow is a great place to pose questions when you stumble on a problem as well as a great opportunity to help others

Comments