Dive into the basics of web development with a focus on HTML and CSS for beginners! Discover how to create a website from scratch using simple concepts without the technical jargon. Learn about the significance of reusable components, CSS frameworks, and the dynamic role of JavaScript in enhancing interactivity. The hosts also share personal anecdotes and practical tips, making the journey into web development both fun and approachable. Get ready to build your first website with essential tools and insights!
01:01:29
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
question_answer ANECDOTE
Scott's Acupuncture Experience
Scott Talinsky shares his experience with acupuncture and spinal manipulation, leading to improved physical well-being.
He connects this feeling of looseness and readiness to discussing websites.
volunteer_activism ADVICE
Website Building Basics
Start with HTML, the foundation of any website, to structure content with elements like <p>, <img>, <div>, and <h1> to <h6>.
Use CSS to style the website's appearance, controlling colors, layout, and more, to enhance the user experience.
volunteer_activism ADVICE
CSS Styling
Avoid inline styles for better organization and maintainability, favoring separate CSS files or <style> tags unless absolutely necessary.
Learn CSS selectors (classes, IDs, element names) and properties (e.g., background-color, box-shadow) to effectively target and manipulate styles.
Get the Snipd Podcast app to discover more snips from this episode
In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!
Freshbooks - Sponsor
Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor
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 - Sponsor
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.
Show Notes
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
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 develop systems like BEM to organize this
General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling.
!important exists to override everything, but as a general rule, NEVER use it. Seriously.
Some interaction
Most interaction is done in JavaScript, but CSS has some basics
hover, active, focus
Pseudo selectors
You’ll often see people reaching for libraries to make CSS easier and more consistent
Common examples are Bootstrap, Foundation, and TailwindCSS
For the most part you’ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS.
In addition to properties, you can now write your own custom properties for CSS.
While this could be seen as an advanced technique, I believe the new normal is CSS variables first.
CSS variables are indicated by —variableName: value; where variable name takes the place of a property.
You can then use the variable via var(—variableName) in place of a property. This allows for easy duplication of same values across your style sheet.
37:08 - JavaScript
JavaScript is used to add interaction to a website
It makes your website dynamic
JavaScript the Language
We have a base programming language that has nothing to do with HTML
It has things like:
Variables - ways to store things
Numbers + Math
Data Containers - Objects and Arrays
Functions - Code grouped together to achieve a certain purpose
It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things:
Formatting time + money
Alerting the user
Logging a value to developer tools
Capitalizing things
Sorting lists of things
Round or randomize numbers
Fetch data
Talk to a sever
Promises
Logic and flow control
JavaScript the DOM
When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model)
Events
JavaScript is mostly event-driven - when something happens, do something else
When you click something and want something else to happen
There are lots of events
mouse, touch, pointer
Ready
Forms
Submit, change, keyboard, etc.
Can be used to fetch data
fetch() - you’ll often hear it called Ajax, or XMLHttpRequest
Syntax - Tasty Web Development Treats