A Collection Of Web Languages
How do you decide what to learn to become a web designer/developer? This app provides (step-by-step) articles, tools, and resources to help you define your career.
Learn about the interesting history of Web technologies.
Understand the technology that underpins the Web platform.
The browsers and platforms that you'll need to support.
Information about domain names and web hosting.
Other educational guides to help you on your journey.
Those who fail to learn from history are doomed to repeat it. So let's begin by reading about the history of the Internet, World-Wide-Web and the technology stacks you'll encounter. It'll give you a perspective about why the modern Web is where it currently is.
The Internet is more than a series of tubes, and it's more than a collection of pages or apps. Next you'll learn about subjects like protocols, URLs, status codes, DNS, compression and headers. Essentially, the glue that holds our websites, apps and page requests together.
We can't have a guide to becoming a web designer/developer without having a section devoted to compatibility. So next you'll need to understand how a users environment can affect how a website renders for a visitor from the Operating System right down to the Web Browser.
Where should you put your content once it's production ready? In this next section you will find information about the various types of website hosting available, purchasing a domain name, and even some information about search engine ranking and optimization.
This guide covers many subjects, providing curated links to help you on your journey to becoming a web designer/developer. But it doesn't cover everything. Below are some other perspectives and guides about getting into (or the state of) the industry which you might find useful.
Apps and extensions to create the perfect work environment.
Learn to use a browsers developer tools and related extensions.
Get comfortable at the command line, grabbing packages.
Involve multiple colleagues by learning to use Git.
Next we need to get your computer work ready. You'll need basic software such as an IDE (Integrated development environment) for coding, and some other useful apps to build websites. So let's get the required software installed along with some useful extensions.
Now that you have the software you require, you next need to understand how to use your web browsers developer tools to help you debug websites as you produce them. Knowing how to use these tools accurately will help you fix issues and improve performance.
In recent years web development has moved out of the visual interface, and more into the command line. Using such an interface allows you to setup and maintain a project rapidly. Therefore you need to learn how to use the command line and tailor your interface.
Next we need to talk about version control. It's a great method of allowing multiple people to work on projects, in the open, backing up work as you commit changes. It takes a little time to understand how to implement, but you should learn how to use a Git service.
Learn to build files like .htaccess, robots.txt and event.vcf
Understand the creation of feeds, sitemaps and XML files.
The other tiny assets you can build like favicons and PDF's.
Next we need to talk about tiny assets. From .htaccess to humans.txt there are a number of plaintext files which you should include within your website. They all provide enhancements to the site and don't require much work but each have their own syntax you'll need to learn.
Carrying on from the plaintext files we now have a bunch more, except this time they are all based upon XML or RDF markup. Again these take very little effort but they all provide realistic improvements to a website, though each has their own syntax you'll need to learn.
Next we have the remaining tiny files that can improve your website. These however don't fall into a particular category as they are neither plaintext or XML based. You'll find favicons, document assets, and (now archaic) sandboxed app formats included within this category.
How to produce readable content and useful media.
Choose a flavor of markdown that suits you writing style.
Choose a markup language, and learn the basics of good syntax.
Choose a metadata format alongside how to implement it.
Choose a tool that can enhance HTML, then compile to it.
Learn about other syntax formats you may rarely encounter.
If there is one truth of the Web it's that content is king. So before we begin producing the physical website itself you need to learn how to structure content, write for international users, and both create and optimize graphics and multimedia (audio and video) for the Web.
Next, with your content in hand, you need to choose a markdown format to learn. While you don't have to write all of your content in markdown it could be helpful as a markdown editor can generate semantic HTML from the content you create, saving you conversion time.
Next you need to learn markup languages, which are likely to be both HTML and XML as they are still in common usage. Most of your effort will be on HTML to which you'll need to learn about semantics, the numerous elements, creating forms, validation, ARIA and more.
Next you need to learn about an extension of HTML that will provide your content added contextual meaning (which is useful for search engines). Microdata comes in many formats so you'll need to pick a flavor (or two as required) and implement it within your website.
Next we've an optional section which could be useful (after you learn HTML) if you want to make your coding life easier. Learning a preprocessor for HTML like Emmet lets you write shorthand code that will be converted into proper HTML once it's compiled by your IDE.
Finally in this section you can learn about some of the more technical aspects of markup languages which you may come across during your career but aren't likely to feature in your day-to-day work. These include doctype schemas and data formats like MathML and PAD.
Learn the Agile methodology to use it within your workflow.
Understand the basic principles of color and typography.
Grasp the various layout techniques available within UX design.
Know how to build both accessible and usable websites.
The fundamentals of building a maintainable design system.
Every software or web developer has a methodology as to how they deliver results during a products lifecycle. Many subscribe to the Agile philosophy in the workplace. To understand this method of delivery, it's worth reading up on the subject and using it in your workflow.
When designing a website, two of the most critically affected variables in the design process include color and typography. You need to understand both how color impacts your visitors emotional experience, and how typography can make or break your contents readability.
While there are a million different ways in which a product could be designed, certain conventions have appeared in this age of simplicity. Knowing about the benefits or pitfalls of different layouts and responsive design is critical in this new age of device variability.
It can be said with almost certainty that during the course of a lifetime, every individual on earth will have incurred disability. Whether temporory or permanent, visible or invisible, small or life-changing, each affects our online experiences and we must account for them.
Design systems are a relatively new concept involving a set of design rules, style guide, pattern library, and documentation. Creating and maintaining them takes effort but once it's oven-ready, co-workers can avoid repetition with styles and maintain house rules in design.
Infomation about the more mysterious concepts of CSS.
Choose and learn Stylesheet or Transfomation language.
Master a naming convention with maintainence techniques.
Choose a tool that can enhance CSS, then compile to it.
Check out some CSS libraries which can help you produce code.
Some consider CSS to be a complicated language, but in truth it's just misunderstood. Before we begin learning about styling a website, you need to know a few things about how the language functions in order to avoid running into oddball issues when you're coding.
Next we need to pick and learn a stylesheet or transformation language, though in truth it's likely to be CSS. Within this section you'll learn about setting styles, web fonts and colors, layouts with flexbox and grid, media queries, print styles and even handling old browsers.
Now you have a handle on CSS, you might want to consider picking a naming convention for you stylesheets. There are a bunch you can choose between but they all offer the benefit of helping you code with consistency and use techniques to help you avoid repetition.
Next we have another optional preprocessor, this time for the CSS language. Rather than providing shortcuts to the language (like HTML), CSS variants offer additional features the language may currently be missing. Usage is optional, and will compile to regular CSS.
Next we're going to examine the various code libraries offered by third parties to either get your project started quicker, plug-in useful functionality with minimal effort (component based), or provide useful class (utility) based functionality. Again, these are optional to use.
Choose and learn a client-side scripting language.
Understand how to make use of static site generators.
Choose a JS framework and check out libraries to assist you.
Choose a tool that can enhance JavaScript, then compile to it.
Learn command line tooling that will improve your workflow.
The libraries that can produce CSS within JavaScript.
First you're going to need to pick and learn a client-side scripting language, most likely JavaScript. You'll need to learn about concepts such as the DOM, Shadow DOM, AJAX, JSX, API's, Security, Tree Shaking and more. It's a pretty complex subject for you to learn.