For some strange reason, the code i wrote works 100 on my browser, but when I put it in the fork me to test one of them fails. which is very strange cuz if I add a “>” before the Doctype it passes all the test.
Your code so far
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="C:Users\allth\Desktop\Programacion\technical\style.css">
<meta charset="utf-8">
<title>Ruby technical Documentation</title>
</head>
<body id="body">
<nav id="navbar">
<div class="sidebar">
<header>
<h1 id ="title">Ruby Documentation</h1>
</header>
<a class="nav-link" href="#Classes,_Objects,_and_Variables">Classes, Objects, and Variables</a>
<a class="nav-link" href="#Containers,_Blocks,_and_Iterators">Containers, Blocks, and Iterators</a>
<a class="nav-link" href="#Basic_Input_and_Output">Basic Input and Output</a>
<a class="nav-link" href="#Modules">Modules</a>
<a class="nav-link" href="#Ruby_and_the_Web">Ruby and the Web</a>
<a class="nav-link" href="#Reference">Reference</a>
</div>
</nav>
<main id="main-doc">
<section class="main-section " id="Classes,_Objects,_and_Variables">
<header><h2>Classes, Objects, and Variables</h2></header>
<p>We're going to be looking at how you create classes and objects in Ruby, and at some of the ways in which Ruby is more powerful than most object-oriented languages. Along the way, we'll be implementing part of our next billion-dollar product, the Internet Enabled Jazz and Blue Grass jukebox.
After months of work, our highly paid Research and Development folks have determined that our jukebox needs songs. So it seems like a good idea to start off by setting up a Ruby class that represents things that are songs. We know that a real song has a name, an artist, and a duration, so we'll want to make sure that the song objects in our program do, too.
We'll start off by creating a basic class Song,[As we mentioned on page 9, class names start with an uppercase letter, while method names start with a lowercase letter.] which contains just a single method, initialize.
initialize is a special method in Ruby programs. When you call Song.new to create a new Song object, Ruby creates an uninitialized object and then calls that object's initialize method, passing in any parameters that were passed to new. This gives you a chance to write code that sets up your object's state.
For class Song, the initialize method takes three parameters. These parameters act just like local variables within the method, so they follow the local variable naming convention of starting with a lowercase letter.</p>
<div class="codebox">
<code>class Song <br>
def initialize(name, artist, duration) <br>
@name = name <br>
@artist = artist <br>
@duration = duration<br>
end<br>end</code>
</div>
<ul>
<li>Are classes closed?</li>
</ul>
<p>In Ruby, classes are never closed: you can always add methods to an existing class. This applies to the classes you write as well as the standard, built-in classes. All you have to do is open up a class definition for an existing class, and the new contents you specify will be added to whatever's there.
This is great for our purposes. As we go through this chapter, adding features to our classes, we'll show just the class definitions for the new methods; the old ones will still be there. It saves us having to repeat redundant stuff in each example. Obviously, though, if you were creating this code from scratch, you'd probably just throw all the methods into a single class definition.</p>
</section>
<section class="main-section " id="Containers,_Blocks,_and_Iterators">
<header><h2>Containers, Blocks, and Iterators</h2></header>
<p>A jukebox with one song is unlikely to be popular (except perhaps in some very, very scary bars), so pretty soon we'll have to start thinking about producing a catalog of available songs and a playlist of songs waiting to be played. Both of these are containers: objects that hold references to one or more other objects.
Both the catalog and the playlist need a similar set of methods: add a song, remove a song, return a list of songs, and so on. The playlist may perform additional tasks, such as inserting advertising every so often or keeping track of cumulative play time, but we'll worry about these things later. In the meantime, it seems like a good idea to develop some kind of generic SongList class, which we can specialize into catalogs and playlists.<ul>
<li><h3>Containers</h3></li>
</ul>
Before we start implementing, we'll need to work out how to store the list of songs inside a SongList object. We have three obvious choices. We could use the Ruby Array type, use the Ruby Hash type, or create our own list structure. Being lazy, for now we'll look at arrays and hashes, and choose one of these for our class.</p>
<ul>
<li><h4>Arrays</h4></li>
</ul>
<p>The class Array holds a collection of object references. Each object reference occupies a position in the array, identified by a non-negative integer index.
You can create arrays using literals or by explicitly creating an Array object. A literal array is simply a list of objects between square brackets.</p>
<div class="codebox">
<code>a = [ 3.14159, "pie", 99 ] <br>
a.type » Array<br>
a.length » 3<br>
a[0] » 3.14159<br>
a[1] » "pie"<br>
a[2] » 99<br>
a[3] » nil<br>
b = Array.new<br>
b.type » Array<br>
b.length » 0<br>
b[0] = "second"<br>
b[1] = "array"<br>
b » ["second", "array"]<br></code>
</div>
</section>
<section class="main-section " id="Basic_Input_and_Output">
<header><h2>Basic Input and Output</h2></header>
<p>Ruby provides what at first sight looks like two separate sets of I/O routines. The first is the simple interface---we've been using it pretty much exclusively so far.</p>
<div class="codebox">
<code>
print "Enter your name: "<br>
name = gets<br></code>
</div>
<p>There are a whole set of I/O-related methods implemented in the Kernel module---gets, open, print, printf, putc, puts, readline, readlines, and test---that make it simple and convenient to write straightforward Ruby programs. These methods typically do I/O to standard input and standard output, which makes them useful for writing filters. You'll find them documented starting on page 411.
The second way, which gives you a lot more control, is to use IO objects.</p>
<ul>
<li><h4>What Is an IO Object?</h4></li>
</ul>
<p>Ruby defines a single base class, IO, to handle input and output. This base class is subclassed by classes File and BasicSocket to provide more specialized behavior, but the principles are the same throughout. An IO object is a bidirectional channel between a Ruby program and some external resource.[For those who just have to know the implementation details, this means that a single IO object can sometimes be managing more than one operating system file descriptor. For example, if you open a pair of pipes, a single IO object contains both a read pipe and a write pipe.] There may be more to an IO object than meets the eye, but in the end you still simply write to it and read from it.
In this chapter, we'll be concentrating on class IO and its most commonly used subclass, class File. For more details on using the socket classes for networking, see the section beginning on page 469.</p>
</section>
<section class="main-section " id="Modules">
<header><h2>Modules</h2></header>
<p>Modules are a way of grouping together methods, classes, and constants. Modules give you two major benefits:</p>
<ol>
<li>Modules provide a namespace and prevent name clashes.</li>
<li>Modules implement the mixin facility.</li>
</ol>
<p>As you start to write bigger and bigger Ruby programs, you'll naturally find yourself producing chunks of reusable code---libraries of related routines that are generally applicable. You'll want to break this code out into separate files so the contents can be shared among different Ruby programs.
Often this code will be organized into classes, so you'll probably stick a class (or a set of interrelated classes) into a file.
However, there are times when you want to group things together that don't naturally form a class.
An initial approach might be to put all these things into a file and simply load that file into any program that needs it. This is the way the C language works. However, there's a problem. Say you write a set of trigonometry functions sin, cos, and so on. You stuff them all into a file, trig.rb, for future generations to enjoy. Meanwhile, Sally is working on a simulation of good and evil, and codes up a set of her own useful routines, including beGood and sin, and sticks them into action.rb. Joe, who wants to write a program to find out how many angels can dance on the head of a pin, needs to load both trig.rb and action.rb into his program. But both define a method called sin. Bad news.
The answer is the module mechanism. Modules define a namespace, a sandbox in which your methods and constants can play without having to worry about being stepped on by other methods and constants. The trig functions can go into one module:
</p><div class="codebox">
<code>
module Trig<br>
PI = 3.141592654<br>
def Trig.sin(x)<br>
# ..<br>
end<br>
def Trig.cos(x)<br>
# ..<br>
end<br>
end</code>
</div>
</section>
<section class="main-section " id="Ruby_and_the_Web">
<header><h2>Ruby and the Web</h2></header>
<p>Ruby is no stranger to the Internet. Not only can you write your own SMTP server, FTP daemon, or Web server in Ruby, but you can also use Ruby for more usual tasks such as CGI programming or as a replacement for PHP. You can use Ruby to write CGI scripts quite easily. To have a Ruby script generate HTML output, all you need is
</p>
<div class="codebox">
<code>#!/usr/bin/env ruby<br>
print "HTTP/1.0 200 OK\r\n"<br>
print "Content-type: text/html\r\n\r\n"<br>
print "<html><body>Hello World!</body></html>\r\n"</code>
</div>
<br>
<p>You could use Ruby's regular expression features to parse incoming query strings, look up environment variables, check tags, substitute text into templates, escape special characters, format up the HTML, and print it all out.
Or, you could use class CGI.</p>
<ul>
<li><h4>Using cgi.rb</h4></li>
</ul>
<p>Class CGI provides support for writing CGI scripts. With it, you can manipulate forms, cookies, and the environment, maintain stateful sessions, and so on. It's documented in full in the reference section beginning on page 497, but we'll take a quick look at its capabilities here</p>
</section>
<section class="main-section " id="Reference">
<header><h2>Reference</h2></header>
<ul>
<li> All the information in this page was taken from <a href="https://www.ruby-lang.org/es/" target="_blank">Ruby.</a></li>
</ul>
</section>
</main>
</body>
</html>
CSS:
#body{
display: grid;
grid-template-columns: auto auto;
background-color:rgb(220,220,220);
grid-column-gap: 5px;
}
#main-doc{
font-family: arial,sans-serif;
text-align:justify;
order:2;
}
.codebox{
width:100%;
background-color: rgba(119,136,153,05);
border: solid;
border-width: 3px;
border-color: rgba(119,136,153,05);
}
#navbar{
display: grid;
grid-auto-rows:max-content;
grid-row-gap: 3px;
width:100%;
height: 100%;
border-right:solid;
border-width: 3px;
border-color: rgb(169,169,169);
}
.sidebar{
position: sticky;
left: 0;
top:0;
box-sizing: border-box;
order:1;
}
.nav-link{
display: grid;
border-bottom: solid;
width: auto;
border-width: 3px;
padding: 10px;
border-color: rgb(169,169,169);
}
#title {
margin-bottom: -5px;
border-bottom: solid;
width: auto;
padding: 20px;
padding-bottom: 40px;
border-width: 3px;
border-color: rgb(169,169,169);
}
a {color:black;
text-decoration: none;
}
/** Media Query **/
@media only screen and (max-width: 800px) {
#body { display: block;}
}
Codepen link:
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.
Challenge: Build a Technical Documentation Page
Link to the challenge:
