Now that we've learned the basic skills needed to get a website out in the real world, let's cover some ways to make it better. A lot better.

In no particular order....

Using Flask to build web applications

We've learned a lot of really useful skills over the past few lessons. However, in order to develop websites that provide services or generate content dynamically, knowledge of HTML, CSS, and JavaScript isn't quite enough!

Flask is a Python framework that makes it really easy to take the next step in your illustrious web development career. For a thorough look at Flask, I can't recommend ADI's own guide to developing with Flask highly enough. There's no better way to start making fully-fledged web apps!

Customizing your domain

This website, and its parent, are hosted through GitHub. But I'm using my own domain name, because it's way cooler that way.

To do this for your website, it's as easy as 1, 2, 3i, 3ii!

1. Go to Namecheap and buy a domain you like! Remember, the GitHub student developer pack comes with a free .me domain from Namecheap, in case you don't want to spend any money.

2. In your username.github.io repo, at the same level as index.htmlcreate a file called CNAME. Inside that file, add just one line: your new domain name, all lowercase, and nothing else. For example, this site's CNAME is just:

   evan.land

3. In Namecheap, in your dashboard, click “Manage” on the domain name you just bought. Then click on Advanced DNS from the tabs in the middle of the page. Then, do the following:

   1. Use the red “Add new record” button to add two A Records, both with host @, one with the IP address 192.30.252.153, the other with IP address 192.30.252.154.
   2. Use the red “Add new record” button to add a CNAME Record, with host www and the value [username].github.io.. For example, my CNAME Record's value is evantarrh.github.io.. Don't leave out the dot at the end of it!

You'll need to wait at least half an hour for the changes to finish, but after that, everything should work like you want it to.

CSS Media Queries

While you were designing your website, did you ever think about what it would look like on a phone? More and more people browser the internet using their phones, and it's our duty as web developers to make sure our websites' user experience is just as good on a phone or tablet.

The best way to do this is in your CSS, with media queries! That's how this website looks passable on mobile.

• Here's a quick introduction.
• Here's a great reference guide.
• Here are some interesting tricks if you want to get your brain working hard.

Better JavaScript

Our JavaScript lesson was pretty long, but I still left out a lot of things that are really crucial for working on anything beyond a personal site.

1. I've linked to Eloquent JavaScript before, and I'll do it again. It's so important to have good JavaScript fundamentals, and this website does by far the best job. You should already have read chapters 1 and 2; maybe even more important is Chapter 3, functions. Please read that!
2. MDN also has an excellent crash course in all things JavaScript. It's much shorter than EloquentJS, but still covers a lot of the important stuff.

Favicons

Ever wonder how there's a little green J next to the title in your browser's tabs? It's called a favicon, and all the cool kids will have one on their personal sites.

You can make one with this silly tool, and store it at the same level as your index.html with the name favicon.ico.

To use a .png, or to get more information about the rabbit hole that is the favicon, check out this incredibly detailed guide. Don't spend too much time there or your brain will explode.

Google Analytics

Why make a personal site if you can't have incredibly detailed information about how many people are visiting your website every day, where they're from, and what browser they're using? Google Analytics is such a comically useful tool that every time I use it I'm amazed at how free it is.

The guide on the Google Analytics site should be enough to get you started; here is an extra-detailed guide in case you get stuck.

Bootstrap

I love web design, but I recognize that not everyone shares my love for wrangling with CSS. If that sounds like you, you should check out Bootstrap: it's a CSS framework, which provides a lot of built-in styling that works well on all devices.

• Here is a great way to get started with Bootstrap: a lesson from Codecademy!
• Here's Bootstrap's own “getting started” guide.
• Here's a pretty reasonable (if slightly out of date) video guide to getting started with Bootstrap.

Caching your GitHub password

Are you tired of entering your username and password every time you want to push to GitHub? Follow this guide and you'll never have to think about it again.

Anything else you want to see here? Let me know—I want this to be as helpful as possible.

Happy building!