Best CSS Tool for VS Code!! Mirror Editing
By codeSTACKr
Published: Feb 08, 2023“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZVS Code Tip of the Day
Here’s one really cool feature of this extension. The feature is called CSS Mirror Editing.
In the dev tools, make any style changes you want. You’ll see them happen in real-time and the updates will be saved automatically to your stylesheet.
This is one of the coolest things I’ve seen in a while!
The Microsoft Edge Tools for Visual Studio Code extension allows you to use the Developers Tools right inside VS Code.”
Tag: css
[#Script #Coding] Create a Design System with CSS – Web Development Course
Create a Design System with CSS – Web Development Course
By freeCodeCamp.org
Published: Feb 07, 2022“
Learn how to create your own design system while building a Space Travel Website with CSS guru Kevin Powell. You can also follow the interactive Scrimba version of this course by clicking here: https://scrimba.com/learn/spacetravel
Code on GitHub: https://github.com/kevin-powell/space-tourism
In this course you will first learn how to build your own design system and then learn how to implement the entire website with the design system using CSS, HTML, and JavaScript.
At the end, you will have a neat project to add your portfolio in addition to have sharpened your CSS and design skills.
The design for the course has been created by FrontendMentor. You can get the design files from their page: https://www.frontendmentor.io/challen…
Course Contents
- (0:00:00) The design system
- (2:04:12) The homepage
- (3:02:25) Navigation
- (4:17:48) The destination page
- (5:29:33) The tabs
Twitter links:
- Follow Kevin Powell on Twitter: https://twitter.com/kevinjpowell
- Follow FrontendMentor on Twitter: https://twitter.com/frontendmentor
- Follow Scrimba on Twitter: https://twitter.com/scrimba
YouTube links:
- Kevin Powell: https://www.youtube.com/kepowob
- Scrimba: https://www.youtube.com/c/Scrimba
”
[#Script #Coding] 12 ways to center a div
12 ways to center a div
By codeSTACKr
Published: Aug 30, 2022“
Watch the full explanation video: https://youtu.be/kphds-1V9o8
Become A VS Code SuperHero Today: https://vsCodeHero.comGet my FREE VS Code Cheat Sheet: https://courses.codestackr.com/vs-cod…
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Why is it so hard to center a div in CSS? It used to be, but now we have so many options!
Here are 12 ways to center a div.
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] How to center a div 12 ways!!
How to center a div 12 ways!!
By codeSTACKr
Published: Aug 27, 2022“
Why is it so hard to center a div in CSS? It used to be, but now we have so many options!
Here are 12 ways to center a div.
Become A VS Code SuperHero Today: https://vsCodeHero.com
Get my FREE VS Code Cheat Sheet: https://courses.codestackr.com/vs-cod…
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Timestamps
- 00:00 – Intro
- 00:11 – Method 1 (Don’t use!!)
- 00:18 – Basic Setup
- 00:26 – Method 2
- 00:54 – Method 3
- 01:06 – Method 4
- 01:15 – Method 5
- 01:29 – Method 6
- 01:40 – Method 7
- 01:45 – Method 8
- 01:54 – Method 9
- 02:00 – Method 10
- 02:06 – Method 11
- 02:08 – Method 12
”
[#WebDesign #Coding] Learn HTML & CSS – Full Course for Beginners
Learn HTML & CSS – Full Course for Beginners
By freeCodeCamp.org
Published: Sep 14, 2022“
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
Code
- Interactive version: https://scrimba.com/links/htmlandcss
- GitHub repo: https://github.com/scrimba/learn-html…
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.
Tools used:
- Netlify: https://www.netlify.com/
- VS Code: https://code.visualstudio.com/
- GitHub Desktop: https://desktop.github.com/
- Figma: https://www.figma.com/
- Coolors: https://coolors.co/
- Google Fonts: https://fonts.google.com/
- 1001 Fonts: https://www.1001fonts.com/
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!
”
[#Script #Coding] CSS Tutorial – Full Course for Beginners
CSS Tutorial – Full Course for Beginners
By freeCodeCamp.org
Published: Aug 30, 2022“
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
”
[#Script #Coding] Do You Need To Know Web Dev To Become A Web3 Developer? With Hashlips
Do You Need To Know Web Dev To Become A Web3 Developer? With Hashlips
By codeSTACKr
Published: Mar 25, 2022“
Go check out Daniel aka Hashlips YouTube channel for more NFT/Web3 content: https://www.youtube.com/c/HashLipsNFT
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://youtu.be/XiQ9rjaa2OwToday I have a special guest on the channel, Daniel aka Hashlips. We discuss whether we think you need to be a web developer before becoming a web3 developer. Knowing web development technologies like HTML, CSS, JavaScript, and React will give you a big advantage when learning web3 technologies like Solidity. Jumping right into learning web3 without knowing the basics could be very frustrating.
Here are some videos that could be helpful:
- HTML: https://youtu.be/XiQ9rjaa2Ow
- HTML: https://youtu.be/ZZRTUpRzETo
- CSS: https://youtu.be/Tfjd5yzCaxk
- CSS: https://youtu.be/9JnRBvcKWbw
- JavaScript: https://youtu.be/d5ob3WAGeZE
”
[#Webdesign #Coding] Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)
Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)
By LearnWebCode
Published: Aug 26, 2020“
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…
Follow me for updates on new episodes:
- Instagram: https://www.instagram.com/javaschiff/
- Twitter: https://twitter.com/learnwebcode
- Facebook: https://www.facebook.com/Brad-Schiff-…
- Twitch: https://www.twitch.tv/learnwebcode
Check out my premium courses:
https://www.udemy.com/user/bradschiff/”
[#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
In this HTML and CSS project tutorial, you will improve your HTML and CSS skills by building a recipes website.
- Code: https://github.com/john-smilga/html-css-simply-recipes
- Course from John Smilga of Coding Addict. Check out his channel: https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA
- Starter Project video referenced in tutorial: https://www.youtube.com/watch?v=UDdyGN…
[#Script #Coding] WAPG 3 Sprite Animation Programming CSS JavaScript
WAPG 3 Sprite Animation Programming CSS JavaScript
By Adam Khoury
Published: Dec 07, 2016
Lesson Code: http://www.developphp.com/video/JavaScript/WAPG-4-Script-Based-Animation-Programming-JavaScript-CSS-Tutorial
Learn to program script-based animations with JavaScript using requestAnimationFrame, cancelAnimationFrame, setInterval or setTimeout. Using timing methods provides a greater level of control over how things animate on the screen and is ideal for video game development and othe… [READ MORE]