HTML-and-CSS-Projects

This is a repository for all the files and projects of the Skillshare classes I took in July 2022.

Basics of Web Design Layout:

• Sticky Positioning: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/sticky%20positioning/sticky-positioning.html

• Absolute Positioning: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/absolute%20positioning/absolute-positioning-practice.html

  • Pseudo-class: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/absolute%20positioning/example-5-pseudo-classes-and-absolute-positioning.html

• Calc function example: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/calc%20function/calc-function-example.html

• Fixed Positioning: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/fixed%20positioning%20practice/fixed-positioning.html

• Floating Property: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/floating%20property/%20floating-practice.html

• REVIEW:

  • Box Model and Box Sizing: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/review%20of%20concepts/box%20model/box-model-sizing-margin-border-and-padding-practice.html
  • Display Types: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/review%20of%20concepts/display%20types/display-types-practice.html
  • Positioning: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/review%20of%20concepts/positioning%20(static,%20fixed,%20absolute,%20relative,%20sticky)/positioning-practice.html
  • Rows of Floats: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/review%20of%20concepts/rows%20of%20floats/rows-of-floats-practice.html
  • Transform X and Y: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/review%20of%20concepts/transform%20translate%20x%20and%20y/transform-translate-xy-practice.html

• CLASS PROJECT:

  • My Code: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/class%20project/web-design-layout.html
  • Example code, The Gang: https://maryseph.github.io/HTML-and-CSS-Projects/basics-of-web-design-layout/class%20project/the-gang/the-gang.html

Cartoon Hero:

• https://maryseph.github.io/HTML-and-CSS-Projects/cartoon-hero-from-Hand-Code-Your-First-Website-HTML-CSS-Basics/index-v2-2columns.html

Hand-Code Your First Website:

• CSS Styles: https://maryseph.github.io/HTML-and-CSS-Projects/hand-code-your-first-website_HTML+CSS-basics/styles-sheet.html
• Test Page: https://maryseph.github.io/HTML-and-CSS-Projects/hand-code-your-first-website_HTML+CSS-basics/test.html

Portfolio Website (HTML):

• https://maryseph.github.io/HTML-and-CSS-Projects/portofolio-website-from-Introduction-to-HTML-Build-a-Portfolio-Website/index.html

Understanding Web Development:

• Test: https://maryseph.github.io/HTML-and-CSS-Projects/understanding-web-devo%20-skillshare-class/index.html#
• Practice: https://maryseph.github.io/HTML-and-CSS-Projects/understanding-web-devo%20-skillshare-class/NewPage.html

Class Notes (PDF format):

• https://maryseph.gumroad.com/l/frontend-web-devo