Since the 1990s, few things have remained timeless societal staples like Friends, Pokémon, Britney Spears, and the internet.
Seriously. Lots of things have come and gone, but these guys have stuck around, rolled with the Y2K punches, and integrated themselves into our society. (Pokémon Go or a new Britney Spears Vegas residency, anyone?)
Yet nothing has said “I’m here to stay” like the internet. From dial-up and AOL everything to Chrome and IoT, the ~*interwebs*~ have completely infiltrated our lives.
Learning about web development is kind of like drinking from a fire hose. Google “coding,” and you’ve turned the hose on full blast. This guide serves as a slow drip to get you acquainted with and intrigued by the world of web development. It’s by no means a comprehensive manual.
In this guide, we’ll cover the bare-bone-basics of web development, the process of creating a website, and additional resources for those who want to learn more about development — or become a developer themselves.
Keep reading to dive into website development or use the chapter links to jump around the guide.
While web development typically refers to web markup and coding, it includes all related development tasks, such as:
- Client-side scripting (writing front-end code)
- Server-side scripting (writing back-end code)
- Server and network security configuration (setting up security for browsers and networks)
- E-commerce development (building e-commerce websites and online stores)
- Content management system development (writing and building websites)
Web Development Terms to Know
Before I dive into the web development process, let’s review a few web development terms you might see throughout this piece.
Website
Websites are files stored on servers, which are computers that host (fancy term for “store files for”) websites. These servers are connected to a giant network called the internet … or the World Wide Web (if we’re sticking with 90s terminology). We talk more about servers in the next section.
Browsers are computer programs that load the websites via your internet connection, such as Google Chrome or Internet Explorer. Your computer is also known as the client.
Internet Protocol (IP) Address
Internet Protocol is a set of standards that govern interaction on the internet.
To access a website, you need to know its IP address. An IP address is a unique string of numbers. Each device has an IP address to distinguish itself from the billions of websites and devices connected via the internet.
The IP address for HubSpot is 104.16.249.5. You can find any website’s IP address using Command Prompt on Windows or Network Utility > Traceroute on MacBooks or by visiting a site like Site 24x7..
To find your device’s IP address, you can also type “what’s my IP address” into your search browser.
While you can access a website using its IP address, most internet users prefer to use domain names or by going through search engines.
HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol connects you and your website request to the remote server that houses all website data. It’s a set of rules (a protocol) that defines how messages should be sent over the internet. It allows you to jump between site pages and websites.
When you type a website into your web browser or search for something through a search engine, HTTP provides a framework so that the client (computer) and server can speak the same language when they make requests and responses to each other over the internet. It’s essentially the translator between you and the internet — it reads your website request, reads the code sent back from the server, and translates it for you in the form of a website.
Coding Language
Coding refers to writing code for servers and applications. It’s called a “language” because it’s comprised of vocabulary and grammatical rules for communicating with computers. They also include special commands, abbreviations, and punctuation that can only be read by devices and programs.
In a sense, developers are translators, too.
All software is written by at least one coding language, but they all vary based on platform, operating system, and style. There are many different types of coding languages … all of which fall into two categories (written by two different types of developers) — front-end and back-end.
Front-End
Front-end (or client-side) is the side of web development that you see and interact with as an internet user. When website information is transferred from a server to a browser, front-end coding languages allow the website to function without having to continually “communicate” with the internet.
Front-end code allows users like you and me to interact with a website and play videos, expand or minimize images, highlight text, and more. Web developers who work on front-end coding work on client-side development.
We’ll cover some front-end coding languages in the next section.
Back-End
Back-end (or server-side) is the side that you don’t see when you use the internet. It’s the digital infrastructure, and to non-developers, it looks like a bunch of numbers, letters, and symbols.
Back-end developers work in systems like servers, operating systems, APIs, and databases and manage the code for security, content, and site structure.
There are more back-end coding languages than front-end languages. That’s because of browsers — at the front-end — only understand JavaScript, but a server — at the back-end — can be configured to understand (pretty much) any language. We’ll cover some back-end coding languages in the next section.
Content Management System (CMS)
A content management system is a web application or a series of programs used to create and manage web content. (Note: CMSs aren’t the same as site builders, like Squarespace or Wix.)
While not required to build a website, using is CMS is certainly easier. It provides the building blocks (like plugins and add-ons) and lets you create the structure with your code. CMSs are typically used for e-commerce and blogging, but they’re useful for all types of websites.
Why Learn About Web Development?
You might be a business owner hiring a freelance developer to build your website, a marketer pitching a vision to your development team, or a student learning about development as a career. Regardless of who you are or why you’re reading this guide, understanding the basics of website development can be helpful in this technology-driven world.
The internet isn’t going away anytime soon. In fact, it’s become a portal and primary method of research, connection, education, and entertainment in the world.
As of 2018, there are 4.2 billion global internet users. That’s more than half the world’s population, and these folks are using the internet for a vast variety of reasons.
What’s the one thing those reasons have in common? They require a website, and each website requires a skilled web developer.
Web development is also a rapidly expanding industry. Between now and 2026, the employment of web developers is expected to grow by 15%. That’s much faster than most other technology careers.
Whether you’re looking to hire a web developer or become one, it’s good to know the career path offers high-demand, high-value positions. Continue reading to learn more about the web development process, and don’t forget to check out the resources for developers below.
Website Development Process
The process of creating a website isn’t as easy as 1-2-3. Each development path is different based on the type of website, coding languages, and resources.
The following section serves as a brief overview of the web development process and a short introduction into the most common languages and CMS options.
Planning Your Website and Creating a Sitemap
All websites start with a plan. Developers call this plan a wireframe or sitemap (not to be confused with sitemap.XML, which is a file that helps SERPs crawl and find your site). It doesn’t have to be an official document; it’s simply a vision for your site that’ll give both you and your developer(s) direction and a place to start. You can draw it on a whiteboard or use a tool like Invision, Slickplan, or Mindnode.
Just like a business plan gives a potential investor insight into your goals and deliverables, a sitemap gives a developer an idea of what you’re picturing and the information needed to meet your vision. You can create your sitemap on your own or work with your developer(s).
Here are a few questions to ask yourself when planning your site.
- What individual pages do you want? What content will be on those pages?
- How can you organize those pages into categories? (These categories might represent your homepage menu — if it helps to think about it like that.)
- What is the hierarchy of pages on your site?
- How will the pages link together?
- What pages and categories are essential to your site and user experience, and which ones could be removed or combined?
Writing Your Website Code
The next step in the web development process is writing the code.
Developers will use different coding languages for the front-end and back-end of websites, as well as for different functionalities of the site (such as design, interactivity, etc.) These different languages work together to build and run your site.
Let’s start with the most commonly-used languages. Almost every website uses these three together, and yours probably will, too.
HTML
HyperText Markup Language (HTML) has been used since the 1990s. It’s the foundation of all websites and represents the bare minimum of what’s needed to create a website. (Yes, you can create a website with only HTML. It wouldn’t look too pretty, though.)
Languages like CSS and JavaScript enhance and modify the basic site structure built by HTML. HTML5 is the most recent version and supports cross-platform browser functionality, making it popular in mobile application development.
CSS
Cascading Style Sheets (CSS) was developed in the late 1990s. It adds design elements like typography, colors, and layouts to websites; it’s the cosmetic code.
CSS allows developers to transform your website to match the aesthetic you envisioned for your site, and like HTML5, CSS is compatible with all browsers.
JavaScript
JavaScript is the cherry-on-top of coding languages. Created in the mid-90s, JavaScript is used to add functionality to websites. Developers use it to add animations, automate tasks within certain pages, and add interactive features that enhance user experience.
JavaScript is rapidly evolving. Once considered a “toy” language, JavaScript is now the most widely used coding language in the world. With the help of Node.Js, it’s now a back-end coding language. It’s the first language to be understood by browser, and some have even discussed applying machine learning to it, too.
HTML, CSS, JavaScript are the “big three” of web development. Almost every website uses them in some capacity. There are plenty of others, such as server-side languages like Java, C++, Python, and SQL, but understanding these three is foundational to your website development knowledge.
Building the Back-End of Your Website
Writing code might be one of the more complicated parts of web development, but it’s hardly the only component. You also have to build your back-end and front-end site structures and design.
Let’s start with the back-end.
The back-end handles the data that enables the functionality on the front-end. For example, Facebook's back-end stores my photos, so that the front-end can then allow others to look at them. It’s comprised of two major components:
- Databases, which is responsible for storing, organizing, and processing data so that it’s retrievable by server requests
- Servers, which is the hardware and software that make up your computer. Servers are responsible for sending, processing, and receiving data requests. They’re the intermediary between the database and the client/browser. The browser will, in effect, tell the server "I need this information", and the server will know how to get that information from the database and send it to the client.
These components work together to build the foundation for each website.
As for building your website, back-end developers will establish three things.
- Your logic code, which is essentially a set of rules for how your website will respond to certain requests and how objects of your website will interact.
- Your database management, which is how your website will organize, manage, and retrieve its data. Read more on SQL vs. NoSQL here.
- Your infrastructure, which is how your site will be hosted. Hosting your own site will give you greater control, but it’s much more expensive and requires you to maintain your own server health and security.
With these components and decisions in place, your website will be ready for front-end development.
Note: The back-end is slightly tangential to web development because you don't always need a back-end if you're not storing any data. “Data” in this context means any user-entered information that you need to save and persist. Think about logging in to a website. If they don't have a back-end, how could they remember your login information? Or what your profile settings are? To get this information, you need a back-end.
Facebook, as an example, needs to know what people are in your Friends list, what events you have joined, what posts you have created, and more. This is all "data" that lives in a database. If they didn't have a back-end with a database, none of that data would be accessible to them.
On the other hand, a website that’s purely informational and doesn’t require the users to enter any data wouldn’t need a back-end.
So, if you have no data, you don’t necessarily have a need for back-end development. But that’s not saying you shouldn’t learn the basics. You never know when you might need it.
Building the Front-End of Your Website
If you’ve ever dabbled in web design or toyed with a website in WordPress or Squarespace, you’ve touched front-end web development.
The front-end stuff is important — it’s what your visitors, customers, and users see and how they’ll use your website.
Front-end (or client-side) development includes a combination of JavaScript, HTML, and CSS. It also controls components such as typography, navigation, positioning, and browser compatibility and responsiveness. This part will reflect more of your initial site vision and what you included in your wireframe.
As technology and consumer preferences change, client-side coding tends to become outdated … a lot faster than back-end development does. This is where coding resources (like the ones we’ve included below) come in handy.
Working with a CMS
Why would someone choose a CMS over coding “by hand” or “from scratch?” Well, a CMS — like Wordpress or HubSpot — is easier to use (you have to write less code), and it often has tools around hosting the site. On the other hand, it’s less flexible and, therefore, gives you less control over your front-end.
CMS options also often include plugins that remove the need to write a backend. For example, there are WordPress plugins for e-commerce so that, instead of building a complicated back-end to charge customers’ credit cards, you can just use an existing plugin and avoid the need to deal with databases and server-side code at all.
Popular content management systems include HubSpot, Joomla, Magento, and WordPress — which has almost 60% market share. (In this case we’re talking about open source WordPress software, not the WordPress site builder.)
Acquiring a Domain Name
At this point, your website will have an IP address. It also needs a domain name that your visitors can use to find your site.
Perhaps you’ve heard of sites like GoDaddy and Hover. These services help you purchase a domain name and register with ICANN (Internet Corporation for Assigned Names and Numbers). Most domain registrations are good for a year before you’re required to renew.
Site builders and hosting services, like WordPress and Squarespace, also allow you to purchase a domain name.
Website Development Resources
Interested in learning more about development and coding? Outside of connecting and networking with other developers, there are plenty of resources you can tap into to further your understanding or web development.
Web Development Courses and Classes
Whether you want to explore back-end, front-end, or full-stack coding, here are a few online courses and classes recommended by our own HubSpot developers.
TutorialsPoint
All content and resources on TutorialsPoint are free. Between tutorials, ebooks, and videos, TutorialsPoint provides many different ways to learn.
egghead
According to their website, “egghead is a group of working web development professionals and open source contributors that provide you with concise, information-dense video courses on the best tools in the industry.” Users can take courses, listen to podcasts, or take lessons on a wide variety of web development topics.
Khan Academy
Khan Academy is a well-known free educational resource. Users can learn anything from macroeconomics to linear algebra to US history, as well as a handful of computing topics.
freeCodeCamp
freeCodeCamp is a non-profit organization (like Khan Academy) that helps people learn to code for free. With thousands of articles, videos, and interactive lessons, as well as worldwide study groups, freeCodeCamp helps thousands of developers and engineers learn about programming and land development jobs.
Treehouse
Team Treehouse is a subscription-based online learning program. Users pay a monthly fee and gain access to hundreds of courses on over 20 different topics. From JavaScript to Python to PHP, Treehouse can teach you all you need to know about web development.
Web Development Communities
Web developers are masters of the internet, so it makes sense that they’d hang out on there.
According to Code Condo, developers join these communities for:
- Up-to-date information and problem solving
- Insightful answers, new perspectives
- Tips and tricks for all-level programmers
- Links to resources, talks and research papers
- Meeting new friends, code buddies, and potential partners
Here are a few online communities recommended by our own HubSpot developers.
Stack Overflow
Stack Overflow was introduced ten years ago and has since become one of the most popular programming communities in the world. According to co-founder Jeff Atwood, “[Stack Overflow] is by programmers, for programmers, with the ultimate intent of collectively increasing the sum total of good programming knowledge in the world.”
Stack Overflow is a great place to go with questions because most of the time, other developers have asked and answered the same ones. The forums in Stack Overflow keep you connected to other developers while also keeping you informed.
Mozilla Development Network (MDN)
Mozilla Development Network is known to be more thorough and accurate than other online resources. It’s not as much a community as a comprehensive resource and library of documents for coding languages. It’s useful when learning how certain functions work and staying up-to-date on coding and development news.
Reddit is a forum-based community where developers of all levels gather to ask and answer questions. It’s incredibly interactive and includes people from all over the world. You can also join “subreddits” based on topic, such as web design, JavaScript, or freelancing.
Over to You
The internet is here to stay. It’s getting better every day, and web developers are on the front lines of these innovations and improvements. From this blog to your favorite social network to the apps you use on your phone, web development touches almost every part of your day — and your business. Take the time to understand coding and programming to improve not only your life but the lives of your customers, too.
from Marketing https://blog.hubspot.com/marketing/website-development
No comments:
Post a Comment