Skip to content

Commit 56458fd

Browse files
DanielSeehausenDanielSeehausen
committed
getting there
1 parent 27bb33a commit 56458fd

File tree

9 files changed

+306
-11
lines changed

9 files changed

+306
-11
lines changed

‎.learn

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
tags:
2-
- undefined
2+
- HTML
3+
- CSS
34
languages:
4-
- undefined
5-
resources: 0
5+
- HTML
6+
- CSS
7+
resources: 1

‎.rspec

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
--color
2+
--require spec_helper
3+
--fail-fast

‎Gemfile

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
source "https://rubygems.org"
2+
3+
gem 'rspec'
4+
gem 'nokogiri'

‎Gemfile.lock

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
diff-lcs (1.3)
5+
mini_portile2 (2.3.0)
6+
nokogiri (1.8.2)
7+
mini_portile2 (~> 2.3.0)
8+
rspec (3.7.0)
9+
rspec-core (~> 3.7.0)
10+
rspec-expectations (~> 3.7.0)
11+
rspec-mocks (~> 3.7.0)
12+
rspec-core (3.7.1)
13+
rspec-support (~> 3.7.0)
14+
rspec-expectations (3.7.0)
15+
diff-lcs (>= 1.2.0, < 2.0)
16+
rspec-support (~> 3.7.0)
17+
rspec-mocks (3.7.0)
18+
diff-lcs (>= 1.2.0, < 2.0)
19+
rspec-support (~> 3.7.0)
20+
rspec-support (3.7.1)
21+
22+
PLATFORMS
23+
ruby
24+
25+
DEPENDENCIES
26+
nokogiri
27+
rspec
28+
29+
BUNDLED WITH
30+
1.16.1

‎README.md

+43-8
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,54 @@
1-
# Title
1+
# Introduction to CSS Lab
2+
23

34
## Problem Statement
45

6+
HTML's role in our websites is to provide structure, content, and link
7+
resources. Understanding that, its role in describing the style of content is
8+
minimal. By default, HTML follows a few default rules, and provides minimal
9+
customization itself through the use of different tags and built in attributes.
10+
11+
In order to further customize the style, appearance, and interactive behavior of
12+
our websites, we turn to Cascading Style Sheets, or CSS. In this lab, we will
13+
work on implementing CSS declarations in our HTML.
14+
15+
516
## Objectives
617

7-
### Objective 1
18+
1. Import a CSS file in our HTML
19+
2. Implement CSS declarations
20+
21+
22+
## Import our CSS
23+
24+
First things first: we need to make sure our HTML has access to our stylesheet.
25+
26+
## Implement CSS Declarations
27+
28+
The [Pen][] also includes commented out CSS Code to (`/* this is a CSS comment */`):
29+
- Set the background of the [`<body>`] element (whole document) to `#00b3e6` (light blue)
30+
- Sets the [`<article>`] element width to `700px`
31+
- Centers the [`<article>`] element
32+
- Sets the font family of the [`<article>`] element to `Helvetica Neue`. Alternative fonts are provided in the event `Helvetica Neue` is not available on your computer
33+
- Set the background of the [`<article>`] element to `white`
34+
- Add 30px of white space to perimeter of the [`<article>`]
35+
- Set the `font-size` to `22px` for the element with `id` `main-header`
36+
- Set the `font-style` to `italic` for elements containing the class `perspective-questions`
37+
38+
39+
Run `learn` to test your work and `learn submit` once you've passed all the
40+
tests.
41+
842

9-
Content moving student to objective 1
43+
## Conclusion
1044

11-
### Objective 2
45+
CSS allows us to easily separate our 'styling' logic into separate files that follow the 'cascading' ruleset. This enables us to keep our HTML clean and simple to read, without sacrificing the customization that we have come to expect on websites.
1246

13-
Content moving student to objective 2
1447

15-
#### Key Terms (if applicable)
48+
## Resources
49+
- [W3 Introduction to CSS](https://www.w3schools.com/Css/css_intro.asp)
1650

17-
#### Resources (if applicable)
51+
[Unstyled page]: https://curriculum-content.s3.amazonaws.com/web-development/unstyled-codepen.jpeg
52+
[Styled page]: https://curriculum-content.s3.amazonaws.com/web-development/styled-codepen.jpeg
1853

19-
### Conclusion
54+
<p class='util--hide'>View <a href='https://learn.co/lessons/introduction-to-css-lab'>Introduction to CSS Lab</a> on Learn.co and start learning to code for free.</p>

‎index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Introduction to CSS Lab</title>
6+
</head>
7+
8+
<body>
9+
<link rel="stylesheet" href="./style.css">
10+
</body>
11+
12+
</html>
13+
14+
<article>
15+
<h1 id='main-header'>How Does Writing CSS Differ From Writing HTML?</h1>
16+
<p>As we write CSS these are the type of questions we might ask ourselves:</p>
17+
<ul>
18+
<li class='perspective-questions'>Should the layout of the text be in a single or double column?</li>
19+
<li class='perspective-questions'>Should we use a different font color for the header?</li>
20+
<li class='perspective-questions'>How should the same content appear differently on a desktop vs. a mobile device?</li>
21+
</ul>
22+
<p>All of the questions above deal with the esthetic considerations of the page. These are the concerns of the presentation layer (CSS).</p>
23+
<p>As a contrast, let's consider the type of questions we might ask ourselves as we write HTML:</p>
24+
<ul>
25+
<li class='perspective-questions'>Does the order of items within a list matter? Should it be a numbered list?</li>
26+
<li class='perspective-questions'>Should we wrap a list of links inside a navigation tag?</li>
27+
<li class='perspective-questions'>Is this the most important header in the whole HTML document?</li>
28+
</ul>
29+
<p>The last few questions deal with structure, hierarchy, and meaning. These are the concerns of the content layer (HTML).</p>
30+
31+
<p>When we write CSS, we focus on esthetic and display considerations. When we write HTML, we focus on structure, hierarchy, and meaning.</p>
32+
</article>

‎spec/css_spec.rb

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
3+
RSpec.describe 'index.html' do
4+
it 'contains an <iframe> tag' do
5+
iframe = parsed_html.search('iframe')[0]
6+
expect(iframe).to_not be_nil, "No <iframe> tag was found"
7+
expect(iframe.attributes["src"]).to match(/https:/), "Include a valid URL in the src attribute"
8+
end
9+
10+
context 'within <iframe>' do
11+
it 'contains a "width" attribute set to "100%" ' do
12+
iframe = parsed_html.search('iframe')[0]
13+
expect(iframe.attributes["width"]).to_not be_nil, "No width attribute was found in the iframe"
14+
expect(iframe.attributes["width"].value).to eq("100%"), "The width attribute should be set to '100%'"
15+
end
16+
17+
it 'contains a "height" attribute set to "400px" ' do
18+
iframe = parsed_html.search('iframe')[0]
19+
expect(iframe.attributes["height"]).to_not be_nil, "No height attribute was found in the iframe"
20+
expect(iframe.attributes["height"].value).to eq("400px"), "The height attribute should be set to '400px'"
21+
end
22+
23+
it 'contains a "frameborder" attribute set to "1" ' do
24+
iframe = parsed_html.search('iframe')[0]
25+
expect(iframe.attributes["frameborder"]).to_not be_nil, "No frameborder attribute was found in the iframe"
26+
expect(iframe.attributes["frameborder"].value).to eq("1"), "The frameborder attribute should be set to '1'"
27+
end
28+
29+
end
30+
31+
32+
end

‎spec/spec_helper.rb

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
require 'bundler'
2+
Bundler.require
3+
require 'yaml'
4+
5+
# This file was generated by the `rspec --init` command. Conventionally, all
6+
# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
7+
# The generated `.rspec` file contains `--require spec_helper` which will cause this
8+
# file to always be loaded, without a need to explicitly require it in any files.
9+
#
10+
# Given that it is always loaded, you are encouraged to keep this file as
11+
# light-weight as possible. Requiring heavyweight dependencies from this file
12+
# will add to the boot time of your test suite on EVERY test run, even for an
13+
# individual file that may not need all of that loaded. Instead, make a
14+
# separate helper file that requires this one and then use it only in the specs
15+
# that actually need it.
16+
#
17+
# The `.rspec` file also contains a few flags that are not defaults but that
18+
# users commonly want.
19+
#
20+
# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
21+
RSpec.configure do |config|
22+
# The settings below are suggested to provide a good initial experience
23+
# with RSpec, but feel free to customize to your heart's content.
24+
=begin
25+
# These two settings work together to allow you to limit a spec run
26+
# to individual examples or groups you care about by tagging them with
27+
# `:focus` metadata. When nothing is tagged with `:focus`, all examples
28+
# get run.
29+
config.filter_run :focus
30+
config.run_all_when_everything_filtered = true
31+
32+
# Many RSpec users commonly either run the entire suite or an individual
33+
# file, and it's useful to allow more verbose output when running an
34+
# individual spec file.
35+
if config.files_to_run.one?
36+
# Use the documentation formatter for detailed output,
37+
# unless a formatter has already been configured
38+
# (e.g. via a command-line flag).
39+
config.default_formatter = 'doc'
40+
end
41+
42+
# Print the 10 slowest examples and example groups at the
43+
# end of the spec run, to help surface which specs are running
44+
# particularly slow.
45+
config.profile_examples = 10
46+
47+
# Run specs in random order to surface order dependencies. If you find an
48+
# order dependency and want to debug it, you can fix the order by providing
49+
# the seed, which is printed after each run.
50+
# --seed 1234
51+
config.order = :random
52+
53+
# Seed global randomization in this process using the `--seed` CLI option.
54+
# Setting this allows you to use `--seed` to deterministically reproduce
55+
# test failures related to randomization by passing the same `--seed` value
56+
# as the one that triggered the failure.
57+
Kernel.srand config.seed
58+
59+
# rspec-expectations config goes here. You can use an alternate
60+
# assertion/expectation library such as wrong or the stdlib/minitest
61+
# assertions if you prefer.
62+
config.expect_with :rspec do |expectations|
63+
# Enable only the newer, non-monkey-patching expect syntax.
64+
# For more details, see:
65+
# - http://myronmars.to/n/dev-blog/2012/06/rspecs-new-expectation-syntax
66+
expectations.syntax = :expect
67+
end
68+
69+
# rspec-mocks config goes here. You can use an alternate test double
70+
# library (such as bogus or mocha) by changing the `mock_with` option here.
71+
config.mock_with :rspec do |mocks|
72+
# Enable only the newer, non-monkey-patching expect syntax.
73+
# For more details, see:
74+
# - http://teaisaweso.me/blog/2013/05/27/rspecs-new-message-expectation-syntax/
75+
mocks.syntax = :expect
76+
77+
# Prevents you from mocking or stubbing a method that does not exist on
78+
# a real object. This is generally recommended.
79+
mocks.verify_partial_doubles = true
80+
end
81+
=end
82+
end
83+
84+
def hint(number)
85+
Proc.new{YAML.load_file('./.hints')[number]}
86+
end
87+
88+
def html_file_contents
89+
File.read('./index.html')
90+
end
91+
92+
def parsed_html
93+
Nokogiri::HTML(html_file_contents) do |config|
94+
config.strict.dtdload.dtdvalid.noblanks
95+
end
96+
end

‎style.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
Tag selector to select the 'body' element
3+
*/
4+
body {
5+
/*
6+
Set the background of the 'body' element to '#00b3e6' (light blue)
7+
*/
8+
9+
/* background:#00b3e6; */
10+
}
11+
12+
/*
13+
Tag selector to select the 'article' element
14+
*/
15+
article {
16+
/*
17+
Sets the article element width to 700px
18+
*/
19+
/* width:700px; */
20+
21+
/*
22+
Centers the article element
23+
*/
24+
/* margin:auto; */
25+
26+
/*
27+
Sets the font family of the article element to 'Helvetica Neue'
28+
alternative fonts are provided in the event 'Helvetica Neue' is not available on the user's device
29+
*/
30+
/* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
31+
32+
/*
33+
Set the background of the 'article' element to 'white'
34+
*/
35+
/* background:white; */
36+
37+
/*
38+
Add 30px of white space to perimeter of the 'article elment'
39+
*/
40+
/* padding:30px; */
41+
}
42+
43+
/*
44+
ID selector to select the element with id 'main-header'
45+
*/
46+
#main-header {
47+
/*
48+
Set the font-size to 22px for the element with id 'main-header'
49+
*/
50+
/* font-size:22px; */
51+
}
52+
53+
/*
54+
Class selector to select elements containing the class 'perspective-questions'
55+
*/
56+
.perspective-questions {
57+
/*
58+
Set the 'font-style' to 'italic' for elements containing the class 'perspective-questions'
59+
*/
60+
/* font-style: italic; */
61+
}

0 commit comments

Comments
 (0)