The Awesome Divi Page Builder For WordPress! iEatWebsites 2026-09-20 | The Awesome Divi Page Builder For WordPress!
ChatGPT API for Beginners using Node JS iEatWebsites 2023-05-27 | Learn how to use the ChatGPT API from OpenAI.com. This video tutorial will cover only the very basics to get you started using Node JS.CHAPTERS:0:00 Intro0:19 Project Setup2:27 OpenAI API Code4:05 Function to send a request to the OpenAI API4:49 Adding the API Key6:15 Running the function and getting data from Chat GPT6:56 Testing ChatGPT Prompt7:49 Changing max tokens9:29 Changing the code for a more readable results10:48 OutroOpenAI Documentation:platform.openai.com/docs/api-reference/completions/create
Add confetti to your website with JavaScript iEatWebsites 2023-01-15 | Add confetti to your website or web app using js-confetti JavaScript library.Get the code:codepen.io/ieatwebsites/pen/KKBvywPJS-Confetti Documentation: npmjs.com/package/js-confetti
How to copy text with the JavaScript Clipboard API iEatWebsites 2022-12-16 | In this video you will learn how to use the JavaScript clipboard API to create a simple button that will copy text.Learn More about the Clipboard API: developer.mozilla.org/en-US/docs/Web/API/Clipboard_APICHAPTERS:0:00 Intro1:11 Elements Variable2:32 forEach Loop3:05 Paragraph and Button Variables4:10 Button click addEventListener7:04 Testing the copy button
CSS for beginners: How to center a div 🔳 #shorts iEatWebsites 2022-10-19 | In this short video you will learn how to center a div using only CSS.Chapters:00:00 Intro00:36 Position relative02:33 Flexbox
CSS Functions: min(), max() and clamp() 🔥 #shorts iEatWebsites 2022-10-17 | In this short video you will learn how to use the css functions min(), max() and clamp().Chapters:0:00 Intro0:33 max()1:53 min()2:22 clamp()
Amazing VS Code Sticky Scroll Feature #shorts iEatWebsites 2022-09-22 | Here you can read more about the sticky scroll feature:code.visualstudio.com/updates/v1_70#_editor-sticky-scrollCHAPTERS:00:00 Enabling the Sticky Scroll Feature00:28 JavaScript01:12 SCSS
7 CSS Properties you may not know iEatWebsites 2022-09-03 | In this video you will learn 7 cool CSS Properties you may now know. CHAPTERS00:00 Intro00:10 object-fit01:30 background-clip02:41 clip-path04:00 user-select05:36 has()07:20 empty09:21 accent-colorClip Path web app: bennettfeely.com/clippy
Protect your API Key with Serverless Functions #shorts iEatWebsites 2022-08-13 | This #short video will explain the best way to protect your API Key or any other data that needs to be protected when doing a request to the API.In my example, I'm using netlify.com
WEB 3 for Developers iEatWebsites 2022-03-26 | I spent three months learning what is the Web 3 and it changed the way I see technology. The most important thing is to understand what is the blockchain, and the next step is to build a smart contract. After understanding how the blockchain and a smart contract works, you are ready to build a DAPP.What is the blockchain?coinbase.com/learn/crypto-basics/what-is-a-blockchainWhat is a Smart Contract?coinbase.com/learn/crypto-basics/what-is-a-smart-contract
How to use the DATA attribute with JavaScript, HTML and CSS. iEatWebsites 2022-01-05 | Using the DATA attribute is very easy, and your website or web app can behave is some cool ways when you use it. You just need to know basic HTML, CSS and JS to follow this video tutorial.Learn more here: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Adding CSS animation to a Christmas Tree SVG file. #Shorts iEatWebsites 2021-12-20 | In this short video, you will learn how simple it is to add animation to an SVG file with just CSS.
Easy way to get data from Movies & TV Shows with IMDB API and RapidAPI iEatWebsites 2021-11-17 | This is a quick and easy video on how to get data from Movies and TV Shows using the IMDB API and RapidAPI. With RapidAPI you can choose from hundreds of different APIs and start getting data very quick and easy.Create an account before following the video: rapidapi.com/hubFollow me on Twitter: twitter.com/ieatwebsites
My Favorite API Tool. #shorts iEatWebsites 2021-11-13 | I use Rapid API to find and subscribe to one or multiple APIS. Is very easy to use, and you have the option to use only one KEY for multiple APIS.rapidapi.com/hub
NPM init short cut! #Shorts iEatWebsites 2021-09-20 | A shortcut for NPM init. You don't need to press enter multiple times every time you start a node package.- My code editor: VS Code- Follow me on Twitter
How to Add a Custom Fonts to Your Website (HTML and CSS) iEatWebsites 2021-09-03 | In this video you will learn how to add custom fonts to your website or web app. This is not about Google or Adobe fonts, this is for fonts that you downloaded or created.Download code:github.com/brickbones/custom-fontsFonts used in this video:dafont.com/roblox.fontbefonts.com/memphis-river-font.htmlMy Code Editor is VS Code: code.visualstudio.comFollow me: twitter.com/ieatwebsites
How to Setup your HTML Website in less than 10 minutes (for beginners) iEatWebsites 2021-07-23 | In this video you will learn how to setup a static website (HTML, CSS and Javascript) from scratch. This is for very beginners.Download VS Code: code.visualstudio.comInstall Browser-sync: - You need to install Node JS first: nodejs.org/en - Install Browser-sync: browsersync.ioAks me questions: twitter.com/ieatwebsites
How to Create a Custom VS Code Theme iEatWebsites 2021-06-24 | Creating a custom there is not complicated. In this short video I will show you how you can change the color of the main activity bar and the code highlights. This is just the start... Go crazy!Make sure you have Node installed in your computer first:nodejs.org/en/downloadInstall the VS Code Extension Generator using your terminal:npm install -g yo generator-codeRun "yo code" to start the process of creating your color theme.VS Code Color reference:code.visualstudio.com/api/references/theme-colorHow to publish your theme to the world:code.visualstudio.com/api/extension-guides/color-theme#publishing-a-theme-to-the-extension-marketplaceFollow me on twitter:twitter.com/ieatwebsites
Get users location with Javascript geolocation iEatWebsites 2021-06-04 | Getting the location of a user is very easy with the Javascript geolocation API. This is a quick video and easy to follow.Learn more about Javascript geolocation API:developer.mozilla.org/en-US/docs/Web/API/Geolocation_APIHere's the Big Data Cloud Free Public API URL:api.bigdatacloud.net/data/reverse-geocode-client?latitude=XXXXXXXXXXXX&longitude=XXXXXXXXXXXX&localityLanguage=enFollow me on twitter:twitter.com/ieatwebsites
Custom HTML5 Video Player (Mute and Fullscreen button) iEatWebsites 2021-05-24 | In this video we are going to add a mute button and a fullscreen button to our custom HTML Video Player.Custom HTML Player video Playlist:youtube.com/watch?v=YheuzX6zmpg&list=PL8tleY5L5djb9sR1vxxo0Vc3ZO_7Kd9UmDownload the code: amazon.com/clouddrive/share/SUlV2pFyHbmpiiWStCyTMWyPYM3ZjR57fPOwviNIkrGLearn more about HTML5 Video:developer.mozilla.org/en-US/docs/Web/HTML/Element/videoDownload FontAwesome: fontawesome.comFollow me on Twitter: twitter.com/ieatwebsites
Create a Google Chrome Extension (For Beginners) iEatWebsites 2021-05-15 | Creating a Google chrome extension from scratch is very easy. This video tutorial will show you the basics on how to get started.How to Publish your extension: developer.chrome.com/docs/webstore/publishFull Documentation:developer.chrome.com/docs/extensions Follow me: twitter.com/ieatwebsites
Keyboard Events with Javascript iEatWebsites 2021-04-25 | Learning the basics of keyboard events with Javascript is very important and useful. You can detect any key that the user is pressing and do whatever you want to the data.Get the code here: codepen.io/ieatwebsites/pen/BapbzXjLearn more about keyboard events:developer.mozilla.org/en-US/docs/Web/API/KeyboardEventFollow me on twitter: twitter.com/ieatwebsites
Custom HTML5 Video Player (3/3) CSS and Progress Bar iEatWebsites 2021-04-14 | In this video we are adding CSS and the clickable progress bar.***Youtube muted part of the video because of audio copyright.***Download the code: amazon.com/clouddrive/share/SUlV2pFyHbmpiiWStCyTMWyPYM3ZjR57fPOwviNIkrGLearn more about HTML5 Video:developer.mozilla.org/en-US/docs/Web/HTML/Element/videoLearn more about offsetX:developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetXLearn more about offsetWidth:developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidthFollow me on Twitter: twitter.com/ieatwebsites
Custom HTML5 Video Player (2/3) Volume and Time iEatWebsites 2021-04-14 | In this video we are creating the volume and the time of the video. This is video two of three videos.***YouTube muted some parts of this video because of audio copyright***Download the code: amazon.com/clouddrive/share/SUlV2pFyHbmpiiWStCyTMWyPYM3ZjR57fPOwviNIkrGLearn more about HTML5 Video:developer.mozilla.org/en-US/docs/Web/HTML/Element/videoFollow me on Twitter: twitter.com/ieatwebsites
Custom HTML5 Video Player (1/3) Play and Pause button iEatWebsites 2021-04-14 | In this video we are creating the play and pause button for the video player and adding some HTML. This is video one of three videos.Download the code: amazon.com/clouddrive/share/SUlV2pFyHbmpiiWStCyTMWyPYM3ZjR57fPOwviNIkrGLearn more about HTML5 Video:developer.mozilla.org/en-US/docs/Web/HTML/Element/videoFollow me on Twitter: twitter.com/ieatwebsites
What is Lodash and How it Works (for beginners) iEatWebsites 2021-03-22 | Lodash is an amazing JavaScript utility library with a lot of useful methods that can help you with you projects.Download or Install Lodash:lodash.comLodash Documentation:lodash.com/docs/4.17.15Browsersync:browsersync.ioFollow me on Twitter:twitter.com/ieatwebsites
Reduce Javascript method - Simple Explanation for beginners iEatWebsites 2021-03-08 | Reduce has been very confusing for a lot of people, but after watching this video you will see that is not that complicated. 👍Follow me on Twitter: twitter.com/ieatwebsitesLearn more about reduce(): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Automatically Save CSS changes made in Chrome DevTools (Using Workspace) iEatWebsites 2021-02-21 | When you open your inspector and change some of the CSS of your website, you want all that code to automatically save on your CSS file instead of copying and pasting the code. This is possible and it just takes a couple of minutes to setup using Chrome DevTools Workspace.- Ask Me Anything: pensight.com/x/ieatwebsites- Follow me on Twitter: twitter.com/ieatwebsites
How to Generate and Filter a list with Javascript using forEach() and filter() functions. iEatWebsites 2021-02-06 | Learning Hight-Order functions like forEach() or filter() are extremely important for any Developer. In this video you will learn how to add a list to the DOM and then filtering that list.Ask Me Anything: pensight.com/x/ieatwebsitesGet the code: codepen.io/ieatwebsites/pen/eYBZgLG Learn More about forEach: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEachLearn More about filter: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filterMy Regex tutorial: youtube.com/watch?v=15rEnbxkehgFollow me on twitter: twitter.com/ieatwebsites
How to Install a Coding Font (Fira Code) iEatWebsites 2021-01-24 | You can install a specific font to code and it will look a lot better than a regular font. In this video I'm installing Fira Code in VS Code.- Ask Me Anything: pensight.com/x/ieatwebsites- Download Fira Code: github.com/tonsky/FiraCode- Follow me on Twitter: twitter.com/ieatwebsites
How to Create a Working Toggle Switch (ON/OFF button) with HTML and CSS iEatWebsites 2021-01-10 | Create a working toggle switch button from scratch using HTML, CSS. I will use a little bit of Javascript to change the text, but that's a bonus.Take a look at my Code and follow me on CodePen:codepen.io/ieatwebsites/pen/NWRLNWgAsk me questions:pensight.com/x/ieatwebsitesFollow me on Twitter:twitter.com/ieatwebsites
Make Your Modern Javascript Code Compatible with old Browsers iEatWebsites 2020-12-24 | Is easy to make your modern Javascript code compatible with very old browsers like Internet Explorer using Babel. Make sure you install Node first:nodejs.org/en/downloadInstall Babel:babeljs.io/setupInstall Gulp:gulpjs.com/docs/en/getting-started/quick-startI'm using Browsersync for hot reload:browsersync.ioDownload my code:amazon.com/clouddrive/share/d2sNUpTCRpkINl5WEwevWwheRQDjoJe7QW8yrXmeO68- If you download my code, make sure to run npm install.Follow me on Twitter: twitter.com/ieatwebsites
Create a 3D Flip Card using CSS 3D Transforms iEatWebsites 2020-11-21 | Learn how to create a 3D Flip card using HTML, CSS and a little bit of Javascript.Download the code: amazon.com/clouddrive/share/ctNMh3xM8mRjUhfYadXH4OyhsdhLTnPjtG6L5RlXExRLearn More about CSS Transforms:developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transformsLearn more about CSS Combinators:developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/CombinatorsDownload VS Code:code.visualstudio.comFollow me on Twitter:twitter.com/ieatwebsites
Create Your First WordPress Plugin - Part 2 iEatWebsites 2020-11-03 | Finishing our WordPress plugin is a great feeling! In this video we are going to create an options page for the plugin with a field. Get the code here: gist.github.com/brickbones/2910b203ae8802f1e994bc126d518653Learn more about "register_setting()": developer.wordpress.org/reference/functions/register_settingLearn more about Data Sanitization:developer.wordpress.org/themes/theme-security/data-sanitization-escapingContact me: twitter.com/ieatwebsites
Create Your First WordPress Plugin - Part 1 iEatWebsites 2020-10-16 | In this video I will teach you how to create a simple WordPress Plugin. Watch the second part: youtu.be/B7slp-srRkEHow to install WordPress On Your Local Server:youtube.com/watch?v=NmT3-6v9HX0Download my code: gist.github.com/brickbones/5ffee404df932685422ebaf2f475b9fdLearn more about "add_action": developer.wordpress.org/reference/functions/add_actionContact me: twitter.com/ieatwebsites
GIVEAWAY!!! 🎉 Practical SVG Book by Chris Coyier iEatWebsites 2020-09-18 | I'm giving away one of my favorites books "Practical SVG by Chris Coyier". This book will teach all you need to know to understand SVG and more. Just comment down below and I will randomly pick one person.If you don't want to wait or don't win, here the link to buy the book:abookapart.com/products/practical-svgIf you like my videos and want to support the channel, buy me a beer!buymeacoffee.com/ieatwebsitesContact me: twitter.com/ieatwebsites
How to Automatically Resize an iFrame (Using iFrameResize.js) iEatWebsites 2020-09-17 | In this video you will learn how to automatically resize those ugly iFrames using a Javascript library called iFrameResize.Download iFrameResize here: github.com/davidjbradshaw/iframe-resizer/tree/master/jsDownload my code: gist.github.com/brickbones/86f7eda1246ea7fe7148782c22269bdfIf you like my videos and want to support the channel, you can buy me beer: buymeacoffee.com/ieatwebsitesContact me: twitter.com/ieatwebsites
What is Mobile First CSS Code iEatWebsites 2020-09-03 | Is this video you will learn what is mobile first CSS and we will code a simple list of random cats from mobile to desktop using media queries.Download my code: gist.github.com/brickbones/c816da6dd2b50827692cde6aa0ca9730Follow me on twitter: http://twitter.com/ieatwebsites
How to Detect if the user is using an iPhone, Android or a Browser iEatWebsites 2020-08-23 | In this video you will learn how to detect if the user is using a device like an iPhone or if is using a specific Browser using a small Javascript library called Detect.js.Detect.js Github: github.com/darcyclarke/Detect.jsDownload Detect.js in Plain JS : github.com/darcyclarke/Detect.js/tree/master/builds/1.0.0Follow me on Twitter: twitter.com/ieatwebsites
How to Create Tabs with only HTML & CSS iEatWebsites 2020-08-06 | In this video you will learn how to create tabs with simple HTML and CSS. You don't need Javascript or any other library.Get the code here: gist.github.com/brickbones/0b447985b10f143a160bcf2e1d69726aContact me via Twitter: twitter.com/ieatwebsites
How to Host Your Website for Free with Github Pages iEatWebsites 2020-07-06 | Is this video you will learn how to host a static website for free using Github Pages. - Create a Github account: github.com - Download Github Desktop app: desktop.github.com - Learn More about the gitignore file: docs.github.com/en/github/using-git/ignoring-files: - Learn more about licenses: docs.github.com/en/github/creating-cloning-and-archiving-repositories/licensing-a-repository - Follow me on twitter: twitter.com/ieatwebsites
Add a Step-by-Step guide to your Website with intro.js iEatWebsites 2020-06-28 | In this video you will learn how to add a step-by-step guide a website or web app. This is very helpful when you release a new version of your website or web app.Download IntroJs: github.com/usablica/intro.js/releasesIntroJs CDN links: introjs.com/docs/getting-started/install#cdnFollow me on Twitter: twitter.com/ieatwebsites
Create Fancy Scrolling Animations Used on Apple Product Pages iEatWebsites 2020-06-07 | The other day I was browsing and found an awesome article by Jurn van Wissen at css-tricks.com. I loved it, and decided to record a video tutorial. The article is about how to create fancy scrolling animation used on Apple product pages.Here's the article: css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pagesJurn van Wissen website http://jurn.ioJurn's code: codepen.io/j-v-w/pen/ZEbGzyvThanks to css-tricks.com and Jurn for all the great content.*The images used in this video are owned by Apple Inc.
How To Add 360° Panoramic Photos to your Website with PANOLENS JS iEatWebsites 2020-06-01 | In this video you will learn how to add panoramic photos to your website using the PANOLENS Javascript library.Download PANOLENS file: raw.githubusercontent.com/pchen66/panolens.js/master/build/panolens.min.jsDownload THREE.JS file: http://threejs.org/build/three.min.jsPANOLENS Documentation: pchen66.github.io/Panolens/#DocumentationPANOLENS API: pchen66.github.io/panolens.js
How To Add React to HTML Website for beginners iEatWebsites 2020-05-01 | In this video I will show you how to add React to a basic HTML website and create two components.React Documentation: reactjs.org/docs/getting-started.htmlReact and ReactDOM links: reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tagsInstall React app using NPM: reactjs.org/docs/create-a-new-react-app.htmlDownload my code: github.com/brickbones/add-react-to-website-tutorialLearn about the constructor(): reactjs.org/docs/react-component.html#constructorHere’s a good article about props: alligator.io/react/propsFollow me on Twitter: twitter.com/ieatwebsites
Interview with Travis Neilson | Talking about UX Design, Google, Youtube and more. iEatWebsites 2020-04-22 | Travis Neilson is a Designer, Developer, YouTuber, Musician, and more. He founded DevTips, one of the most successful design and coding channels on YouTube. Here currently works for Google, and we talk about how it feels to work for a big company and much more.----------------------------------------Subscribe to Travis YouTube channels:Little Music Boxes: youtube.com/channel/UCJ_g-bsCUD9hnFSPCeCeI3ATravis Neilson: youtube.com/user/MrTravisNeilson----------------------------------------Follow me on twitter: twitter.com/ieatwebsites
How to Show Code on Your Website using PRISM iEatWebsites 2020-04-10 | In this video you will learn how to show highlighted code on your website or web app using a library called prism.PRISM Documentation: prismjs.comPRISM Download: prismjs.com/download.htmlFollow me on twitter: twitter.com/ieatwebsites
Getting Started with GSAP (GreenSock Animation Platform) iEatWebsites 2020-03-18 | In this video you will learn the basics of GASP (GreenSock Animation Platform) and the SVGMorph plugin.- GSAP Official website: greensock.com/gsap- GSAP CDN URL: cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js- MorphSVG Plugin URL: s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.jsImages from mario.nintendo.com , images trademarks are properties of Nintendo. Follow me on Twitter: twitte.com/ieatwebsites
Add Animations to Your Website with anime.js iEatWebsites 2020-02-23 | In this video you will learn how to add animations to your website using a cool javascript library named Anime JS. - Download anime.js :animejs.com - Anime.js documentation: animejs.com - My HTML and JS code: gist.github.com/brickbones/2cc0967dbf753c4ac78f88e427b03d19 - Follow me on twitter: twitter.com/ieatwebsites
