Episode Details

In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

04:20 - HTML

• HTML is the language you write to get text and elements to show up on the screen
• Elements can describe the content they contain
  • p
  • img
• Or be structural and describe the areas of the website
  • div
  • h
  • header, footer
• Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements
• HTML elements have default styling applied to them before you write any CSS
  • This comes from the browser and can be manipulated
  • However, by default all elements are either block or inline-display

08:11 - CSS

• If HTML is the bones, CSS is the clothes and skin
• CSS dictates how a website looks
  • Without CSS, you have text on a blank page and images
• CSS stands for Cascading Style Sheets (“cascading” being the key word)
• Adding CSS to a page
  • Link tag
  • Style tag
  • Inline styles
• Selectors
  • You can select an element on the page via element, class, id, attribute
  • Syntax is selector, brackets, property, value
• Property
  • A property is what you are changing (e.g. background-color)
• Value determines how the thing looks
  • background: red;
• Specificity
  • Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS.
  • People