Ruby and CSS Quiz: Understanding Variables, Methods, and Styling Techniques
Test your knowledge of Ruby and CSS with this interactive quiz! Discover the differences between accessing variables and calling methods in Ruby, specifically with hashes and arrays. Challenge yourself with questions about data structures, value storage, and their syntax. Move on to CSS and learn how to manipulate background colors of HTML elements, such as paragraphs. Understand the significance of class attributes in styling selectively. Perfect for beginners and developers looking to sharpen their skills in Ruby and CSS!
Ruby and CSS Quiz: Understanding Variables, Methods, and Styling Techniques
E N D
Presentation Transcript
URails Meeting 004
Ruby Quiz • Is the following statement accessing a variable or calling a method? profile.user_name Could be either. Calling a method with no parameters and accessing a variable are syntactically identical
Quiz (cont.) • What is being store in foo? foo = { :dogs => “rock” } A Hash. { } with key-value pairs indicate a Hash puts foo[:dogs] # String => “rock”
Quiz (cont.) • What is being store in foo? foo = [ “hello”, “world” ] An Array. It has to elements, “hello” and “world” foo[0] # String => “hello”
Quiz (cont.) • What is being store in foo? foo = [ { :hello => “greeting” }, { :world => “planet” } ] An Array. It has two elements, a hash with the key/value :hello/”greeting”, and a hash with the key/value :world/”planet”. puts foo[0] # Hash => { :hello => “greeting” } puts foo[0][:hello] # String => “greeting”
Quiz (cont.) • What is being stored in foo? foo = { :hi => {:hello => “greeting” , :world => “planet” }} A Hash. It has to elements, a hash with the key :hello, and a hash with the key :world. foo[:hi][:world] # String => “planet”
HTML/CSS Quiz • How can I change the background color of the ptag to green using CSS? <h1> My cool heading </h1> <p> Hello! </p> p { background-color:green; }
How can I change only the first ptag to have a green background color? <p> First Paragraph </p> <p> Second Paragraph </p> You can’t! (without adding a class or id)
How can I change only the first ptag to have a green background color? <p class=“green_color”> First Paragraph </p> <p> Second Paragraph </p> .green_color { background-color:green; }
div tags • divtags can be styled like any other tag, but also have “spacing” and can be thought of as a container • div-specific CSS Attributes to be aware of • width • height • margin • padding • border • CSS Box Model