Complete CSS: Styling Your HTML Page with Visual Studio Code - Beginner's Guide
👩💻 Dive into the world of web design with our latest tutorial on CSS (Cascading Style Sheets)! Perfect for beginners, this video guides you through the process of styling an HTML page using Visual Studio Code. 🌸
🔹 What You'll Learn:
Setting up a basic HTML page and understanding its structure.
Incorporating CSS to transform the appearance of your webpage.
Using inline, internal, and external CSS for diverse styling approaches.
Creating responsive designs with CSS for optimal mobile and desktop viewing.
Understanding the CSS box model, including padding, borders, and margins.
Utilizing various selectors, classes, and IDs for targeted styling.
Implementing best practices for text styling and web accessibility.
Employing advanced CSS techniques for responsive images and background styles.
Managing your project with source control and GitHub.
🖥️ Key Highlights:
Real-time coding examples in Visual Studio Code.
Tips for efficient coding and maintaining a DRY (Don't Repeat Yourself) codebase.
Insights into CSS specificity and the importance of order in your stylesheet.
Techniques for ensuring high-contrast and readable text for all users.
Practical steps for adding images and ensuring they're responsive and accessible.
Setting up your project repository on GitHub and making it public.
📚 Perfect for: Beginners in web development, students, and anyone looking to enhance their HTML pages with CSS.
🔗 Resources and More: Visit our website for additional resources, code snippets, and follow-up tutorials to take your web development skills to the next level!
👍 Like, Share, and Subscribe: Enjoyed this tutorial? Like and share this video, and subscribe to our channel for more coding tutorials, tips, and industry insights!
#CSS #WebDesign #VisualStudioCode #HTML #WebDevelopment #BeginnerTutorial #Coding
This is part of a video series showing how to code an artist portfolio website from scratch and publish it with a custom domain on the web. No coding experience necessary.
0:00 - CSS Crash Course
0:17 - Set Up Project in Visual Studio Code
1:14 - Create index.html
2:37 - CSS Introduction
3:15 - Inline Styles
4:45 - Style Block in the head
6:00 - External Stylesheet
6:54 - Link stylesheet in the head
7:40 - Initialize Git Repository
8:36 - CSS Syntax
10:47 - Relative Units
11:55 - CSS Specificity
12:40 - Add a CSS class
13:50 - Accessible Font Color Contrast
14:58 - Hexadecimal Colors
17:05 - RGB Colors
18:42 - CSS Comments
19:32 - CSS Box Model
23:26 - Box Sizing Universal Selector
24:59 - Styling Text
27:39 - IDs
28:50 - Borders, Padding, Margin Shorthand Notation
30:20 - DRY - Do Not Repeat Yourself
32:00 - Body Background
32:55 - Center on page with auto margin
34:33 - Link Styling
37:57 - Responsive Images
41:29 - Background Images
43:55 - Git Commit and GitHub Sync
45:23 - Set Up GitHub Pages
46:24 - Fix Background Image on GitHub
Artist Portfolio Website Video Series
1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap - • Free Domain and Web Hosting with GitH...
2 - Enforce HTTPS with GitHub Pages and Namecheap - • Enforce HTTPS in GitHub Pages with Na...
3 - Setup Visual Studio Code with GitHub Integration - • Visual Studio Code with GitHub Integr...
4 - Basic HTML Crash Course and Page Structure - • HTML & GitHub Basics with Visual Stud...
5 - Basic CSS Crash Course - • Complete CSS: Styling Your HTML Page ...
6 - CSS Flexbox - • Flexbox in 15 Minutes - Crash Course
7 - CSS Grid - • Flexbox vs Grid
8 - Sample Portfolio layouts in HTML and CSS (in production)
9 - Example Portfolio Site from Start to Finish (in production)
Looking for What Make Art merch?
https://teespring.com/stores/what-mak...
Other links for your browsing.
What Make Art? on Twitter:
/ whatmakeart
What Make Art? on Instagram:
/ whatmakeart
You can support this channel on Patreon! Thanks to contributions from viewers like you, What Make Art? can continue making useful art tutorials for all. If you’d like to join the supporters who help make this content possible, you can find out how at the link below. Thank you for your consideration of support!
/ whatmakeart
