css Archives - WHUZZUP!

[#Script #Coding] Best CSS Tool for VS Code!! Mirror Editing

Posted on Wednesday February 8, 2023Wednesday February 8, 2023 by Eric Brooks

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/A9CnsVzzkZ

VS 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.

[READ MORE]

”

[#Script #Coding] Create a Design System with CSS – Web Development Course

Posted on Thursday February 2, 2023Thursday February 2, 2023 by Eric Brooks

Create a Design System with CSS – Web Development Course

opener noreferrer">

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

[READ MORE]

”

[#Script #Coding] 12 ways to center a div

Posted on Saturday December 31, 2022Monday January 2, 2023 by Eric Brooks

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.com

Get 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

[READ MORE]

”

[#Script #Coding] How to center a div 12 ways!!

Posted on Saturday December 10, 2022Monday December 12, 2022 by Eric Brooks

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

[READ MORE]

”

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

Posted on Monday October 17, 2022Monday October 17, 2022 by Eric Brooks

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!

[READ MORE]

”

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

Posted on Saturday October 15, 2022Saturday October 15, 2022 by Eric Brooks

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

[READ MORE]

”

[#Script #Coding] Do You Need To Know Web Dev To Become A Web3 Developer? With Hashlips

Posted on Wednesday May 4, 2022Friday July 29, 2022 by Eric Brooks

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/XiQ9rjaa2Ow

Today 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

[READ MORE]

”

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

Posted on Saturday April 16, 2022Sunday April 17, 2022 by Eric Brooks

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/

[READ MORE]

”

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

Posted on Thursday March 17, 2022Friday March 18, 2022 by Eric Brooks

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…

[READ MORE]

”

[#Script #Coding] WAPG 3 Sprite Animation Programming CSS JavaScript

Posted on Thursday July 13, 2017Friday July 14, 2017 by Eric Brooks

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]

”