FreeCodeCamp(一)学习笔记

最新推荐文章于 2024-08-15 09:46:42 发布

Joe叔叔

最新推荐文章于 2024-08-15 09:46:42 发布

阅读量6.3k

点赞数 2

分类专栏： CodeCamp 文章标签： Free Code Camp

本文链接：https://blog.csdn.net/batmaner/article/details/51835451

版权

这篇博客详细记录了在FreeCodeCamp的学习过程，涵盖了前端开发的基础知识，包括HTML5、CSS和JavaScript。内容涉及HTML元素、CSS选择器、样式元素、响应式设计以及基础的JavaScript操作，如变量声明、算术运算和选择器使用。

摘要由CSDN通过智能技术生成

FrontEndDevelopmentCertification

HTML5andCSS

Say Hello to HTML Elements

<h1>hello world</h1>
<h1>Hello world</h1>

Headline with the h2 Element


<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

Inform with the Paragraph Element

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

Uncomment HTML


<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Hello Paragraph</p>

Comment out HTML


<!--<h1>Hello World</h1>-->

<h2>CatPhotoApp</h2>

<!--<p>Hello Paragraph</p>-->

Fill in the Blank with Placeholder Text

<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
</p>

Delete HTML Elements


<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
</p>

Change the Color of Text


<h2 style = "color:red">CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
</p>

Use CSS Selectors to Style Elements

<style>
  h2{
    color:blue;}
</style>
<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Use a CSS Class to Style an Element
Style Multiple Elements with a CSS Class
Change the Font Size of an Element
Set the Font Family of an Element
Import a Google Font
Specify How Fonts Should Degrade
Add Images to your Website
Size your Images
Add Borders Around your Elements
Add Rounded Corners with a Border Radius
Make Circular Images with a Border Radius
Link to External Pages with Anchor Elements
Nest an Anchor Element within a Paragraph
Make Dead Links using the Hash Symbol
Turn an Image into a Link
Add Alt Text to an Image for Accessibility
Create a Bulleted Unordered List
Create an Ordered List
Create a Text Field
Add Placeholder Text to a Text Field
Create a Form Element
Add a Submit Button to a Form
Use HTML5 to Require a Field
Create a Set of Radio Buttons
Create a Set of Checkboxes
Check Radio Buttons and Checkboxes by Default
Nest Many Elements within a Single Div Element
Give a Background Color to a Div Element
Set the ID of an Element
Use an ID Attribute to Style an Element
Adjusting the Padding of an Element
Adjust the Margin of an Element
Add a Negative Margin to an Element
Add Different Padding to Each Side of an Element
Add Different Margins to Each Side of an Element
Use Clockwise Notation to Specify the Padding of an Element
Use Clockwise Notation to Specify the Margin of an Element
Style the HTML Body Element
Inherit Styles from the Body Element
Prioritize One Style Over Another
Override Styles in Subsequent CSS
Override Class Declarations by Styling ID Attributes
Override Class Declarations with Inline Styles
Override All Other Styles by using Important
Use Hex Code for Specific Colors
Use Hex Code to Mix Colors
Use Abbreviated Hex Code
Use RGB values to Color Elements
Use RGB to Mix Colors
Use Responsive Design with Bootstrap Fluid Containers
Make Images Mobile Responsive
Center Text with Bootstrap
Create a Bootstrap Button
Create a Block Element Bootstrap Button
Taste the Bootstrap Button Color Rainbow
Call out Optional Actions with Button Info
Warn your Users of a Dangerous Action
Use the Bootstrap Grid to Put Elements Side By Side
Ditch Custom CSS for Bootstrap
Use Spans for Inline Elements
Create a Custom Heading Jun 06, 2016
Add Font Awesome Icons to our Buttons
Add Font Awesome Icons to all of our Buttons
Responsively Style Radio Buttons
Responsively Style Checkboxes
Style Text Inputs as Form Controls
Line up Form Elements Responsively with Bootstrap
Create a Bootstrap Headline
House our page within a Bootstrap Container Fluid Div
Create a Bootstrap Row

<div class="container-fluid">
  <h3 class="text-primary text-center">
    jQuery Playground
  </h3>
  <div class="row"></div>
</div>

Split your Bootstrap Row

<div class="container-fluid">
  <h3 class="text-primary text-center">
  jQuery Playground
  </h3>
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>
</div>

Create Bootstrap Wells
Bootstrap有一个class 叫well，它能让你的列看起来更立体

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
    <div class="well"></div>
    </div>
    <div class="col-xs-6">
      <div class="well"></div>
    </div>
  </div>
</div>
</div>

Add Elements within your Bootstrap Wells

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
       <button></button>
       <button></button> 
       <button></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
       <button></button>
       <button></button> 
       <button></button>
      </div>
    </div>
  </div>
</div>

Apply the Default Bootstrap Button Style


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <