freecodecamp学习笔记和代码 - css, html, javascript

The process of learning html, css and javascript

1. Purpose？

• 建这个仓库的主要目的是为了记录自己学习html，css和JavaScript的过程
• 目前是跟着freecodecamp里面的项目练手，仓库记录了自己完成项目的代码以及撰写的博客

2. How to use？

• 点击Blog，查看该项目的最终效果，查看能从该项目中学到什么知识
• 点击Code，获取相对应的代码

HTML, CSS

1. photo gallery

Flexbox helps you design your webpage so that it looks good on any screen size.

In this course, you’ll use Flexbox to build a responsive photo gallery webpage .

Blog | Code

2. nutrition label

Typography is the art of styling your text to be easily readable and suit its purpose.

In this course, you’ll use typography to build a nutrition label webpage . You’ll learn how to style text, adjust line height, and position your text using CSS.

Blog | Code

3. quiz

Accessibility is making your webpage easy for all people to use – even people with disabilities.

In this course, you’ll build a quiz webpage. You’ll learn accessibility tools such as keyboard shortcuts, ARIA attributes, and design best practices.

Blog | Code

3. balance sheet

You can use CSS pseudo selectors to change specific HTML elements.

In this course, you’ll build a balance sheet using pseudo selectors. You’ll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage.

Blog | Code

4. picasso painting

In this course, you’ll learn how to use some intermediate CSS techniques by coding your own Picasso painting webpage. You’ll learn about SVG icons, CSS positioning, and review other CSS skills you’ve learned.

Blog | Code

JavaScript

1. basic grammar

learn fundamental programming concepts in JavaScript. Starting with basic data structures like numbers and strings. Then you’ll learn to work with arrays, objects, functions, loops, if/else statements, and more.

Blog | Code