diff --git a/.canvas b/.canvas new file mode 100644 index 000000000..391bac710 --- /dev/null +++ b/.canvas @@ -0,0 +1,6 @@ +--- +:lessons: +- :id: 218933 + :course_id: 6602 + :canvas_url: https://learning.flatironschool.com/courses/6602/assignments/218933 + :type: assignment diff --git a/.github/workflows/canvas-sync-ruby-update.yml b/.github/workflows/canvas-sync-ruby-update.yml new file mode 100644 index 000000000..f8818dc0c --- /dev/null +++ b/.github/workflows/canvas-sync-ruby-update.yml @@ -0,0 +1,31 @@ +name: Sync with Canvas Ruby v2.7 + +on: + push: + branches: [master, main] + paths: + - 'README.md' + +jobs: + sync: + name: Sync with Canvas + + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: 2.7 + + - name: Install github-to-canvas + run: gem install github-to-canvas + + # Secret stored in learn-co-curriculum Settings/Secrets + - name: Sync from .canvas file + run: github-to-canvas -a -lr + env: + CANVAS_API_KEY: ${{ secrets.CANVAS_API_KEY }} + CANVAS_API_PATH: ${{ secrets.CANVAS_API_PATH }} diff --git a/.rspec b/.rspec deleted file mode 100644 index 4e902e798..000000000 --- a/.rspec +++ /dev/null @@ -1,3 +0,0 @@ ---color ---require spec_helper ---fail-fast \ No newline at end of file diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 99864cc30..000000000 --- a/Gemfile +++ /dev/null @@ -1,7 +0,0 @@ -source "https://rubygems.org" - -gem 'rspec' -gem 'nokogiri' -gem 'pry' -gem 'css_parser' -gem 'w3c_validators' \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 733329bd3..000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,47 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - addressable (2.6.0) - public_suffix (>= 2.0.2, < 4.0) - coderay (1.1.2) - css_parser (1.7.0) - addressable - diff-lcs (1.3) - json (2.2.0) - method_source (0.9.2) - mini_portile2 (2.4.0) - nokogiri (1.10.3) - mini_portile2 (~> 2.4.0) - pry (0.12.2) - coderay (~> 1.1.0) - method_source (~> 0.9.0) - public_suffix (3.1.1) - rspec (3.8.0) - rspec-core (~> 3.8.0) - rspec-expectations (~> 3.8.0) - rspec-mocks (~> 3.8.0) - rspec-core (3.8.2) - rspec-support (~> 3.8.0) - rspec-expectations (3.8.4) - diff-lcs (>= 1.2.0, < 2.0) - rspec-support (~> 3.8.0) - rspec-mocks (3.8.1) - diff-lcs (>= 1.2.0, < 2.0) - rspec-support (~> 3.8.0) - rspec-support (3.8.2) - w3c_validators (1.3.4) - json (>= 1.8) - nokogiri (~> 1.6) - -PLATFORMS - ruby - -DEPENDENCIES - css_parser - nokogiri - pry - rspec - w3c_validators - -BUNDLED WITH - 2.0.1 diff --git a/README.md b/README.md index 7bee7b1ed..214af0fac 100644 --- a/README.md +++ b/README.md @@ -7,14 +7,30 @@ ## Introduction -HTML's role in our websites is to provide structure, content, and link -resources (e.g. CSS files). Its role in describing the style ("presentation") -of content is minimal. HTML's ability to style is pretty much limited to -"pretty good" defaults. +HTML's role in our websites is to provide structure, content, and link resources +(e.g. CSS files). Its role in describing the style ("presentation") of content +is minimal. HTML's ability to style is pretty much limited to "pretty good" +defaults. -In order to further customize the style, appearance, and interactive behavior -of our websites, we turn to Cascading Style Sheets, or CSS. In this lab, we -will work on implementing CSS declarations in our HTML. +In order to further customize the style, appearance, and interactive behavior of +our websites, we turn to Cascading Style Sheets, or CSS. In this lab, we will +work on implementing CSS declarations in our HTML. + +## Writing HTML vs. Writing CSS + +| | HTML | CSS | +| ----------- | ---- | --- | +| Deals with: | Content layer | Presentation layer | +| Concerns: | Structure, hierarchy & meaning | Aesthetic & display | +| Questions: | - Should the order of items within a list matter? | - Should the layout of the text be in a single or double column? | +| | - Should we wrap a list of links inside a navigation tag? | - Should we use a different font color for the header? | +| | - Is this the most important header in the HTML document? | - How should the content appear on a desktop vs. a mobile device? | + +## Getting Started + +**Fork and clone** this lesson into your local environment. Navigate into its +directory in the terminal, then run `code .` to open the files in Visual Studio +Code. ## Import a CSS File in Our HTML @@ -23,60 +39,62 @@ First things first: we need to make sure our HTML is loading our style sheet. We have two options: 1. Write CSS rules inside of a `