About This Coterie

Learn how to code.


Coding and Graphics
  1. What's new in this coterie
  2. Best learning sites

    I wanted to add this CSS Selectors Reference page from w3schools because I keep forgetting what selectors to use and there's stuff there I didn't know you could do.
  3. Best learning sites

    I love CSS Tricks as both a reminder on how to do things and as a road map to what I can do. Can I Use is a great way to remind myself on what is and isn't cross compatible....or else to help me work out why something isn't working as expected, and what the work around is.
  4. https://www.w3schools.com is also an amazing resource.
  5. Font Awesome is a great way to add cool icons without having to bog your site down with images. The even cooler part is that you can change their color, their size and have cool spinning icons and everything. You can read more about Font Awesome on their site: http://fontawesome.io/ It's pretty easy to add it to your site. You can either host it yourself or you can use a CDN (Content Delivery Network) link. The easy option is to use a free CDN and enter it into the <head> bit of your skin. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> (You are free to simply copy the above link into your HTML. Then you can get cool icons like what we have up in the header of the Initiative site by using things like this: <i class="fa fa-bath" aria-hidden="true"></i> I personally love to use these as macros as they are clean and simple and you can make them any size with an extra class or a span around the icon. More in a future tip.
  6. When making an element that you want to change on hover a quick extra line to each element will make it look smooth. Note: You can use this for all things that both change on click on hover etc. Add to your CSS elements (both the original and the hover element) the following: transition: all ease 0.3s; You can change each element but this common trick is for a fading effect from one thing to another. Like background or text color (or both!). Try it out: a { color: #000; background: #ae0a5f; transition: all ease 0.3s } a:hover { color: #ae0a5f; background: #000; transition: all ease 0.3s }
  7. Tools

    This thread is for tools that you can use to improve your coding. Firebug (Firefox Addon) - Code inspection tool FireFTP (Firefox Addon) - An FTP tool FileZilla - An FTP tool Brackets - A code writing tool
  8. While the softwares are different the core bits and bobs are the same. Feel free to ask for how-tos and we will work on getting you a guide or a topic to discuss possible ways to do it.
  9. Do you have more of a question (as opposed to fix this thing for me) ? Post it here to get help? You can ask about anything related to HTML or CSS in any way. Even if it is not tuesday, you can still ask your question if it is pressing, but the idea is that we have one day each day for different things
  10. Test your code online: https://codepen.io https://jsfiddle.net/ Validate your code: https://validator.w3.org/
  11. https://www.codecademy.com/learn/web http://learn.shayhowe.com/ https://www.codeschool.com/learn/html-css https://teamtreehouse.com/tracks/web-design https://www.khanacademy.org/computing/computer-programming/html-css