How to Build a Website — The Show For Beginners
Syntax - Tasty Web Development Treats11 Aug 2021

How to Build a Website — The Show For Beginners

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 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 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 Can be used to make more HTML Whole set of APIs for creating elements The DOM can be traversed Links https://css-tricks.com/ https://getbootstrap.com/ https://get.foundation/ https://tailwindcss.com/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Tony Hawk’s Pro Skater 1 + 2 Wes: Mini Split Air Conditioner Shameless Plugs Scott: 1: Level Up Tuts Pro - Sign up for the year and save 25%! 2: Become a Level Up Tutorials Author Wes: 1: All Courses - Use the coupon code ‘Syntax’ for $10 off! 2: Javascript Notes & Reference Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Avsnitt(939)

939: Creator of Vite: Evan You

939: Creator of Vite: Evan You

Scott and Wes sit down with Evan You, creator of Vue, Vite, and VoidZero, to dig into the future of frontend tooling. From the speed of Rolldown to why he chose Rust, they explore the evolution of developer experience, bundlers, and what’s next for the web. Show Notes 00:00 Welcome to Syntax! 00:31 Who is Evan You? Vue.js. Vite. Void0 01:19 Making the shift from UI to Toolchains. 02:37 How aesthetics contributed to the success of Vue and Vite. 05:26 Adding Rollup plugins to the Dev Server. 07:31 Brought to you by Sentry.io. 07:56 Rollup and Rolldown explained. 09:29 NAPIRS. 10:02 Why Rust and not Go? SWC, OXC. 12:04 Rolldown’s speed and performance. OXC Allocator. 15:09 Dealing with massive buildtimes. 17:42 How has the transition been? 20:34 Why do we even need a bundler? 23:25 Vite’s superior developer experience. 26:01 Fullstack Vue? 31:45 Node and Vite’s relationship. 35:41 Wes’ wishlist. vite-dir. 37:28 Hot takes. 37:37 Would Next be better with Vite? 41:09 Thoughts on React Server Components. 43:40 Thought on Remix 3. 46:22 Tell us about Void0. 51:36 Sick Picks + Shameless Plugs. Sick Picks Evan: Laravel Lamborghini Shaped Stress Toys Shameless Plugs Evan: Viteconf, Vite, CultRepo. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

22 Sep 54min

938: Hot Takes + Bike Shedding

938: Hot Takes + Bike Shedding

Wes and Scott dive into some hot takes and classic debates—tabs vs spaces, camel vs snake case, export styles, barrel files, variable naming, and more. Show Notes 00:00 Welcome to Syntax! 01:26 CSS variables: descriptive vs. semantic 03:38 snake_case vs. camelCase 04:54 Default exports vs. named exports 06:23 Barrel files vs. direct imports 09:15 Function declaration vs. function expression 11:00 Inferred types vs. explicit types 13:40 Brought to you by Sentry.io 14:40 Long and explicit variable names vs. short with comments 16:27 Self-documenting code vs. code comments 17:03 Rebase vs. merge commit 18:39 Naming event parameters: e vs. event 20:33 Tabs vs. spaces 22:18 Big line height vs. small line height 23:50 Hard line length vs. line wrap Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

17 Sep 27min

937: Is The Omarchy Hype Real?

937: Is The Omarchy Hype Real?

Scott takes Wes on a tour of Omarchy, DHH’s polished Arch + Hyprland Linux setup that promises speed, beauty, and endless keyboard shortcuts. From first impressions to daily workflows, Scott debates whether it’s good enough to pull him out of the Apple ecosystem for good. Show Notes 00:00 Welcome to Syntax! 02:31 Brought to you by Sentry.io. 02:55 What is Omarchy? 02:57 Arch-based distribution. 03:42 Hyprland window management. 05:08 Wayland Display Server Protocol. 06:27 Installation Defaults. 06:53 System-wide shortcuts. 09:01 My first impressions. 09:41 Connecting to my NAS. 10:54 Gigantic UI. 12:21 Day 2 Experiences. 13:22 Resizing window challenges. 16:11 Neovim and Lazyvim. 16:49 Lazygit. 19:07 How do you use it and why is it good. 19:14 Command Palette. 19:49 Raycast. Recreating Raycast. 20:50 Using the app launcher. 21:25 Screensavers. 21:59 OS Style. 22:55 My apps, my apps, my apps, check it out. 25:07 Is the hardware comparable to Mac’s M processors? 27:24 Installing new apps. 29:26 Web apps as first class citizens. 32:47 What I’ll miss. 35:56 What’s going on with MacOS UI? 38:37 Annoyances. 39:31 My advice. Read the Manual. 44:39 Sick Picks & Shameless Plugs. Sick Picks Scott: Omarchy Manual. Wes: Ugreen 200w Charger, Silicone USB C. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

15 Sep 48min

936: Realtime LED Wall With React + Websockets (I Let Strangers Control It)

936: Realtime LED Wall With React + Websockets (I Let Strangers Control It)

Scott, Wes, and CJ dive into Wes’s Hackweek project: a real-time, web-controlled LED grid. They break down the hardware build, custom 3D-printed diffuser, ESP32 microcontroller, and Cloudflare durable objects powering live pixel art, GitHub activity displays, and interactive web drawings. Show Notes 00:00 Welcome to Syntax! 02:03 Wes’ Hackweek project: a web-controlled LED grid 03:52 The hardware: LED panels, soldering, and power WS2812 LED panels 06:38 ESP32 microcontroller and WLED firmware explained ESP32 Microcontroller 10:57 Power supply challenges and injection fixes 15:05 Debugging and testing a DIY LED matrix 15:56 Shorts, blown circuits, and melted wires 17:58 Designing and 3D-printing the diffuser for crisp pixels 21:29 The software: Cloudflare Durable Objects + Party Server Cloudflare Durable Objects Party.server 22:18 Real-time sync and state management across clients Party Client 28:43 Connecting the server to the LED hardware 41:51 Open access fun: scripts, NSFW images, and moderation Cloudflare tunnel 44:10 Live demos 45:34 Future plans: stats, rooms, and making it always-on Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

10 Sep 47min

935: CJ Made A Sega Game In 2025

935: CJ Made A Sega Game In 2025

CJ takes us behind the scenes of Hackweek to share how he built a custom Sega Genesis game from scratch, complete with assembly code, level loading, and retro hardware tricks. From SGDK to parallax faking, this episode is a deep dive into old-school game dev with a modern twist. Show Notes 00:00 Welcome to Syntax! 00:44 Why a Sega game? Sega Genesis. Sega Master System. MKBHD Retro Tech: Sega. 06:55 What is it running on? 07:49 Working with assembly code. 10:11 Sega Genesis Development Kit. Stephane-D GitHub. 10:54 Awesome Megadrive. 12:02 Booting on an emulator. 13:07 Gens and KMod. 15:54 Compiling stage. 17:44 Genesis Code VS Code Extension. 18:22 Images and Assets. 19:46 Loading images with bitmap. 23:50 Megacat Studios. 25:21 Z index? Faking Parallax. 27:34 Specific code examples. 27:51 Platformer Engine. 30:01 Platformer Sample Game. 30:44 LDTK (Level Designer Toolkit). 33:13 Tiled Collision mapping. 37:42 What about debugging? 39:37 Loading in levels. RetroGameMechanicsExplained. Sega Mega-CD Development Unit. 43:56 Challenges with graphics. 49:56 Adding music. Super Cartridge. Flahskit Programmer MD. Flashkit Cart MD. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

8 Sep 52min

934: We Built a Real-Time, Local-Data, Competitive Coding Game

934: We Built a Real-Time, Local-Data, Competitive Coding Game

Scott, Wes, and CJ dive into SynHax, Scott’s Hackweek project for code battles. They discuss live coding duels, referee controls, and the surprisingly simple tech stack that delivers instant updates and audience engagement. Show Notes 00:00 Welcome to Syntax! 01:50 Brought to you by Sentry.io 02:30 What is SynHax? This Button Broke Our Brains (CSS Challenge) 04:21 The Stack SvelteKit Postgres Drizzle Zero Sync Better Auth Syntax 931: How to make good choices when starting a coding project 07:39 How it works 15:03 The battle experience 28:28 Fun details 34:12 Creating new battles & the admin dashboard Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

3 Sep 37min

933: Hackweek Overview - What Is It, What Did We Build

933: Hackweek Overview - What Is It, What Did We Build

It’s Hackweek at Syntax! Scott, Wes, and CJ break down what Hackweek is all about - how they picked their projects, what came out of them, and why it’s the best excuse to experiment, build, and have fun before the deep-dive episodes roll in. Show Notes 00:00 Welcome to Syntax! 00:04 What is Hackweek? 01:05 Hackweek projects spark motivation. 04:05 Choosing our projects. 04:34 What we chose. 05:11 CJ’s Hackweek Project. 05:51 Using SGDK C language toolkit. 07:02 Writing to an Everdrive. 08:09 What game engine did you use? Platformer Engine. LDtk. 12:11 What was the end result? 14:09 Wes’ Hackweek Project. 16:15 Why hardware projects? Watch the Video Here. 19:09 Scott’s Hackweek Project. Watch the Video Here. 21:42 Early considerations. 25:42 AI usage. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

1 Sep 32min

932: Vibe Coding’s Huge Problem

932: Vibe Coding’s Huge Problem

Wes and Scott talk about the dangers of vibe coding when it comes to authentication and access control. They share real-world examples of security fails, discuss how to avoid client-side-only checks, and offer practical tips for protecting sensitive user data in your apps. Show Notes 00:00 Welcome to Syntax! We build the world’s most painful CAPTCHAs (Kitboga scammers) 02:08 Brought to you by Sentry.io 02:33 Wes’ vibe coding experience Wes’ app 04:38 The Tea app disaster Tea app 07:45 Don’t vibe code access control Better Auth with Better Auth 09:38 Let in, don’t lock down 11:23 Server vs. client-side code 13:46 Visualize access control 15:30 Automate tests 17:00 Sick Picks + Shameless Plugs Sick Picks Scott: A City on Mars Wes: Hotel Collection Essential Oils Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

27 Aug 22min

Populärt inom Politik & nyheter

svenska-fall
aftonbladet-krim
rss-krimstad
p3-krim
svd-dokumentara-berattelser-2
fordomspodden
rss-viva-fotboll
flashback-forever
olyckan-inifran
aftonbladet-daily
rss-sanning-konsekvens
rss-vad-fan-hande
rss-expressen-dok
dagens-eko
rss-frandfors-horna
krimmagasinet
rss-krimreportrarna
motiv
blenda-2
rss-flodet