Computer programming is a vast and complex field. For those interested in learning programming and web development, establishing a path to learn all the relevant information can seem stupendously daunting.
You will not only need specific equipment such as the best monitor to program that you can afford, as well as mice, keyboards and ergonomic chairs to take care of your health, but at the same time you will need to focus on a particular area or programming language, since there is much more information than you can master if you want to cover everything.
Newcomers proclaim many times, "I don't even know where to start!"
This guide is intended to provide direction and help you discover the correct paths to learning web development.
The Circle of Knowledge
Before we begin, let's briefly discuss what I like to call the Knowledge Circle (both known as the generalized way I like to think about acquiring knowledge). Consider the following image:
For the purpose of this post, let's say you are interested in learning how to build your first website, in the Circle of Knowledge, the outer edge broadly defines the theme of the Development Web. Inner circles define your level of familiarity with the more specific subtopics of the general topic. These inner circles divide your understanding of the larger topic into three sections: topics you know (or think you know), topics you have heard, and topics you don't even know there are.
Initially, the innermost circle is probably quite small, since you are starting to dig into what you need to learn to know web development. Maybe you know how to turn on a computer; understand that something called browser enables you to access the Internet (which you know some people call at the same time the Web); You can search for topics of interest and go through the search results to determine which one accurately represents the answers to your questions.
It may not sound like much, but this is a great starting point. You already have something in common with the vast majority of computer programmers in the world: if we don't know something, we look for it.
Your first search
Suppose you search for the phrase "how to build a website" and find the following results:
You just populated the middle segment of your Knowledge Circle. Even though you may not understand what they mean, terms like domain, accommodation, Wix and eCommerce is it so now on your radar. Then click on the link How To Build A Website: Beginner's Point-to-Point Guide (2018) and they are welcomed with an additional compilation of terms: WordPress, content management system, HTML, CSS, Drupal, etc.
Before each click, all of these terms were occupying your outermost circle (topics you didn't even know existed), but through the research procedure, one by one you are now moving them to the middle circle - topics you've heard about. This is excellent progress!
The process of learning anything - web development, baking, running for Congress - can be broken down into these steps. Starting with a single search, you will learn a new set of terms, notification patterns (domain and accommodation appeared multiple times in our initial quest), and you will begin to put the puzzle together. The goal of your Circle of Knowledge is grow the inner circle - the things you know - as much as possible. To do this, first you have to expand the middle segment by discovering new concepts and then selecting those on which to focus your efforts.
"That's great, but where am I going to go from here?"
I'll give you a head start: The 100% of all websites are made up of HyperText Markup Language, most easily recognized by its initialism: HTML. This language establishes the structure of the content of a website and indicates to your browser the differences between titles, sections, paragraphs, images, bulleted lists, numbered lists, etc. Well structured HTML is readable by both browsers and devices that help visually impaired web users. It is the basis of the Internet. At the same time, it is the most important language that you can learn to write well early in your web development career.
Of course, websites are driven by more than well-structured content. Some are beautifully designed. Some have extremely dynamic interactions, and others function as native computer applications. Sometimes you find a site that does it all.
As you learn about HTML, you may find yourself asking some new questions:
- How can I make this look better?
- "Do I just need to create this navigation menu in each file?"
- "Can I save the information that I enter in a form?"
- "Is my profit margin achievable?"
Once again, search is your friend; And by leveraging your research skills, you will learn new information. You might find out that CSS is responsible for the appearance of a website. Languages like PHP allow you to create reusable templates to divide different pieces of content such as navigation. Database languages like MySQL allow you to save form data. At the same time, writing semantic marks goes a long way towards making your content achievable.
The fork in the road
You will begin to see new learning paths as you continue to acquire more knowledge; And where there are roads, there are options. Whether you care more about how a website looks and how users interact with it, or how a website saves and makes your data available, it will inform your decision to seek specific knowledge in those areas. We define the appearance of a website and the collection of user interfaces as its frontend, and its data structures and application logic as its backend.
My friend and colleague, Justin Foell, previously published a post asking whether he should learn JavaScript or PHP first. An alternative question might be: "Should I start by learning how to build user interfaces or systems?" That is the main difference between frontend and backend development.
FRONT DEVELOPMENT
The interface of a website comprises the publicly visible content that regular visitors will see. As you have learned, HTML provides the structure for that content, but the responsibility for the visual appearance of that content belongs to Cascading Style Sheets (CSS). At the same time, some behaviors of your site that respond User input, such as activating a slide show or using keyboard commands to activate various settings, is written in a language called JavaScript. Developing a command of HTML, CSS, and JavaScript is important to becoming a frontend web engineer.
Frontend development: templates, presentation styles, animations, user interaction management.
Campaign resources
One of my favorite book series for an introduction to frontend development is Web Design with HTML, CSS, JavaScript, and jQuery Set, written by Jon Duckett. These books are a wonderful introduction to each of the three main languages of the interface, and they are beautiful at the same time.
For CSS development, CSS Tricks has a great beginner's guide to learning HTML and CSS. Once you have exhausted your collection of those posts, they lay down loads more on the more general frontend development.
A Book Apart typically publishes books on a range of topics from renowned experts in the field. You may be interested in their Front-end Fundamentals series. Soon after, check out both the onResponsive Design series and Front-end Next Steps.
Smashing Magazine is another great general resource for front end development. Smashing publishes tons of posts, tutorials, and books for free, while also offering memberships that provide deep discounts on that content. At the same time they organize several live events throughout the year.
DEVELOPMENT BACKEND
The backend (sometimes called the "server-side") of a site typically consists of:
- a mechanism to save data persistently
- a collection of files that a web server understands
The data can be stored in files, but you are more likely to use a database instead. The open source content management system WordPress uses a combination of MySQL (database language) and PHP (also known as Pre-HyperText PHP, a server-side language) to dynamically generate HTML content.
Backend: databases, server-side languages, application logic, application programming interfaces.
If you are interested in learning how to make a dynamic website, then we suggest that you consider learning PHP immediately after learning HTML.
PHP started out as a template language. As such, you can create HTML templates that use PHP to attract your dynamic data. This makes it wonderfully versatile for building your site's structure, since you can separate reusable content like navigation menus into separate files. This way, if that part of your site changes, it can be easily updated wherever that part is used.
Of course, the true power of PHP is in application development. Because it is a backend language, most of your PHP code will not produce templates. Instead, it will be used to connect to data sources such as a database or an application programming interface to retrieve, manipulate, and update that data. Once you learn how to use PHP for templates, introducing a database into the mix and learning how to write queries is the next logical path.
Campaign resources
There are, in my opinion, two definitive resources for learning PHP. First of all, PHP has a glorious online manual that will be your go-to resource whenever you have questions. Second, PHP The Right Way is an online book that covers everything from templates to servers to implementation, so you can focus on an area of the language that is appropriate for your skill level.
Of course, looking for other resources while researching this post, I just learned that Jon Duckett is publishing a new book on server-side development with PHP and MySQL. I don't own this, but knowing how good the frontend series books are, I'm pre-ordering today!
In my opinion, good ones MySQL resources online are a bit more difficult to obtain, but sites like Lynda.com and Laracasts have some solid how-to videos, if you're willing to pay for a subscription.
Are you still with me?
Well! That fork in the road is essential, because your initial question, “How do I build a website? Some will be satisfying, and others will find that it is best not to explore them. We leave them there for you to discover.
Previously, I suggested that computer programming contains many more subtopics than anyone could hope to learn. As part of choosing your own path, you must continually ask yourself if the information you are learning is necessary to help you achieve your personal goals. Only you can know for sure.
Continuing down the road
Once you spend enough time learning the basics of front end or backend development, you will no longer be able to say that you have heard from their languages. Instead, you can confidently say that you are proficient with them. Congratulations! You have successfully moved one or more topics to the innermost section of your Knowledge Circle: «Topics you know»
However, learning does not stop because you are competent. Throughout the frontend development learning course, you may discover other topics: CSS preprocessors like Sass or LESS, template engines like Twig or Blade, or JavaScript frameworks like React, Vue or Angular. Or, as you learn backend development, you will hear about dependency management using Composer, unit testing with PHPUnit, or development practices like SOLID. Either way, you can find websites that discuss version control, content management applications, responsive design, intrinsic web design, or a concept called "test-driven development."
summarizing
Regardless of your path, bringing knowledge to your inner circle leads to new information, questions, and ways of thinking about a topic. At that point, it is up to you to examine your own competence, level of interests, and the following areas of interest. There are no right or wrong paths. Luckily, there are some people who have made suggested routes public.
An example of this is Kamran Ahmed's "Developer Roadmap - 2018", posted on GitHub. Kamran offers recommended paths for both front-end and back-end development. Their paths are rich in information, but they can seem overwhelming, if it's the first thing you look at. We suggest that you start with the basics outlined above and revisit Kamran's posts once you feel ready to learn more. At the same time, take note of any new terms or information that emerge throughout the learning procedure. How often you see those terms will inform you of what to do next.
Be sure to check in with yourself normally and examine whether or not you are learning about subjects that you like. If so, great! You have discovered topics rich in new information that are right within your areas of interest. If not, it's okay, at the same time. There are some aspects of the field that are less exciting but are still important to know for long-term success. Sometimes a topic is basically not for you. Depending on how far you are on your way, you may find that the road itself it is not correct. Assessing your interest in the information you are learning is very important in guiding your path.
