Creating a Website (From Design to Code)
Designers will typically use a design app such as Sketch, Adobe XD, or Photoshop to design the look and feel of a website. They will design how the site will work and look, as well as creating the graphics that will be used in the website. Then the design needs to be turned into code so it can work in a web browser. This is done using HTML, CSS, etc.
Coding the Website
Every webpage is fundamentally built with two coding languages: HTML and CSS.
- With HTML (HyperText Markup Language) you tag content as headings, links, images, and more.
- With CSS (Cascading Style Sheets) you style that content based on the HTML tags.
Some types of coding are easier than others, but HTML is one of the easiest types of coding you’ll find. CSS is a bigger language and a bit more complex than HTML, but still is much easier than coding an iOS app with Swift would be (that’s much higher level and more challenging).
A cool thing about HTML and CSS is they’re not only used to create webpages. We also use HTML and CSS to create emails, eBooks, and web apps.
You write code in a code editor such as Sublime Text, Atom, or Visual Studio Code. Code editors are an app for your Mac or PC that are like a specialized text editor. So instead of writing in Microsoft Word, you write the code in a code editor which understands coding languages and can assist you to write code faster and easier.
Making the Site Go Live
After you’re done building the website on your computer, you’ll want to upload it so everyone can go to the website using a website address (such as a .com URL). For this you’ll need a web host and a domain name. You can get these from one company or two separate companies. When getting started it’s easier to get them both from one company. The web host will set up a web server for you, with a folder where you put your files (HTML, CSS, images, etc.). The domain name is an web address (such as .com .io or .net). It is a pointer, and behind the scenes sends visitors to the web host (which has your files) so anyone can see your website!
Once you have a web host and a domain name you’ll need to upload your files. You’ll log into your web hosting account and find the FTP info. FTP stands for File Transfer Protocol, or in other words: copy files over the internet. You’ll need the FTP address, user name, and password. Once you have that information, you can use an FTP app (such as Cyberduck, which is free) to upload the files to your web host. Once the files have been uploaded, you can go to your .com address and see the live website!