Resources for learning code
If you are interested in learning more and continuing to improve your devlopment skills, we have compiled a list of resources in order to continue learning. Feel free to talk with your instructor about your goals and she can make recommendations, as well.
- Codecademy: An online language tutorial site that is free to use.
- 'Learn to Program' book by Chris Pine
- La Laborotoria Programming School in Lima
- Railsbridge: Intro to HTML and CSS
Resources for learning design
In order to create a good experience for users who use your websites or products, it's important to understand design. There are lots of free resources to use as guidelines and inspiration when building new experiences.
- Linda: a tutorial site for learning new design skills
- 'The rules of simplicity': a book on basic design principals
- Google Design Documentation: learn about the rules of material design
- Dribbble: a site where designers show off their work
- Google Ventures Design Sprints: how to quickly prototype your products and make desisions
- D. School Design Thinking: documentation from the Stanford design school
- Google Fonts: a tool to find free fonts to use directly in your website, or for your designs
- Sketch: a tool to design user interfaces and design. You can use it to design websites, mobile apps, or really anything digital.
- iOS UI Guidelines: learn about Apple's guidelines for building iOS apps.
Basic vocabulary
- HTML: 'Hyper Text Mark Up Language' This is the language used to build the structure of websites, it's like the frame of a building.
- CSS: 'Cascadin Style Sheets' This is used to add style to websites. Examples are adding color, custom fonts, or spacing.
- Tag: Elements are used to tell the HTML what to do. For example, the <h2> tag tells the page that we want a header, but a header that is slightly smaller than the biggest header. You can view a list of all of the HTML tags here. You also use these element tags in CSS when you want to add specific style to them.
- Text elements: You can use things like 'h1' for headers, 'p' for paragraph, and 'a' for links to help style your site with HTML.
- Browser: A browser is what you use to connect to the Internet. It's where you can view your website locally, as you build it. It's also where you search for things online. Our favorite browser to use is Google Chrome.
- Local: how to refer to the code that is on your computer and you are editing, but it's not yet live on the internet.
- Text editor: A text editor is where you type in and make edits to your code. There are many different types of text editors that you can use, our favorite free editor is Sublime.
- "id": An identifier you use to target specific elements. You should use this when you want to do something specific to one element, like centering just one image on the page.
- "class": An identifier you use to target a group of elements. You should use this when you want to do something specific to a group of elements, and reuse it. For example, you could put a class on all your paragraphs to have specific spacing.
- Container: The area where your content lives. You can change the width, height, alignment, spacing, and more by adding styles to all of your content, wrapped in a container.
- Line height: The vertical spacing between lines of text. The correct space between lines of text makes it easier to read.
- Margin: The distance you want an element to have from other elements. For example, you could give your title a margin-left of 20px so that it move 20px to the right.
- Padding: The distance of space you want to have around an element. For example, you could put 20px padding around an entire piece of text, and add color to it to create a button.
- Header: Information that always sits at the very top of a website. This area usually includes navigation, a logo, and things you want the user to click on.
- Footer: Information that always sits at the very bottom of a website. This area can include important links, information, or input fields for people to easily find extra information.