Category: Scripting and Coding

Various coding languages are the building blocks of apps, The Internet, and the Metaverse. We explore tutorials of scripting and coding.

[#Script #Coding] HTML & Coding Introduction – Course for Beginners

Posted on by Eric Brooks

HTML & Coding Introduction – Course for Beginners

By freeCodeCamp.org
Published: Feb 21, 2023

“
freeCodeCamp.org Learn the basics of HTML and how to begin coding in this course for beginners.

Are you interested in coding but have never tried it before? Are you curious about how to create your own website or app? If so, then this video course is for you!

Course developed by @AniaKubow
Full course: http://codewithania.com/

    Contents

  • (0:00:00) Introduction
  • (0:01:34) What is a code editor?
  • (0:03:08) Code editor options
  • (0:03:52) Files files files
  • (0:07:27) HTML Introduction
  • (0:09:27) HTML – what is it exactly?
  • (0:11:53) HTML Syntax
  • (0:17:08) Saving files in your code editor
  • (0:18:19) HTML Anatomy
  • (0:22:50) Headings
  • (0:24:49) Paragraphs
  • (0:26:04) HTML headings, paragraphs and emphasis
  • (0:32:20) Indenting code in HTML
  • (0:34:03) HTML lists
  • (0:38:54) HTML links
  • (0:43:49) Navigating Pages
  • (0:51:20) Images in HTML
  • (0:55:15) Creating tables using HTML
  • (1:03:27) Introducing the Div
  • (1:05:09) Semantic sectioning
  • (1:07:39) Table Tennis Leaderboard: Project prep
  • (1:09:30) Table Tennis Leaderboard: Starting out our project
  • (1:12:44) Table Tennis Leaderboard: table rows and lists
  • (1:16:44) Table Tennis Leaderboard: Sectioning and the figure element
  • (1:25:27) HTML forms
  • (1:26:52) The various input element types in HTML
  • (1:33:17) HTML Inputs exercise 1
  • (1:40:40) HTML Inputs exercise 2
  • (1:43:55) HTML Inputs exercise 3
  • (1:48:57) The select dropdown in HTML
  • (1:54:38) The Inspect tool
  • (1:56:51) Using the data attribute in HTML
  • (1:59:15) Commenting out code
  • (2:01:29) What’s next?

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…

”

[#Webdesign #Coding] Next.js Tutorial For Beginners

Posted on by Eric Brooks

Next.js Tutorial For Beginners

By LearnWebCode
Published: Jan 24, 2023

“
LearnWebCode In this video you learn everything you need to get started with Next.js! Join my courses at the lowest possible price: https://learnwebcode.com/courses/

GitHub Repo To Borrow Code From: https://github.com/LearnWebCode/nextjs-youtube-demo

My other video where you can learn the basics of React: https://www.youtube.com/watch?v=70fadMRqnBo

    CONTENTS:

  • 0:00 Intro
  • 0:42 Getting Started
  • 4:23 Linking Pages
  • 9:36 App-Wide Code
  • 13:53 Navigation
  • 16:40 Blog Feature
  • 19:16 getStaticProps
  • 24:10 URL Parameters
  • 29:30 Module / Component CSS
  • 32:52: Dev & Production Modes
  • 35:40 Incremental Static Regeneration
  • 41:28 getServerSideProps
  • 47:02 Deploying To Live Site

”

[#Script #Coding] 3 Ways to Code a BuzzFeed Clone (JavaScript + TypeScript + JSONServer + Database + API + Node.js)

Posted on by Eric Brooks

3 Ways to Code a BuzzFeed Clone (JavaScript + TypeScript + JSONServer + Database + API + Node.js)

By freeCodeCamp.org
Published: Feb 08, 2023

“
freeCodeCamp.org Learn how to build a Buzzfeed Clone in JavaScript, followed by a version in React using JSON server for mimicking an API, and then build a TypeScript Buzzfeed Clone with a mini backend using Node.js to communicate with a Database.

Final code:
https://github.com/kubowania/…
https://github.com/kubowania/b…
https://github.com/kubowania/bu…

Course developed by @AniaKubow

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

”

[#Script #Coding] Best VS Code Extension EVER!!

Posted on by Eric Brooks

Best VS Code Extension EVER!!

By codeSTACKr
Published: Dec 30, 2022

“
codeSTACKr Become A VS Code SuperHero Today: https://vsCodeHero.com

Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

Have you ever tried to change a word everywhere in VS Code that has multiple case variations?

Some are lowercase, some use camel case, and some are all uppercase. It’s a nightmare!

The VS Code extension Multiple cursor case preserve makes it easy!

Let’s say I want to change all of these variables from customer to client.

After you’ve installed the extension, put your cursor on the word you want to change and press Ctrl+Shift+L to select all occurrences of the word.

And just rename it! It will preserve the case of each selection.

You’re welcome!

”

[#Script #Coding] Computer & Technology Basics Course for Absolute Beginners

Posted on by Eric Brooks

Computer & Technology Basics Course for Absolute Beginners

By freeCodeCamp.org
Published: Oct 06, 2021

“
freeCodeCamp.org Learn basic computer and technology skills. This course is for people new to working with computers or people that want to fill in some gaps about their computer knowledge.

This course was developed by GCF Global. Check out their YouTube channel: https://www.youtube.com/c/Gcflearnfre…
GCF Global offers more free learning resources at their website: https://www.GCFLearnFree.org

    Course Contents

  • (00:00:55) Introduction
  • (00:00:55) What Is a Computer?
  • (00:03:37) Buttons and Ports on a Computer
  • (00:06:01) Basic Parts of a Computer
  • (00:08:47) Inside a Computer
  • (00:10:58) Getting to Know Laptop Computers
  • (00:12:55) Understanding Operating Systems
  • (00:14:21) Understanding Applications
  • (00:15:53) Setting Up a Desktop Computer
  • (00:18:47) Connecting to the Internet
  • (00:22:41) What Is the Cloud?
  • (00:25:06) Cleaning Your Computer
  • (00:29:02) Protecting Your Computer
  • (00:32:17) Creating a Safe Workspace
  • (00:36:25) Internet Safety: Your Browser’s Security Features
  • (00:38:36) Understanding Spam and Phishing
  • (00:43:27) Understanding Digital Tracking
  • (00:45:39) Windows Basics: Getting Started with the Desktop
  • (00:47:40) Mac OS X Basics: Getting Started with the Desktop
  • (00:52:26) Browser Basics

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…

”

[#Script #Coding] Top 10 VS Code Keyboard Shortcuts You Must Learn to Use!

Posted on by Eric Brooks

Top 10 VS Code Keyboard Shortcuts You Must Learn to Use!

By codeSTACKr
Published: Feb 13, 2023

“
codeSTACKr Become A VS Code SuperHero Today: https://vsCodeHero.com

Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

    VS Code Tip of the Day
    Here are the top 10 VS Code keyboard shortcuts you must learn to use!

  • Number 10: Control + P to quickly open files.
  • Number 9: Control + K S to save all open files.
  • Number 8: Control + / on to quickly comment out code.
  • Number 7: Control + B to toggle the sidebar.
  • Number 6: Control + D to select the next occurrence of the current selection.
  • Number 5: Control + Shift + L to select all occurrences of the current selection.
  • Number 4: Alt + Up/Down Arrow to move lines up or down.
  • Number 3: Alt + Shift + Up/Down Arrow to duplicate lines up or down.
  • Number 2: F2 to rename a symbol and all occurrences.
  • Number 1: Control + Shift + P to open the command palette, or did you know you can just press just F1?!?

”

[#Script #Coding] A Visual IDE for React?!? The Future of Web Development

Posted on by Eric Brooks

A Visual IDE for React?!? The Future of Web Development

By codeSTACKr
Published: Jan 02, 2023

“
codeSTACKr Download Codux Free at https://codux.hopp.to/codeSTACKr

Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you’re drawing on a canvas.

You’ll see and have access to the code right inside Codux, but it shouldn’t replace your existing IDE. In fact, the goal of Codux is not to replace your existing IDE, but to turbo charge your React workflow by giving you the ability to visually edit as well. As you make changes in Codux you’ll see the updates happen in real time in your existing IDE.

Codux supports any React project built using TypeScript with styling in CSS, Sass, or CSS Modules, and has full Git integration.

Another great feature is the ability to develop components in isolation. That’s generally how we build in React. We build components. But we usually can’t see each component rendered in isolation. With Codux, you can work on each component individually, see each component in various states, then bring them all together where needed.

Because this is a graphical user interface, even someone with little to no React experience can easily update and edit components visually and be confident that the updates reflected in the code will be accurate.

Just like in your browser’s dev tools, you’ll see all of the CSS styles for each element and you can edit them. This makes memorizing every CSS property name and value a thing of the past. Every property is visually available to edit. And these changes take place immediately in your code base.

To get started, you can import almost any existing React project or create a new project from scratch.

Become A VS Code SuperHero Today: https://vsCodeHero.com

Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

Timestamps

  • 00:00 – Intro
  • 02:25 – Building a YouTube Clone from scratch using Codux
  • 02:42 – Create a new project
  • 05:51 – Building the header component
  • 07:23 – Building the side menu bar component
  • 08:19 – Building the filters bar component
  • 09:33 – Building the video card component
  • 10:42 – Defining TypeScript props for your video card component
  • 11:39 – Putting it all together in our App component
  • 13:20 – Run the application locally to test
  • 13:34 – Giving the YouTube clone a new name
  • 13:49 – Commit our changes and publish to GitHub

    • ”

    [#Script #Coding] Best VS Code Extension for Tailwind CSS

    Posted on by Eric Brooks

    Best VS Code Extension for Tailwind CSS

    By codeSTACKr
    Published: Jan 06, 2023

    “
    codeSTACKr Become A VS Code SuperHero Today: https://vsCodeHero.com

    Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

    Just like the built-in feature of VS Code that lets you fold lines of code. The Inline Fold extension lets you fold code… well, Inline.

    Let’s look at a couple of use cases:
    – I love using Tailwind CSS! But a lot of developers hate how cluttered it makes your markup look.
    – Just install the Inline fold extension and you’re markup will look clean again.
    – From the command palette, use the “Inline fold: Toggle” command to fold and unfold your class names.
    – Alternatively, just move your cursor to those lines and it will automatically unfold so that you can easily edit them.
    – Another use case is when you have SVG’s in your markup.
    – You’ll have to go into your settings and change the Regex match statement.
    – After that, all of the SVG’s in your markup will be folded, giving you a much cleaner experience.

    ”

    [#Script #Coding] Pimp my Cursor – VS Code Style

    Posted on by Eric Brooks

    Pimp my Cursor – VS Code Style

    By codeSTACKr
    Published: Feb 03, 2023

    “
    codeSTACKr VS Code Tip of the Day
    I get tons of questions about my vs code cursor settings. So, let’s take a look..

    Become A VS Code SuperHero Today: https://vsCodeHero.com

    Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

    ”

    [#AfterEffects #Video] Transform yourself into a TITAN with Unreal Engine (ATTACK ON TITAN)

    Posted on by Eric Brooks

    Transform yourself into a TITAN with Unreal Engine (ATTACK ON TITAN)

    By Cinecom.net
    Published: Mar 25, 2022

    “
    Cinecom.net Learn how to become a Titan from the Anime series Attack on Titan. Use Unreal Engine, CharacterCreator and After Effects to create Anime Visual Effects.

    Find your Video Assets Download Plan
    http://storyblocks.com/Cinecom

    Mixamo Converter
    https://cinecom.info/MixamoConverter

    More Unreal Engine Tutorials
    https://www.youtube.com/playlist…

    More Adobe After Effects Tutorials
    https://www.youtube.com/playlist?list…

    Read More
    https://www.cinecom.net/unreal-engine…

    MERCH
    https://cinecom.net/merch

    ”

    Proudly powered by WordPress
    Creative Commons License
    EricBrooks.Com® is licensed under a Creative Commons License.

    Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.

    Connect