[#Webdesign #Coding] Setting Up a Windows PC For Web Development: WSL, Git, Node.js, Docker, Oh My Zsh, & MySQL

Setting Up a Windows PC For Web Development: WSL, Git, Node.js, Docker, Oh My Zsh, & MySQL


By LearnWebCode
Published: Dec 06, 2021


LearnWebCode Let’s walk through setting up a Windows PC for web development, and use Windows Subsystem For Linux as the backbone.

My premium courses: https://learnwebcode.com/courses/

Finished product Node.js code: https://gist.github.com/LearnWebCode/…

Finished product Docker Compose file:
https://gist.github.com/LearnWebCode/…

    CONTENTS:

  • 0:00 Intro
  • 1:03 Windows Subsystem For Linux
  • 5:24 Just For Fun: cmatrix
  • 6:20 VS Code Integration
  • 8:57 Oh My Zsh
  • 11:00 Git
  • 15:52 Windows Terminal
  • 20:40 Node.js
  • 24:50 Docker
  • 33:18 Upgrading From WSL1 To WSL2
  • 38:25 MySQL

[#WebDesign #Coding] Learn HTML & CSS – Full Course for Beginners

Learn HTML & CSS – Full Course for Beginners

low noopener noreferrer">
By freeCodeCamp.org
Published: Sep 14, 2022


freeCodeCamp.org Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges. Go here for the interactive browser version: https://scrimba.com/links/htmlandcss

This course was created by Per Harald Borgen, the co-founder and CEO of Scrimba. You can follow Per on Twitter here: https://twitter.com/perborgen.

    Contents

  • 0:00:00 Introduction
    Build and deploy your first website

  • 0:01:32 1: Welcome to the HTML & CSS Course
  • 0:04:12 2: HTML Tags
  • 0:07:33 3: Write a news article
  • 0:09:43 4: The image tag
  • 0:14:43 5: Nesting
  • 0:17:33 6: Internet superpowers – Change the BBC news!
  • 0:22:34 7: Interactive elements – Button
  • 0:24:37 8: Interactive elements – input tags — Experiment with input types 100%
  • 0:29:37 9: Let’s build Google!
  • 0:33:28 10: Aside – Anchor tags
  • 0:38:04 11: Add an anchor tag to Google.com
  • 0:39:43 12: Proper document structure
  • 0:45:29 13: Aside: Lists
  • 0:49:27 14: Build a personal Website
  • 0:58:15 15: Deploy your Personal Website
  • 1:01:30 16: HTML Recap
    Build a Google.com clone

  • 1:03:06 1: Let’s learn CSS!
  • 1:03:53 2: Write your first lines of CSS!
  • 1:08:10 3: Write your first lines of CSS! Solution
  • 1:11:46 4: Let’s destroy wikipedia – recording
  • 1:13:43 5: Link to the CSS file
  • 1:16:22 6: Set the width of the elements
  • 1:18:31 7: Inline vs block elements
  • 1:20:49 8: Margin top
  • 1:22:05 9: Divs rule the world
  • 1:24:10 10: CSS classes
  • 1:28:07 11: Aside – Learn margins via flags
  • 1:34:04 12: Add space between our elements
  • 1:35:12 13: Aside – Centering with margins
  • 1:38:39 14: Centering our content
  • 1:40:01 15: Aside – padding
  • 1:45:23 16: Aside – Border and border-radius
  • 1:50:33 17: Aside challenge – style Twitter button
  • 1:55:36 18: Fix the input field
  • 2:00:22 19: Center the button
  • 2:02:42 20: Style the button
  • 2:07:13 21: Why we can’t have two block-level buttons
  • 2:11:42 22: Aside – Flexbox
  • 2:15:25 23: Centering both buttons with flexbox
  • 2:18:20 24: Google clone recap
    Build a Digital Business Card

  • 2:20:27 1: Building your digital business card
  • 2:21:00 2: Fix the image path
  • 2:23:56 3: Add alt attribute
  • 2:28:24 4: Make the image smaller
  • 2:29:40 5: Add a border and padding
  • 2:33:30 6: Aside – flexbox child containers
  • 2:37:11 7: Flex item containers
  • 2:38:51 8: Add a utility class
  • 2:42:04 9: Justify the items
  • 2:44:13 10: Center the card
  • 2:46:13 11: Aside – inheritance
  • 2:50:31 12: Center the text via inheritance
  • 2:53:32 13: Add colors
  • 2:56:57 14: Web-safe fonts
  • 3:02:06 15: Aside – margin/padding shorthand
  • 3:06:09 16: Use the margin & padding shorthands
  • 3:07:26 17: Deploy your Digital Business Card
  • 3:12:16 18: Business Card Recap
    Build a Space Exploration Site

  • 3:14:17 1: Let’s go to space
  • 3:14:54 2: Add a background image from Unsplash
  • 3:18:54 3: Center elements and Style button
  • 3:22:12 4: Add a Google font
  • 3:26:34 5: @font-face
  • 3:28:39 6: Aside – spans
  • 3:32:37 7: Add an underline using a span
  • 3:34:27 8: Use an ID for the logo
  • 3:38:51 9: Replace the jpg with a webp
  • 3:41:25 10: Choose a color palette from an image
  • 3:44:18 11: Add the terms & conditions section
  • 3:48:17 12: Aside – text shadow
  • 3:54:17 13: Improving the readability with text shadows
  • 3:56:17 14: Space – Exploration recap
    Build a Birthday GIFt Site

  • 3:58:02 1: Let’s build a Birthday GIFt site
  • 3:59:13 2: Add basic header styling
  • 4:02:47 3: Set the colors
  • 4:04:13 4: Add shadow on text
  • 4:07:34 5: We have a problem that flexbox can fix
  • 4:10:10 6: Aside – align-items
  • 4:16:13 7: Aside – flex-direction
  • 4:20:42 8: Turn the header into a flexbox
  • 4:22:26 9: Fix date and age design
  • 4:26:36 10: Create the first gift
  • 4:31:56 11: Replace the img with a div
  • 4:36:14 12: Aside – make elements change on hover
  • 4:39:08 13: Add the hover effect
  • 4:41:17 14: Create the next GIFt
  • 4:45:39 15: Create two more GIFts
  • 4:48:15 16: Create the final GIFt
  • 4:51:38 17: Add the footer
  • 4:55:18 18: Add a background gradient
  • 4:58:46 19: Personalize the Birthday GIFt Site
  • 5:00:25 20: Use GitHub Desktop to publish your Birthday GIFt Site
  • 5:05:44 21: Deploying your Birthday GIFt Site
  • 5:06:45 22: Use VS Code to edit your Birthday GIFt
  • 5:11:36 23: GIFt site recap
    Solo Project: Hometown Homepage

  • 5:13:29 1: It’s time to go solo!
  • 5:15:47 2: Solo Project – Hometown Homepage
  • 5:19:54 3: Congrats on completing the course!

[#WebDesign #Coding] Web3 Course Walkthrough on freeCodeCamp.org (Rust, Blockchain Development, and Smart Contracts)

Web3 Course Walkthrough on freeCodeCamp.org (Rust, Blockchain Development, and Smart Contracts)


By freeCodeCamp.org
Published: Sep 21, 2022


freeCodeCamp.org We just released the beta version of our new Web3 curriculum on freeCodeCamp.org. In this video, freeCodeCamp software engineers Tom and Shaun will walk you through some of the new Web3 curriculum projects.

Learn more: https://www.freecodecamp.org/news/web…
Access the Web3 curriculum: https://web3.freecodecamp.org/web3

[#Script #Coding] CSS Tutorial – Full Course for Beginners

CSS Tutorial – Full Course for Beginners

By freeCodeCamp.org
Published: Aug 30, 2022


freeCodeCamp.org In this in-depth course, you will learn about all the key features of CSS. This is the most comprehensive CSS course we’ve published to date. So if you want to become an expert in Cascading Style Sheets, this is the course for you.

Course from Dave Gray. Check out his channel: http://youtube.com/DaveGrayTeachesCode

Course Resources: https://github.com/gitdagray/css_course

Dave’s HTML course: https://youtu.be/kUMe1FH4CHE

    Course Contents

  • (0:00:00) Intro
  • (0:01:08) Chapter 1: Start Here
  • (0:14:50) Chapter 2: Selectors
  • (0:34:41) Chapter 3: Colors
  • (0:51:13) Chapter 4: Units & Sizes
  • (1:11:56) Chapter 5: Box Model
  • (1:37:08) Chapter 6: Typography
  • (2:00:29) Chapter 7: Styling Links
  • (2:16:37) Chapter 8: List Styles
  • (2:32:31) Chapter 9: Mini Project
  • (2:45:04) Chapter 10: Display
  • (3:00:21) Chapter 11: Floats
  • (3:12:46) Chapter 12: Columns
  • (3:34:30) Chapter 13: Position
  • (3:57:53) Chapter 14: Flexbox
  • (4:21:39) Chapter 15: Grid Layout
  • (4:46:33) Chapter 16: Images
  • (5:32:40) Chapter 17: Media Queries
  • (5:58:59) Chapter 18: Card Project
  • (6:33:21) Chapter 19: Pseudo
  • (6:52:56) Chapter 20: Variables
  • (7:20:28) Chapter 21: Functions
  • (7:50:05) Chapter 22: Animations
  • (8:37:33) Chapter 23: Organization
  • (8:57:23) Chapter 24: Final Project

[#Webdesign #Coding] Web Scraping with Puppeteer & Node.js: Chrome Automation

Web Scraping with Puppeteer & Node.js: Chrome Automation

By LearnWebCode
Published: Jul 26, 2021


LearnWebCode My premium courses: https://learnwebcode.com/courses/

    CONTENTS:

  • 0:00 Intro
  • 1:20 Installing Puppeteer
  • 4:29 Taking a Screenshot
  • 7:09 Scraping Text From HTML
  • 15:34 Saving Images to Hard Drive
  • 21:45 Clicking a Button
  • 25:16 Filling Out a Form
  • 30:51 Scheduling a Task to Repeat

The practice URL I’m working with in the video: https://learnwebcode.github.io/practi…

My finished example code: https://gist.github.com/LearnWebCode/…

Follow me for updates on new videos or projects:
Instagram: https://www.instagram.com/javaschiff/
Twitter: https://twitter.com/learnwebcode
Facebook: https://www.facebook.com/Brad-Schiff-…
Twitch: https://www.twitch.tv/learnwebcode

[#Script #Coding] Instant Preview for Image Upload Applications JavaScript Tutorial

Instant Preview for Image Upload Applications JavaScript Tutorial

By Adam Khoury
Published: Jan 20, 2022


Adam Khoury In this video Adam demonstrates how to provide instant image preview that you can give your users in any upload applications. There may be an occasion where you want to allow the user to see or manipulate the object before it is uploaded to your server.

[#Script #Coding] NEW!! Web Developer Roadmap 2022 | Ultimate Guide To Starting A Career In Web Development

NEW!! Web Developer Roadmap 2022 | Ultimate Guide To Starting A Career In Web Development


By codeSTACKr
Published: Dec 18, 2021


codeSTACKr FREE 2022 Web Development Roadmap: https://courses.codestackr.com/2022-web-dev-roadmap
All of the resource links from the video are in the roadmap.


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

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

“Ten++ Ways to Make Money as a Developer” eBook: http://bit.ly/MakeMoney-ebook
_____________________________________

With so many web dev technologies and languages out there, it can be overwhelming to get started in web development. And if you are already a web developer you may find it difficult to keep up with new technology and trends. This web development roadmap will help guide you in deciding what technology and languages you should learn about in 2022 and beyond. We will cover all of the most popular languages and technology, focusing on full-stack web development. We will also look at the current trends to look out for in 2022. There’s no better time to start than now!

If you are just starting out or even thinking about starting a career in web development, look no further. This ultimate roadmap and complete guide will help you understand what you should be focusing your time on.



    Timestamps

  • 00:00 – Intro
  • 01:43 – Top Skill to Learn
  • 02:29 – How The Internet Works
  • 02:49 – Basic Tools
  • 04:37 – Coding Languages
  • 06:57 – Terminal
  • 07:17 – Version Control
  • 07:48 – Hosting & Deployment
  • 08:25 – Front-end Developer
  • 08:41 – Back-End Development with Node.js
  • 09:18 – APIs
  • 10:03 – Databases
  • 12:13 – JavaScript Frameworks
  • 13:57 – CSS Frameworks
  • 14:22 – Authentication
  • 14:50 – Content Management Systems (CMS)
  • 15:46 – Full-stack Developer
  • 16:11 – Soft Skills & Personal Development
  • 16:55 – Other, Optional Tech
  • 21:08 – Never Stop Learning & Never Give Up!!


[READ MORE]

[#Script #Coding] Learn HTML – Full Tutorial for Beginners (2022)

Learn HTML – Full Tutorial for Beginners (2022)


By freeCodeCamp.org
Published: Mar 08, 2022


freeCodeCamp.org Learn HTML in this complete course for beginners. This is an all-in-one beginner tutorial to help you learn web development skills. This course teaches HTML5.
Dave Gray created this course. Check out his channel: https://www.youtube.com/davegrayteachescode
Code: https://github.com/gitdagray/html_course

    Course Contents

  • (00:00:00) Intro
  • (00:00:55) Chapter 1 – Getting Started
  • (00:20:13) Chapter 2 – Head Element
  • (00:29:02) Chapter 3 – Text Basics
  • (00:49:45) Chapter 4 – List Types
  • (00:59:55) Chapter 5 – Add Links
  • (01:30:38) Chapter 6 – Add Images
  • (02:00:58) Chapter 7 – Semantic Tags
  • (02:24:53) Chapter 8 – Create Tables
  • (02:40:42) Chapter 9 – Forms & Inputs
  • (03:25:16) Chapter 10 – HTML Project

[#Webdesign #Coding] Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)

Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)

By LearnWebCode
Published: Aug 26, 2020


LearnWebCode 0:00 Intro
1:07 Getting Started
3:09 Version 5
5:01 Basic Classes
9:28 Columns
14:08 Responsive Classes
19:16 Bootstrap JS
21:44 Opinion: Should You Use Bootstrap?

Playlist for this full series: https://www.youtube.com/playlist…

[#Script #Coding] HTML & CSS Project Tutorial – Build a Recipes Website

HTML & CSS Project Tutorial – Build a Recipes Website

By freeCodeCamp.org
Published: Sep 28, 2021


freeCodeCamp.org In this HTML and CSS project tutorial, you will improve your HTML and CSS skills by building a recipes website.

[READ MORE]

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