Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

How to Build a Website — The Show For Beginners

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Mux__Sponsor_15" name="Mux__Sponsor_15"></a>Mux - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 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 <a href= "https://mux.com/syntax">mux.com/syntax</a>.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 04:20 - HTML</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> HTML is the language you write to get text and elements to show up on the screen</li> <li class="has-line-data" data-line-start="21" data-line-end="24"> Elements can describe the content they contain <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> p</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> img</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="28"> Or be structural and describe the areas of the website <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> div</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> h</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> header, footer</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Listen to our ep on HTML elements to learn more about them: <a href= "https://syntax.fm/show/354/the-surprisingly-exciting-world-of-html-elements">Syntax 354: The Surprisingly Exciting World of HTML Elements</a></li> <li class="has-line-data" data-line-start="29" data-line-end="33"> HTML elements have default styling applied to them before you write any CSS <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> This comes from the browser and can be manipulated</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> However, by default all elements are either block or inline-display</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="33" data-line-end="34"> 08:11 - CSS</p> <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> If HTML is the bones, CSS is the clothes and skin</li> <li class="has-line-data" data-line-start="35" data-line-end="37"> CSS dictates how a website looks <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Without CSS, you have text on a blank page and images</li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="38"> CSS stands for Cascading Style Sheets (“cascading” being the key word)</li> <li class="has-line-data" data-line-start="38" data-line-end="42"> Adding CSS to a page <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Link tag</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> Style tag</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Inline styles</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="45"> Selectors <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> You can select an element on the page via element, class, id, attribute</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Syntax is selector, brackets, property, value</li> </ul> </li> <li class="has-line-data" data-line-start="45" data-line-end="47"> Property <ul> <li class="has-line-data" data-line-start="46" data-line-end="47">A property is what you are changing (e.g. background-color)</li> </ul> </li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Value determines how the thing looks <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> <code>background: red;</code></li> </ul> </li> <li class="has-line-data" data-line-start="49" data-line-end="54"> Specificity <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> 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.</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> People develop systems like BEM to organize this</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling.</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <code>!important</code> exists to override everything, but as a general rule, NEVER use it. Seriously.</li> </ul> </li> <li class="has-line-data" data-line-start="54" data-line-end="57"> Some interaction <ul> <li class="has-line-data" data-line-start="55" data-line-end="57"> Most interaction is done in JavaScript, but CSS has some basics <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> hover, active, focus</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="57" data-line-end="58"> Pseudo selectors</li> <li class="has-line-data" data-line-start="58" data-line-end="61"> You’ll often see people reaching for libraries to make CSS easier and more consistent <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Common examples are Bootstrap, Foundation, and TailwindCSS</li> <li class="has-line-data" data-line-start="60" data-line-end="61"> 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.</li> </ul> </li> <li class="has-line-data" data-line-start="61" data-line-end="66"> In addition to properties, you can now write your own custom properties for CSS. <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> While this could be seen as an advanced technique, I believe the new normal is CSS variables first.</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> CSS variables are indicated by <code>—variableName: value;</code> where variable name takes the place of a property.</li> <li class="has-line-data" data-line-start="64" data-line-end="66"> 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.</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="66" data-line-end="67"> 37:08 - JavaScript</p> <ul> <li class="has-line-data" data-line-start="67" data-line-end="68"> JavaScript is used to add <em>interaction</em> to a website</li> <li class="has-line-data" data-line-start="68" data-line-end="70"> It makes your website dynamic</li> </ul> <p class="has-line-data" data-line-start="70" data-line-end="71"> <strong>JavaScript the Language</strong></p> <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> We have a base programming language that has nothing to do with HTML</li> <li class="has-line-data" data-line-start="72" data-line-end="77"> It has things like: <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> Variables - ways to store things</li> <li class="has-line-data" data-line-start="74" data-line-end="75"> Numbers + Math</li> <li class="has-line-data" data-line-start="75" data-line-end="76"> Data Containers - Objects and Arrays</li> <li class="has-line-data" data-line-start="76" data-line-end="77"> Functions - Code grouped together to achieve a certain purpose</li> </ul> </li> <li class="has-line-data" data-line-start="77" data-line-end="86"> It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things: <ul> <li class="has-line-data" data-line-start="78" data-line-end="79"> Formatting time + money</li> <li class="has-line-data" data-line-start="79" data-line-end="80"> Alerting the user</li> <li class="has-line-data" data-line-start="80" data-line-end="81"> Logging a value to developer tools</li> <li class="has-line-data" data-line-start="81" data-line-end="82"> Capitalizing things</li> <li class="has-line-data" data-line-start="82" data-line-end="83"> Sorting lists of things</li> <li class="has-line-data" data-line-start="83" data-line-end="84"> Round or randomize numbers</li> <li class="has-line-data" data-line-start="84" data-line-end="85"> Fetch data</li> <li class="has-line-data" data-line-start="85" data-line-end="86"> Talk to a sever</li> </ul> </li> <li class="has-line-data" data-line-start="86" data-line-end="89"> Promises <ul> <li class="has-line-data" data-line-start="87" data-line-end="89"> Logic and flow control</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="89" data-line-end="90"> <strong>JavaScript the DOM</strong></p> <ul> <li class="has-line-data" data-line-start="90" data-line-end="91"> When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model)</li> <li class="has-line-data" data-line-start="91" data-line-end="99"> Events <ul> <li class="has-line-data" data-line-start="92" data-line-end="93"> JavaScript is mostly event-driven - when something happens, do something else</li> <li class="has-line-data" data-line-start="93" data-line-end="94"> When you click something and want something else to happen</li> <li class="has-line-data" data-line-start="94" data-line-end="99"> There are lots of events <ul> <li class="has-line-data" data-line-start="95" data-line-end="96"> mouse, touch, pointer</li> <li class="has-line-data" data-line-start="96" data-line-end="97"> Ready</li> <li class="has-line-data" data-line-start="97" data-line-end="99"> Forms <ul> <li class="has-line-data" data-line-start="98" data-line-end="99"> Submit, change, keyboard, etc.</li> </ul> </li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="99" data-line-end="101"> Can be used to fetch data <ul> <li class="has-line-data" data-line-start="100" data-line-end= "101"><code>fetch()</code> - you’ll often hear it called Ajax, or XMLHttpRequest</li> </ul> </li> <li class="has-line-data" data-line-start="101" data-line-end= "103">Can be used to make more HTML <ul> <li class="has-line-data" data-line-start="102" data-line-end= "103">Whole set of APIs for creating elements</li> </ul> </li> <li class="has-line-data" data-line-start="103" data-line-end= "105">The DOM can be traversed</li> </ul> <h2 class="code-line" data-line-start="105" data-line-end="106"> <a id="Links_105" name="Links_105"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="106" data-line-end= "107"><a href= "https://css-tricks.com/">https://css-tricks.com/</a></li> <li class="has-line-data" data-line-start="107" data-line-end= "108"><a href= "https://getbootstrap.com/">https://getbootstrap.com/</a></li> <li class="has-line-data" data-line-start="108" data-line-end= "109"><a href= "https://get.foundation/">https://get.foundation/</a></li> <li class="has-line-data" data-line-start="109" data-line-end= "111"><a href= "https://tailwindcss.com/">https://tailwindcss.com/</a></li> </ul> <h2 class="code-line" data-line-start="111" data-line-end="112"> <a id="_SIIIIICK__PIIIICKS__111" name= "_SIIIIICK__PIIIICKS__111"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="112" data-line-end= "113">Scott: <a href= "https://www.nintendo.com/games/detail/tony-hawks-pro-skater-1-and-2-switch/">Tony Hawk’s Pro Skater 1 + 2</a></li> <li class="has-line-data" data-line-start="113" data-line-end= "115">Wes: <a href= "https://www.amazon.com/s?k=Mini+Split+AC">Mini Split Air Conditioner</a></li> </ul> <h2 class="code-line" data-line-start="115" data-line-end="116"> <a id="Shameless_Plugs_115" name= "Shameless_Plugs_115"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="116" data-line-end= "119">Scott:<br /> 1: <a href="https://www.leveluptutorials.com/pro">Level Up Tuts Pro</a> - Sign up for the year and save 25%!<br /> 2: <a href="https://forms.gle/PDEpDAGZpNHBDVou5">Become a Level Up Tutorials Author</a></li> <li class="has-line-data" data-line-start="119" data-line-end= "123">Wes:<br /> 1: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!<br /> 2: <a href="https://wesbos.com/javascript">Javascript Notes & Reference</a></li> </ul> <h2 class="code-line" data-line-start="123" data-line-end="124"> <a id="Tweet_us_your_tasty_treats_123" name= "Tweet_us_your_tasty_treats_123"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="124" data-line-end= "125"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="125" data-line-end= "126"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="126" data-line-end= "127"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="127" data-line-end= "128"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="128" data-line-end= "129"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="129" data-line-end= "130"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="130" data-line-end= "131">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

How to Build a Website — The Show For Beginners

Poslechněte si podcast