HTML & Coding Introduction – Course for Beginners
By freeCodeCamp.org
Published: Feb 21, 2023“
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…
”
Tag: html
[#Script #Coding] Data Visualization with D3 – Full Course for Beginners [2022]
Data Visualization with D3 – Full Course for Beginners [2022]
By freeCodeCamp.org
Published: May 05, 2022“
Learn data visualization with D3.js. D3 is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
This course is an edited collection of live streams.
Curran Kelleher teaches this course. Check out his channel: https://www.youtube.com/channel…
Course Contents
- (00:00:00) Introduction
- (00:06:16) SVG Fundamentals
- (01:05:11) Pseudo Visualizations
- (02:16:26) Sol LeWitt in Vanilla JS
- (03:32:31) Sol LeWitt in D3
- (05:08:31) D3 Selections
- (06:43:11) JavaScript Modules & Build Tools
- (08:04:07) Productizing a Codebase
- (10:25:28) Scatter Plot
- (11:56:28) Reusable Charts
- (13:28:27) Dynamic Charts
- (15:07:37) Charts with Menus
- (16:35:23) Quantitative and Categorical
- (18:17:35) Closing the Series
”
[#Webdesign #Coding] WordPress Block Themes And Full Site Editing: Explanation for Developers
WordPress Block Themes And Full Site Editing: Explanation for Developers
By LearnWebCode
Published: Mar 24, 2022“
Let’s learn about full site editing and block themes in WordPress! My premium courses and coupons: https://learnwebcode.com/courses/
CONTENTS:
- 0:00 Intro
- 11:30 Creating a Block Theme
- 31:29 Where Do We Begin?
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] 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] Learn HTML – Full Tutorial for Beginners (2022)
Learn HTML – Full Tutorial for Beginners (2022)
By freeCodeCamp.org
Published: Mar 08, 2022“
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_courseCourse 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
”
[#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
”
[#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…
”
