Software DeveloperProgrammingWriting CodeDevelopment EnvironmentSource ControlDebuggingCode QualityRefactoringDesign PrinciplesDesign PatternsProgramming FundamentalsAPILanguagesDSLsRecursionComputer ScienceApplications of CSMachine LearningComputer NetworkingOperating SystemsComputer EngineeringRoboticsCS TheoryData StructuresDatabase SystemsComputational ComplexityInformation TheoryCryptographyCompressionWeb DevelopmentThe InternetTCPIPHTTPHostingCDNServerAJAXFrontendMaking WebsitesMaking Web AppsRESTSEOHTMLCSSCSS PreprocessorsCSS FrameworksCSS MethodologiesCSS ResetCMSSSGWeb DesignResponsive DesignVisual DesignUX DesignJavascriptDOMES6JQueryMVCBackendServer StackDev OpsCloud

Making Websites

What it is

Web development isn’t just about programming. To make web apps, you’ll also need to learn how to use the web as a platform. That means learning all of the languages and tools used to build websites and the internet infrastructure that makes it all work.

Learning to make sites goes beyond just learning HTML & CSS in the same way that writing a song takes more than being able to play a scale: is both deeply technical and creative. In addition to functioning at a technology level, websites need to be visually appealing and making them requires an eye for design.

Why it matters

Of the skills listed below, there’s no clear rules about which a developer must have. Unless you brand yourself specifically as a frontend developer, you can probably even get away without a deep understanding of CSS or UX design. Even frontend developers will usually insist that they aren’t web designers: that is an entirely different profession.

Still, as a web developer, you need to be able to confidently put together a simple website or you’ll never be able to build your own apps end-to-end.

How to learn it

To learn how to make websites, check out the Developer Atlas curriculum.

As an broad overview, here are the general areas of knowledge needed to make a modern website. Don’t let it intimidate you, because few developers are experts in everything listed. Just understanding the basics of HTML, CSS, and hosting will take you far.

Web technologies

First off, you must master HTML & CSS. HTML lets you define the semantics of the page, or the various structural elements that make it up, like navigation, paragraphs, headers and images. Other HTML tags allow you to include media like images, videos and the graphics used to make the Atlas.

CSS is a language that lets you define how the webpage looks, from the styles and fonts to the sizes and positioning of the different elements on the page. Writing good CSS is a bit of an art, and there are many frameworks and methodologies to make it more predictable and straightforward.

Web Design

Knowing HTML & CSS is like wielding a paintbrush. Once you get to the point where you are trying to paint original compositions, you’ve ventured into the world of web design. Web Design is about more than just aesthetics: how a webpage is designed has a huge impact on how easy and enjoyable a site is to use.

Like painting, choosing appealing fonts, colors and layouts requires an understanding of visual design. Organizing the content and structure of the site is called User Experience (UX) design, and has more to do with psychology than art. Making a good user experience is a process that requires careful thought and testing with users, and overlaps with the broader category of product design in general.

Crafting your page so that it works on a variety of devices, from a large tv down to a mobile device, is called responsive design.

Finally, good design requires attention to accessibility, or how the disabled can use your site, such as with a screen reader. Making sure your website works correctly for audiences across varying places and languages is called internationalization and localization.

Creating Content

For a content-driven website such as this one, the primary skill is writing. Tweaking your site to try to get it to show up higher in Google results is known as Search Engine Optimization, or SEO.

Writing a blog post in HTML is unwieldy, so most website creators use some form of content management system (CMS) such as Wordpress to simplify the process of converting their written content into ready-to-go website code. With a CMS, content creators can write their posts in an editor, and the CMS will convert it into the appropriate HTML, CSS and JS. CMS's also provide plugins and preconfigured themes make creating a website quicker and easier, especially for non-developers.

Many developers choose to forego full-fledged CMS’es, which require vendor lock-in, since they know how to make their own sites. Instead, they may opt for a Static Site Generator. SSG's parse content written in markdown and convert them into the full HTML, CSS and JS for a website. This gives you the convenience in writing content of a CMS with the flexibility of writing a site from scratch. Developer Atlas is built with an SSG called Gatsby.

Hosting

Once you’ve created the code for your site, you need to know how to put it onto the internet. This means learning how the internet works. Specifically, understanding how the TCP/IP protocols are used to move data between two computers on the internet, how domain name systems (DNS) are used to label websites with easy-to-remember names like “developeratlas.com” instead of an ip address, and how the HTTP protocol is used by browsers on top of TCP/IP in order to ask a web server for the files needed to render a webpage.

From there, you’ll need to understand how to purchase a domain name from a provider, and how to set up a web server to host your site. You could theoretically just set up a web server on the desktop computer under your desk with a static IP address, but it is far easier and more reliable to use a dedicated hosting provider such as bluehost or a cloud service like Amazon Web Services' S3.

Performance

In order to have a good user experience, its important that your website loads as quickly as possible. A slow site will cause users to abandon your page and will decrease your search engine rankings. Performance optimization can be broken into what you do to your code and what you can do to your servers.

Understanding how a browser renders a page from HTML, CSS, and JS can help you make your site faster. Concatenating and minifying your source code will make file sizes smaller and decrease load times. To do so, you’ll need to adopt a frontend build tool, such as grunt, gulp or webpack. You’ll also want to learn how to use the developer tools in the browser to measure your site’s speed and diagnose problems.

On the server, you can make your page faster by enabling browser caching and serving your content through a Content Delivery Network. CDNs distribute your website to datacenters all over the world so that it doesn’t have to physically travel as far to reach the end user.

Additionally, emerging technologies like service workers can allow you to decrease load times by fetching content in the background. Sites that use these technologies are called Progressive Web Apps (PWA’s) and are a bleeding edge hot topic as more and more of the world’s internet users are accessing the web through very slow mobile connections in developing nations.