By default, the browser gives your website a style that looks like the web would have looked in the late 1980s - a simple white background with black text in a default font. Now let's use CSS to start to give your sites more personality and style to them! 

Two main parts to CSS: selectors and rules. The selector picks which part of HTML you want to style, then the rules tell the HTML how to look.

Sample Music Blog website code

• CSS Animation Effects | Html CSS Only

• Navbar CSS Tutorial

• How to Make a Cut-out Design Effect with CSS Blend Modes

• How to Make Rotate Text in CSS

Recmended for those needing more help with CSS and HTML: Do everything in the CSS Beginner Tutorial from Applying CSS to Putting It All Together as well as The HTML Intermediate Tutorial from Span and Div to Sectioning. Then use those to change and update your websites to give them background colors, fonts, size and shape of text, and the margins and padding of your sites!

Also, feel free to use the https://www.w3schools.com/Css/ example site to see things in action and more interactive tutorials. As well as the RGB color names for HTML website for getting the color names for use in HTML. Here's how to load fonts from google fonts to your Glitch website how can I add a ttf file as a custom font?

How To Debug Your Code

• Understanding error messages and debugging tools (console logs, breakpoints).

• Step-by-step debugging process: isolating issues, testing hypotheses, and fixing errors.

• Utilizing debugging features in IDEs or text editors for efficient troubleshooting.

CSS Tricks

• Advanced CSS techniques: pseudo-classes, combinators, and specificity.

• Creative use of CSS properties for layout, animation, and responsive design.

• Tips for optimizing CSS code for performance and maintainability.

HTML Code Markup Validator

• Importance of validating HTML code for compliance with web standards.

• Using online validators or browser extensions to check HTML markup errors.

• Addressing common HTML validation errors and ensuring code quality.

CSS Code Markup Validator

• Validating CSS code to ensure adherence to CSS standards.

• Understanding CSS validation errors and how to resolve them.

• Tools and resources for checking and correcting CSS syntax issues.

How To Make a Split Screen Site with Sticky Sides

• Implementing a split-screen layout using CSS, HTML, and possibly JavaScript.

• Utilizing CSS positioning, flexbox, or grid for creating the split-screen effect.

• Making elements sticky to ensure they stay fixed during scrolling.

How To Create a Responsive Image Grid (Masonry Layout) with HTML and CSS - Flexbox

• Constructing a responsive image grid using Flexbox layout in CSS.

• Achieving a masonry layout for images of varying sizes and aspect ratios.

• Ensuring responsiveness by using media queries and flexible design principles.

Overlapping Layouts with CSS Grid

• Leveraging CSS Grid to create overlapping layouts and layered designs.

• Understanding grid properties to control placement, stacking, and alignment.

• Managing z-index and layering for overlapping elements effectively.

Parallax Overlapping Sections Using Sticky Positioning

• Creating parallax effects with CSS and possibly JavaScript for scrolling depth.

• Utilizing sticky positioning to overlay sections with parallax backgrounds.

• Design considerations for smooth and visually appealing parallax scrolling.

Website Inspiration - Site Inspire

• Showcasing innovative website designs for inspiration and learning.

• Analyzing design elements, color schemes, layout structures, and typography.

• Encouraging creativity while respecting usability and user experience principles.

FALL BREAK 11/22 - 11/26