Beginner’s Guide to Web Development
We live in an increasingly digital society
There are approximately 5.16 billion internet users worldwide
This means that more than half of the 8 billion people who live on planet earth have access to the internet, and they use it for everything from entertainment to education, from communication to commerce, from keeping up to date on current events to keeping up with the joneses in the business world. In fact, for many of us the internet is the first (and sometimes the only) channel we use when reaching out to interact with the world in all of its complexity.
Want to skip to the sections that interest you the most? Who are we to tell you how to live your life?
- Why learn web development?
- How does a website work?
- Planning your site
- Creating a sitemap
- Developer communities
- Selecting coding languages
- Front-end programming languages
- Back-end programming languages
- Content management systems
- Coding from scratch vs using a cms
- Back-end development
- Front-end development
- Acquiring a domain name
- Creating and rolling out
- Getting the skills you need
- Rolling out your site
- Tips from the experts
- Conclusion: turning your site into a powerful tool
You could say that the modern world runs on computer code.
So where are all the coders?
Despite the widespread application of computer code for web development, coders are still a relatively rare breed.
For one thing, the number of U.S. college students who pursue degrees in computer science has been hovering around 2.5% since the early 1980s.
Pretty low, given the ever increasing demand for programmers.
Why is this?
Well, it may have something to do with the money and time investments often associated with earning a computer science degree. But perhaps even more than that, many prospective programmers get scared away by the complexity of it. After all, learning code is essentially the same as learning a new language — several new languages, actually.
The reality is that you don’t have to be a C.S. major or a tech wiz to learn how to code. Becoming web developers, despite its complexity, is something that anyone can learn, as long as they have the passion and are willing to cultivate it.
Why learn web development?
Given that there will be approximately 1.4 million computing jobs available in 2020, with only 400,000 qualified developers to fill them, those interested in acquiring in-demand career skills can certainly benefit from having web development and coding on their résumé, regardless of industry.
But what is web development, exactly? It’s the work that goes into developing a website for the internet. This can include both front-end and back-end work, and can range from something as simple as a page of plain text, to something as complex as ecommerce systems, online applications, social networks, and beyond.
And the ability to perform this work, in all its forms, is becoming increasingly valuable.
According to U.S. News & World Report
Certified professional web developers earn an average salary of $64,970, nationwide.
For many professional coders, demand and salary are only part of the equation. The chance to meet and overcome new challenges on a daily basis, to conceptualize and introduce personalized artistic solutions, makes for a fresh and exciting career choice that never gets dull.
But perhaps even more than that, the simple truth is that our global society is increasingly becoming a digital society. And just as the ability to read and write words on paper was once a special skill held by a select few, in the coming years and decades, coding ability is going to see a transition from optional to essential. In short, learn programming, learn how to code, and you’ll be learning the keys to your future.
Interested in expanding your marketable skill set or even just getting a jump on the trend? Are you asking yourself, what is web development? If so, get ready to figure out how to learn web development and take your first steps into a larger (digital) world, with the Devmountain Beginner’s Guide to Coding. This guide will provide you with the foundation you need to begin your adventure in developing web development skills, and lead you from being a beginner web developer to an intermediate web developer.
How does a website work?
To understand the game of coding and web development, you first need to understand the arena in which it takes place – the website.
A website is a collection of connected web pages, each constructed from computer code, and maintained together under a unique domain name. A web page is essentially a document. The page can be viewed and/or interacted with through a standard web browser (such as Google Chrome, Firefox, Opera, Internet Explorer, Safari, etc.), accessed either from search engine results pages, links on the website home page or other connected pages, or directly through a web address.
At the same time, a website is also a series of requests and responses. HTTP (as designated in your browser address) is a stateless protocol that allows users to send specific requests and receive responses, which does not actually have to be in the form of a webpage. This request response model is what has made the proliferation of RESTful web APIs possible.
To access a website, you first need to be able to access its IP address. This address makes it possible for users to distinguish between the literal billions of connected devices that make up the internet, and also allows those devices to accurately exchange digital information between themselves.
IP stands for Internet Protocol,
and is a set of standard rules that govern digital interaction on the World Wide Web.
A website’s ip address consists of
a unique string of numbers.
For example, the IP address for the Devmountain website is 104.20.74.131. Using a simple “nslookup” command (at a terminal or command line) you can perform the same operation your computer uses when converting a web address into an actual IP address. After typing “nslookup devmountain.com” you will see a simple response detailing the domain’s IP address.
And while it is possible to navigate the web using IP-address information directly, most users prefer the simpler and safer options of using either domain names (such as https://devmountain.com/) or, even more commonly, going through search engines.
When your browser attempts to access a webpage,
the request is received by a web server, which uses Hypertext Transfer Protocol (HTTP) to connect the internet user (you) to the remote server
which houses the website information.
Upon reaching a website, users can move between the associated web pages by clicking on hyperlinks — instructions that tell the site to request data from a new address.
Essentially, when you attempt to access a website, your browser receives code from a web address and translates that code into something more accessible to the average user.
It’s a complex process for sure, but one that is entirely built on code. With that in mind, let’s consider how to conceptualize your site, so that you’ll know exactly what you want when it comes time to build it.
Planning your site
If you plan on pursuing a career in coding, you’ll need more than just a working knowledge of some web programming languages; you’ll need an idea of all of the processes that are involved in website creation, including the conceptual ones.
First and foremost, you’ll need to figure out what kind of site you’ll be building.
Start by sitting down and creating a wish list. Users expect modern sites to be more than text on a page; they expect interactive web applications that actually perform complicated tasks, which is something you’ll want to keep in mind as you get your feet wet with your first web development project.
Surf the internet. See what other sites are doing.
While looking for inspiration, make note of what you feel works well and what falls short, and then identify your goals for what you’d like to include in your site. You can worry about how to achieve these goals later.
Building a site isn’t easy, and neither is conceptualizing one. Professional web developers often have help from clients who can share their visions of what the site should be, but even then, a lot of employers tend to rely on developer insight. This back and forth between client and developer is often referred to as agile development. You’ll need to be able to figure out the functions, necessary features, overall appearance and theme, site navigation options, interface layout, and amount of content you’ll need— to name a few.
Creating a Sitemap
Building a rough sitemap (or a wire frame) of your site can help you visualize the end product.
Just list out the individual pages you know you want, and then organize those pages into categories.
Are there any aspects that serve no real purpose? Is there any content that is duplicated on multiple pages and might hurt your site’s search engine rankings?
Rough sitemaps also help you optimize your page design and ensure that all of your components are working together in the most efficient way possible. As an added bonus for developers who are collaborating together or working for clients, an effective sitemap will help keep everyone on the same page. And, because the sitemap can be as simple as a flowchart on a whiteboard, it doesn’t require any specialized skills to create.
What will link to where?
What pages/features are essential to your overall message,
and what could stand to be cut?
Developer Communities
Finally, get a feel for the current trends in site and web design.
Again, you can learn a lot from simply investigating other sites, but for a more annotated insight, check out the most current Stack Overflow Developer Surveys.
These surveys bring together professional developers’ insights into technologies, coding preferences,
work habits, user trends, and more.
Stack Overflow survey data can provide concrete information for you to use while you plan the structure of your site.
Additionally, Stack Overflow functions as a sort of forum where programmers and developers of all skill levels can come together to share tips and tricks, and crowdsource solutions to potential problems. In order to submit or answer questions, you’ll need to sign up for a free account, but non-registered users can still browse through topics and answers using a simple search function. And given that the average response time is 10 minutes, this resource may be essential in times of emergency.
With these resources in mind, let’s talk about the coding languages themselves.
Beyond Stack Overflow, various other programming and developer communities can be found on the web. Similar sites include Experts-Exchange, GitHub, Toptal, Developers Forum, and SAP Community Network (which maintains a strong focus on business coding). Likewise, Youtube offers a number of channels to help you connect with the developer community, while also providing easy-to-follow tutorials for specific coding tasks and helping you learn the web development basics.
Selecting Coding Languages
In all likelihood, you’ll never be able to learn every aspect of every programming language — there are simply too many. That’s fine.
With a working knowledge of a few popular languages, you’ll be able to create pretty much any aspect of any site you might need. However, there’s a difference between knowing every programming language, and knowing about every programming language.
Think of it like golf — you approach each hole with an entire bag full of clubs. And while you probably won’t use every club in a single round, knowing which clubs are best for which situations is still important. Similarly, you don’t need to learn every coding language, but you should learn enough about them to be able to choose the language or languages that best fit your needs.
Checking out the most recent Stack Overflow survey data on the most loved, most dreaded, and most wanted programming languages can give you an idea of which languages you might want to apply to your web development.
When it comes to the web, there are basically two sides:
the parts that a general user will be able to see and interact with,
&
the parts that make up the digital infrastructure of the site, and are not user accessible.
Front-end (or client-side) coding differs from back-end (or server-side) coding, but not significantly. In fact, as programming languages are basically just sets of rules designed to instruct computers or other devices to perform specific tasks, most languages can be used for most tasks — some just may not be as effective as others.
Front-end programming languages
At its most basic, front-end programming governs what you can see in the browser.
When a site is loaded into a browser from a server, certain client-side scripts run within the browser itself, allowing the page to function normally without needing to maintain a constant connection with the server. The front end manages all user requests and interactions in a relatively contained, local bubble.
And while early websites — generally consisting of formatted text with the occasional animated GIF thrown in for good measure — required very little in the form of advanced front-end development, today’s sites are much more complex. Front-end programming languages need to be capable of playing videos, loading data from other pages within the page, expanding and minimizing individual objects, incorporating mouse-over functions, and more. To accomplish these tasks, developers generally depend on a few front-end programming languages.
When information needs to be exchanged with the database, front-end scripts facilitate this by sending requests to the backend.
The following are the most popular choices for developers working on client-side development
HTML
Hypertext markup language
HTML5 (hypertext markup language) is the most recent version of the classic HTML code that has been in use since the early 1990s. HTML5 is compatible and supported on all major browsers and platforms, making it particularly well suited for presenting web content across a variety of devices. Its usefulness as a cross-platform coding solution has also made it very popular in mobile application development. HTML5 functions as the backbone of all front-end design, with other languages filling what could be termed ‘supplementary’ roles.
CSS
Cascading style sheets
CSS (Cascading style sheets) as a language is more focused on issues related to webpage design. CSS gives programmers the freedom to create a visual aesthetic that can be adapted to any particular device, operating systems, or screen-size. As with HTML5, CSS is compatible with all web browsers. Additionally, both HTML5 and CSS code can easily be updated using the DOM (document object model), a platform-and-language-neutral interface that programmers can access to change elements of a page directly, without having to refresh the page.
JS
JavaScript
JavaScript started out as something of a novelty — a language that allowed developers to incorporate improved interactivity within webpages. And while its function remains essentially the same, the increased focus on site usability has helped turn JavaScript into one of the most universally used front-end coding languages. Most sites use JavaScript to some degree, and it is supported plug-in free on all modern browsers. Developers use JavaScript to automate tasks within web pages, add animations, and include interactive features that allow for dynamic, reciprocal sites that can change and adapt to user input, without having to reload from the server. JavaScript is continuing to evolve at a rapid pace. As a developer, it’s an essential language to know. Some have even talked about applying machine learning into JavaScript. It will be interesting to see how JavaScript continues to evolve.
In addition to being vital to front-end development, it is also so widely used in professional backend web development that programmers who are trained in JavaScript are generally in high demand. With the help of Node.JS, JavaScript can be used for backend development as well.
AJAX
Asynchronous javascript and xml
Ajax (asynchronous JavaScript and XML) expands upon some of the functions of JavaScript, which isn’t surprising, given that Javascript is actually present within its acronym. Ajax allows specific parts of a webpage to update and change without forcing a page reload. It does this by keeping certain page elements separate from the rest of the page, and exchanging small amounts of data with server-side programs behind the scenes.
Ajax makes it possible to incorporate autocomplete, autofill into form boxes, and other server-interactive actions into a webpage, without the hassle of forcing a postback or page refresh.
Back-end Programming Languages
As a general rule of thumb, if a user can’t see it or interact with it, it’s back end.
With front-end development handling the in-browser, user-facing aspects of your web page, the rest of the processes that drive your site fall under the responsibility of back-end development. As a general rule of thumb, if a user can’t see it or interact with it, it’s back end. Back-end programming deals with issues related to (but not limited to) structure, security, and content management.
Traditionally, back-end systems consist of servers, databases, operating systems, and APIs designed to power and support the various front-end systems the user experiences. And while there are a fairly limited standard set of front-end coding languages most programmers incorporate, back-end developers have a wider selection of appropriate options.
The following are some the most popular choices for developers working on server-side development.
JavaScript
We just can’t say enough about the importance of javascript on the web. 90.5% of professional developers use javascript for front-end development, but it also leads the pack for back-end coding use. Javascript is a language that runs in the browser and is executed by the browser. Node.js has changed that vision of javascript by running it within the Chrome JS engine as a backend web server. This allows developers to code frontend and backend using the same language.
90.5% OF PROFESSIONAL DEVELOPERS USE JAVASCRIPT FOR FRONT-END DEVELOPMENT
Java
Java is object oriented, meaning that programmers can use it to build self-contained parts and objects out of classes of commands — objects that can then be combined into functioning programs.
Java is an open-source, server-side coding language that is ideal for high-traffic sites. Additionally, Java is fast, scalable, features a vast development ecosystem, requires minimal software maintenance between versions, and is readable on any platform or device, thanks to the Java Virtual Machine (JVM).
SQL
SQL (structured query language) is, as the name suggests, query based. Rather than telling a computer to perform specific actions, it focuses on retrieving data. SQL is used for generating reports and updating and retrieving data, rather than as an all-purpose server-side coding language.
C#
C# is a programming language that is very similar to Java, making it an easy option to pick up for those who are already Java savvy. C# is object oriented, which means that it allows developers to define what kinds of operations can be applied to the data structure, making it a useful addition to a well-rounded developer’s toolbox.
C# for web development includes a number of strong programming features, including automatic garbage collection, assembly versioning, indexers, multithreading, and simple Windows integration. C# users enjoy the ability to create efficient programs as part of the .Net web development framework.
Python
While many languages have a devoted developer community, the Python community is one of its most attractive features. The support offered by this community makes it an easily accessible option for new programmers, and its popularity is on the rise.
Python simplifies the coding process, offering intuitive solutions that really make it stand out from some of the more complex languages. Other advantages of Python include its versatility and the fact that it’s an extremely effective teaching tool for beginner developers.
PHP
PHP is technically a scripting language, rather than a programming language. That said, it fills such similar roles that we’re including it in this section of our guide. As a scripting language, PHP only runs in response to specific, predetermined events. PHP is incorporated into HTML code, set apart from the HTML code by special tags(<?____?>, with the specific PHP code in place of the underscore).
PHP can be used for a variety of tasks, such as collecting form data and exchanging cookies, but is particularly well suited to server-side scripting and command-line scripting. PHP is compatible with all major operating systems.
Content Management Systems
OK. Once you’ve figured out the best coding languages for your site, you might consider selecting a dependable content management system (CMS)
Before we go further, recognize that a content management system isn’t strictly necessary. CMS is most useful for blogging and e-Commerce, but a modern web application usually won’t need one. Javascript frameworks make it easy to coordinate code and markup to keep your app concise and organized, and the right backend databases in conjunction with reliable web apps generally eliminate the need for CMS.
Still, CMS options are available, and some beginning developers do enjoy the shortcuts these options provide, while still allowing them to retain direct code access and hosting over their site (which are not options when using site builders).
Essentially, CMS solutions offer a selection of plugins and addons that you can combine to create a working product. To put it even more simply, CMS gives you the building blocks, but you create the structure. The CMS options themselves are often coded in PHP, SQL, or one of the other popular coding languages, so having some experience with those languages is still an advantage.
The most respected CMS options are as follows:
WordPress
WordPressWordPress is probably the most widely adopted CMS, and for good reason. It’s quick to install, automatically updates and performs maintenance entirely through the back end (meaning that users don’t have to manually download and install any files), its user interface is intuitive and streamlined, and it includes a WYSIWYG editor and built-in multimedia support options.
Magento
MagentoExclusively built for ecommerce sites, Magento is most well known as a flexible, scalable CMS option featuring an array of built-in tools and extensions. Magento is open source, and offers a Community Edition that is completely free to use, making it a very appealing option for small and medium sized businesses. Magento is scalable, incorporates SEO-friendly extensions, and is supremely customizable.
Drupal
DrupalWhile Drupal CMS requires a certain amount of expertise to use effectively, it is also perhaps the best coding language to learn for users who wish to create highly advanced sites. Drupal is known for its ability to tag, categorize, and organize complex content, and is most effective for advanced users who want to build complex, versatile pages that incorporate complicated data.
Joomla
JoomlaNot nearly as complex as Drupal, but still a bit less beginner-oriented than WordPress, Joomla is relatively uncomplicated to setup and use, but still allows users to build moderately advanced sites. Joomla is heavily social focused, and is designed to operate as a community platform, supporting sites for e-commerce and social networking, along with more traditional options.
There’s no denying that CMS options provide a number of very real benefits
But when compared to hand coding, how do they measure up?
Coding from Scratch vs Using a CMS
Before you commit to a site-builder platform, there are a few things you should understand.
If you’ve spent any amount of time researching coding online, you may have discovered that a number of non- and low-code development platforms are available.
These platforms are called content management systems (CMS).
There are many CMS out there.
Many site-builder platforms don’t generally give you access to the original source code.
Some of the more popular CMS options include WordPress, Drupal, Wix and Weebly. As previously mentioned, the promise of these platforms is that users will be able to build working websites with little to no coding knowledge. But while this is certainly an attractive possibility, there are a few things you should understand before committing to a site-builder platform.
Site builders force you to build and maintain your pages on their platform, which creates a number of potential problems. For one thing, anything built on such a platform stays on the platform. Should you ever decide to try to migrate your site to a new location, you’ll probably have to rebuild it from scratch — many site-builder platforms don’t generally give you access to the original source code. Some of the more popular open-source website development platforms (such as WordPress) do give you access to all of the code. That said, trying to migrate sites from these platforms to other platforms to other web development platforms is still a very difficult task.
Another factor to consider is that a non- or low-code platform will most likely be using the same security measures for all of the potentially thousands of sites that it hosts, making it a tempting target for cyber criminals, possibly compromising your site in the event of hijacking or data theft.
Lastly, recognize that “free” website development often isn’t free at all. If you’re not paying a fee to use a low-code development platform, then you’ll be paying by allowing the platform to advertise on your site — because in most cases, when all is said and done, it’s not really your site at all.
However some management systems, like WordPress, are different, in that they just provide the free management software; everything else belongs to you.
Hand coding gives you the power to create what you want, on your terms, without limitations.
WordPress specifically is a powerful, reliable platform, supported by an active community. Still, if you are planning on building a site with any sort of complexity to it, you’ll end up having to rely on various third-party plugins to do so (which may or may not continue to function properly down the road).
Hand coding gives you the power to create what you want, on your terms, without limitations. You may be able to accomplish a lot with a CMS but will never be able to build an advanced, truly custom and sustainable site with it. So, with that understanding, let’s take a look at the areas of your site you’ll be developing.
Back-end Development
When coding, your back-end is where the majority of your processes will occur.
We’ve already discussed some (but certainly not all) of the available coding languages for back-end development. But let’s take a moment to go over the back-end web development definition. Back-end web development consists of all the parts that make up the server-side of your website.
The backend consists of three parts:
Database
The database is responsible for storing, organizing, and processing information so that it is easily accessible and retrievable.
Server
The server is essentially the computer (hardware and software) that powers the entire process and on which ‘lives’ the website, as well as the database itself. Servers are responsible for sending, processing, and receiving files and data requests, along with handling security and encryption tasks.
Web-server applications
Web-server applications help facilitate interaction between the front-end browser functions and back-end systems.
Together, these components combine to create a working foundation on which users can interact with websites.
In developing for the back end, programmers rely on certain core building blocks.
The first core building block is the logic code.
This is your core business logic, and generally consists of a library of code that the rest of the application can draw from in order to complete assigned tasks. Think of it as a set of rules; it details exactly how objects will interact, while also enforcing the methods by which those objects are accessed and updated.
The next core building block is data management.
Data management is directly tied to your database. Your database will likely either be type SQL (relational) or NoSQL (document based). The difference between these two database types is significant. Relational SQL databases organize data in a very structured, defined way. These kinds of databases offer a number of advantages — they are widely-used and directly compatible with a variety of platforms, they fit naturally into many software stacks, and they’re straightforward (users can add, delete, and update information with relative ease).
However, SQL can make scaling difficult. NoSQL picks up where SQL leaves off. NoSQL has no specific schema, and allows users to effectively interact with large amounts of data, usually via the cloud. NoSQL allows for greater flexibility. Instead of relying on heavily structured tables, NoSQL solutions are document-oriented. Data is stored in documents that can be located without being defined by fields (as happens with SQL). There are many database engines, such as mySQL, SQL Server, Oracle, MongoDB, Cassandra, or Firebase (to name only a few).
SQL
NOSQL
The last core building block is your hardware.
Will you host your own site or use a public cloud? Hosting your site will give you greater control, and there will be no dispute over who owns the files and documents that populate that site. On the other hand, using a public cloud is generally less expensive, and the cloud providers are responsible for all server maintenance, They may also be responsible for security (although you may be handling security yourself).
Hosting your own site
Greater Control
Public cloud hosting
Less Expensive
Less Expensive
The goal of back-end development is threefold
To maintain data integrity, to support performance and scalability, and to ensure security.
To meet these objectives, developers often rely on a number of frameworks. Frameworks are software solutions that provide tools and libraries designed to simplify the web development process. Standard web development tasks include authorizing users, communicating with databases, establishing security protocols, formatting output, and routing URLs. Frameworks aren’t necessary for server-side development, but they are highly recommended. Some of the most popular frameworks for backend developers are Phoenix, Express.js, Django, Flask and Laravel.
Framework development tasks
Authorizing Users
Communicating with Databases
Establishing Security Protocols
Formatting Output
Routing Urls
One of the more popular web servers;
NODE.JS IS A FREE, OPEN-SOURCE SERVER FRAMEWORK THAT OPERATES ON THE JAVASCRIPT PROGRAMMING LANGUAGE, AND IS COMPATIBLE WITH ALL MAJOR PLATFORMS
REST is the most popular API platform.
Node enables your system to handle multiple requests at once, without waiting for tasks to be completed and returned. This makes it possible for Node to perform a variety of functions, including collecting form data, modifying database information, managing files on the server, and generating dynamic content on your page. Node.js is just one of many choices you can make for web server software such as Apache, IIS and Nginx.
Essentially, back-end development revolves around an API, with the front end making API calls, and those calls executing the back end code. This gives you a layer of abstraction between your web app and back-end code. You can change the way the back end operates without having to update the frontend code. The only dependency the front end has on the backend is the endpoint that it hits to execute the code. REST APIs usually also send and receive data using JSON (Javascript Object Notation).
REST is the most popular API platform. REST is built on the idea that you have a set of endpoints (or web addresses) that allow you to create, read, update and delete data. It uses standard HTTP methods like POST, GET, PUT, and DELETE, respectively. The most popular framework for documenting and consuming APIs is Swagger.
Front-end Development
Front-end (or client-side) development is slightly less complex than back end, but certainly no less important.
The front end is where your site’s users will operate,
The front end is where your site’s users will operate, and if your pages don’t function the way they’re supposed to, then those users have an entire internet’s worth of other possibilities they’ll likely be bouncing away to.
If you’re going for the widest possible audience for your site (and there’s really no reason why you shouldn’t be), then you’ll want to develop your pages to be accessible across all platforms, devices, and browsers. Using a combination of the code mentioned earlier in the ‘front-end programming languages’ section will allow you to reach users regardless of how or where they access your site.
Positioning
Typography
Browser Compatibility
Front-end solutions
As with back-end development, there are client-side frameworks available that will help you deploy your site effectively. Front-end frameworks generally consist of a collection of standardized code (such as CSS and JavaScript), designed to provide easy solutions to issues such as element positioning within the page, typography, browser compatibility, and advanced interface components. Useful client-side frameworks include JQuery, Angular, React, and Vue.js. Familiarize yourself with the advantages that each framework offers, and connect with programming communities for personal insight into which would be most useful for your development projects.
An important thing to remember when it comes to client-side programming is that technologies change. A fresh, cutting-edge site can become out-dated very quickly. Taking advantage of internet resources (courses, blogs, and communities) and always keeping an eye on what other sites are doing will go a long way towards helping your pages stay relevant. Set goals for yourself to help you keep up with what’s happening in development. These don’t have to be anything groundbreaking or overly time consuming; you might be surprised how much you gain from reading a new programming book once a month, or simply checking out tech blogs, forums, and Youtube videos from industry leaders on a daily basis.
Acquiring a Domain Name
For your site to be reachable and recognizable on the web, it’s going to need a domain name.
Any individual can register for a domain name, all it takes is a small fee to register with ICANN (Internet Corporation for Assigned Names and Numbers). There are many services that will help you with this such as GoDaddy, Network Solutions or Hover. Once finished, you will own the right to that name for one year, with yearly renewals needed to retain the domain for longer than that.
Internet corporation for assigned names and numbers
To register for a domain name,
Simply brainstorm several possible domain names that would be suitable for your business.
Extension options
.COM
Commercial business related
.NET
Implies networking sites
.ORG
Nonprofit organizations
These names need to be unique from other domain names currently in use across the internet, but they should also be as straightforward as possible. Remember that there are a number of possible extensions that are available, such as .com, .net, and .org. This means that even if your domain name is not available with one extension, it may still be available with a different extension. And while each extension is generally associated with a specific kind of organization (.com usually refers to commercial businesses, .net implies networking sites, and .org is for nonprofit organizations), the reality is that there aren’t any legal limitations over who can use which of these extensions. Other extension options include .biz, .info, .tv, and .US.
With your list of potential names, you’ll either need to choose a hosting service or decide to host on your own server
(check with your internet service provider to make sure that they allow web hosting, as some do not, and will actually block all traffic to your site).
For those using a hosting service,
the next steps are to check the availability of your domain name until you find one that isn’t already in use, fill out several in-depth forms, and finally pay for the domain name using either a credit card or an online payment system (such as Paypal).
If you are self hosting the process is a bit longer.
Your next steps are to assign a server on which your site will live, acquire a static IP address so that visitors can reach your site, invest in server-control software, reconfigure your firewall and router for website hosting,
and finally route domain traffic to your server.
Creating and rolling out
Once you’ve got your domain and hosting figured out, all that really remains is for you to write your page.
You’ll need other software solutions, as well.
Editor software
If you’re a beginner — which we assume you are if you’re reading this beginner’s guide — then you might find that the various frameworks already mentioned are invaluable to producing your first site. Additionally, tools such as Markdown, Bootstrap, and FlexBot can simplify a number of otherwise difficult coding and design processes.
You’ll need other software solutions, as well. The good news is that most operating systems have built-in editor software, such as Notepad for Windows, TextEdit for Mac OS, and Vi, GEdit, Kate, and LeafPad for Linux. More good news is that for the software you don’t already have access to, most of it can be downloaded from the internet free of charge. Some of the most loved text editors include Sublime Text, Textmate, Atom and Visual Studio Code. These editors are extensible and offer robust tooling. You’ll need file transfer software to upload your files onto the web, and you’ll obviously also need a standard web browser (such as Chrome, Firefox, Safari, or Internet Explorer) to view your in-progress and completed pages.
In programming, you should always keep the user experience as your primary focus.
Browser compatibility
Be aware that some browsers only run on certain operating systems (you’re not going to be able to get Safari working on your PC), so you may also want to use online services such as Browsershots.org, which can send you a snapshot of what your site will look like on different browsers. It may not be as effective as actually accessing your site on those browsers, but it’s better than nothing when you don’t want to have to invest in multiple operating systems.
In programming, you should always keep the user experience as your primary focus. Creating easy-to-follow navigation and user interface, maintaining a consistent style, and including easy to follow content (in the form of shorter sentences, smaller sections, and clearly defined hierarchy) will always be more important than showing off. Sure, there will be situations in the future where pushing the envelope will be appropriate, but for now, concentrate on learning and mastering the rules. Once you’ve done that, then you can start breaking them.
Getting the skills you need
OK. So now that you know the web-development basics, you’ll need the actual skills to realize your vision, and that means learning the code itself, among other things.
Computer science degree
PRO
Modern theories and practices
CNS
Expensive
Massive online open course (mooc)
PRO
Generally free
CNS
No certification
Online self teaching
PRO
Availability of information
CNS
No certification
Coding school
PRO
Hands-on learning
CNS
Accelerated
There are certain advantages to acquiring a computer science degree. An effective computer science program will give you the tools and instruction you need to develop a clear understanding of the theory and processes behind modern web development, along with a lot of related, non-coding material. However, these programs tend to be less effective in providing real-world experience. Also worth noting is that it may take several years and a large amount of tuition money to earn your degree.
Another option is to take part in a massive online open course (MOOC). MOOCs are generally free, and offer a classroom experience — complete with lectures, homework, and tests — without the need to set foot on campus. The downside is that a MOOC isn’t going to earn you a degree, or even a course credit, so it’s not much of an addition to a résumé. Also, don’t expect any one-on-one instruction with your professors.
Similarly, with the right dedication and resources, it is entirely possible to learn programming online, entirely on your own. The information is out there, and there is no shortage of available experts who can walk you through the processes. Of course, this creates some of the same problems as relying on MOOCs; you won’t be earning any sort of certification. Likewise, self teaching takes a lot of time, and if you’re not careful, you might end up studying from outdated or even inaccurate sources.
For a fast, in-depth, up-to-date coding education,
coding schools (also called coding bootcamps) may be your best choice.
Coding school generally consists of short, intensive courses that provide students with an in-depth foundation in programming, with a career in code as the end goal. The courses cover the front- and back-end programming languages previously discussed, as well as other languages modern programmers will need to be familiar with. Focused on hands-on learning and real-world coding experience, coding schools offer a number of advantages over other code-education options.
Coding school is usually highly accelerated when compared to other options. Short, intensive courses mean a faster path to career coding, and less time and money spent in classes. Additionally, coding school can function as an effective motivator, encouraging students to push the boundaries of their comfort zones. Finally, coding school provides a built-in support group, in the form of instructors and other students. Participants can come together to crowd-source solutions and offer suggestions. Coding school is the quickest, most effective way to prepare yourself for a career in code, and will give you the kind of in-depth understanding that just isn’t possible in an online guide.
Rolling out your site
Once your site is up and running, that doesn’t necessarily mean you’re finished.
The key to an effective website
is continuous deployment
and the key to continuous deployment
is version control and containers.
Containers contain every bit of code your site needs to deploy and run your application. In essence, the container is a self-contained version of your entire site, so that it doesn’t matter what the host (server) has installed or running, because the container will run completely separately and independently of the rest of the system. Properly utilized containers result in near-instantaneous horizontal scaling, help ensure that development and production are always in sync, and can be deployed without having to worry about site downtime.
You’ll also need to be capable of maintaining your site for as long as you expect it to function. Schedule regular appointments to review your site, checking everything from the overall look and feel of the site, to the components themselves. Also, check to see if any information on your site (such as contact information) needs to be updated. Next, check to ensure that all of your security features are up to date. Finally, review coding standards, and implement any new versions of programming languages you might be using.
If you expect your site to last, the best advice you can have is to build your site with maintenance in mind,
and document everything.
This will make updating and maintaining your pages much simpler, and will help you know when it’s time to revamp.
Tips from the experts
When coding, there are a number of considerations to keep in mind.
Here are some basic tips
From experts to help ensure that your coding journey starts out on the right foot
DOCUMENT
Document what every function is, what it is for, why you are including it, and any other specifics that come to mind. You may think that devoting hundreds of hours to your site will result in a sort of omniscience regarding your code, but the truth is you will forget.
VERSION CONTROL
Implement version control, as it will help you keep track of changes to your site over time. This will give you the opportunity to reload previous versions of your pages, in the event that you make a change to your site that completely screws everything up.
BACKUPS
Always keep backups. Of what, you ask? Let’s just put it this way: if it’s something that can be backed up, then back it up. It doesn’t take much to unravel an intricate coding solution; backups give you a safety net should something go wrong.
GUIDES
Follow the guides. There are a number of tutorials available online to help you get the most out of your frameworks and other tools. Use them.
MINIFICATION
Use minification where possible to help ensure that your payload size (particularly for images, js files, and other references) is as small as possible.
DATA
Make sure that your site isn’t exposing any more data than is necessary from server-side services. If the user shouldn’t see it, then you need to make sure that the client isn’t loading it.
Conclusion: Turning Your Site into a Powerful Tool
Half of the world’s population is on the internet. You should be too.
The world is communicating, and by building the right site,
you can be an important part of the conversation.
