Getting home.dev to resolve to 127.0.0.1
You could try to connect to http://home.dev./ (note the single dot at the end of the URL; also, when typing the URL, make sure to type the http:// part into your browser address field too). The reason you're not getting luck is with the somewhat irritating web browser behaviour, which is to try to add some common words to the server address part of the URL if it doesn't look "normal" (i.e. you'll notice quite often the browser try to be smart and add www or .com to the beginning or the end of the server address in your URL). 

The DNS settings window, screenshot of which you attached, is used to configure DNS servers rather than static host to IP mappings like you do in /etc/hosts. When you add 127.0.0.1 entry, all you're doing is telling the system to ignore the DNS settings and the search domain it acquired via DHCP and instead use 127.0.0.1 as the DNS server - i.e. the system will try to send DNS queries to 127.0.0.1 expecting a DNS service to run there and respond to those. The default entries are greyed out to indicate they were put there automatically for you by the DHCP client. 

One way to see what the system resolver is trying to do, bypassing the nonsense of the browser trying to be too smart behaviour, is to open the Terminal.app and type ping home.dev in there and see if you get any responses, and which IP address they come back from. If that works, it means that the resolver is working fine and that the issue is with your browser.