RoR - 0 - Initiation

First day of the 42 Ruby on Rails Piscine. This module covers the fundamentals of web development: shell scripting, HTML, CSS, and JavaScript.

---

Exercises Overview

Exercise	Topic	Description
ex00	Shell	Resolve a bit.ly shortened URL to its real destination
ex01	HTML / CSS	Build a personal CV page using semantic HTML and styled tables
ex02	HTML / CSS / JS	Create a styled contact form with radio buttons, checkboxes, and a popup
ex03	HTML / CSS	Reproduce a given page layout with animated progress bars
ex04	JavaScript	Order script inclusions so that a chain of function calls succeeds
ex05	HTML / CSS / JS	Build a full blog page with custom fonts, sidebar, and audio playback

---

ex00 - Shell / URL Resolver

Files: myawesomescript.sh

Write a Bash script that receives a bit.ly shortened URL as its only argument and prints the real destination URL.

Approach

The script sends a HEAD request with curl -sI to the shortened URL, then extracts the Location header which contains the redirect target. Input validation ensures exactly one argument is provided and that it matches the bit.ly/... pattern.

./myawesomescript.sh bit.ly/1O72s3U

Key concepts

• curl flags: -s (silent), -I (HEAD request, headers only)
• Piping output through grep and cut to extract a specific header value
• Bash argument validation with regex (=~)

---

ex01 - HTML / CSS Resume

Files: cv.html, cv.css

Create a personal resume as a web page. The page must use proper semantic HTML elements including headings, lists (ordered and unordered), tables, and links.

Requirements

Element	Usage
<h1>, <h2>, <h3>	Name, section titles, project names
<ul>	Technical skills
<ol>	Languages spoken
<table>	Professional experience (company, role, technologies, achievements)
<a>	External links (GitHub, blog)

Key concepts

• Semantic HTML structure with <header>, <section>
• Table markup: <thead>, <tbody>, <th>, <td>
• External stylesheet and Google Fonts integration

---

ex02 - Contact Form

Files: index.html, style.css, popup.js (symlink)

Build a contact form with various input types and a submit button that triggers a JavaScript popup displaying the form contents.

Form fields

Field	Type	Details
Firstname	text	Required
Name	text	Required
Age	number	Min 1, max 120
Phone	tel	Placeholder format provided
Email	email	Required
Student at 42?	checkbox	Boolean
Gender	radio	Male / Female / Other

Key concepts

• HTML5 input types and validation attributes (required, min, max)
• Custom-styled checkboxes and radio buttons using pseudo-elements
• CSS animations (@keyframes slideIn) and gradient backgrounds
• onclick handler calling a JavaScript function to display form data

---

ex03 - Reproduce a Page

Files: copy.html, style.css, page.png

Reproduce a reference page (page.png) as closely as possible using only HTML and CSS. The page displays skill progress bars split into Frontend and Backend categories.

Progress bars

Category	Skill	Value
Frontend	HTML5	80%
Frontend	CSS3	60%
Frontend	jQuery	50%
Backend	Python	75%
Backend	PHP	65%
Backend	Node.js	35%

Key concepts

• Native <progress> element with custom styling
• Webkit and Mozilla pseudo-elements (::-webkit-progress-value, ::-moz-progress-bar)
• CSS gradients with animated stripes
• data-value attributes with content: attr() to display percentages

---

ex04 - JavaScript Call Chain

Files: snippets.html, file1.js, file2.js, file3.js, file4.js

Given four JavaScript files, each containing a function that calls another, determine the correct <script> inclusion order so that executing the page displays an alert saying "Exercice reussi!".

Call chain

cat() -> whale() -> unicorn() -> puffin() -> alert("Exercice reussi!")

File	Function	Calls
file1.js	unicorn()	puffin()
file2.js	cat()	whale() — also invokes cat()
file3.js	whale()	unicorn()
file4.js	puffin()	alert(...)

Correct inclusion order

<script src="file4.js"></script>  <!-- puffin must exist first -->
<script src="file1.js"></script>  <!-- unicorn calls puffin -->
<script src="file3.js"></script>  <!-- whale calls unicorn -->
<script src="file2.js"></script>  <!-- cat calls whale, then executes cat() -->

Key concepts

• JavaScript hoisting does not apply across separate <script> tags
• Functions must be defined before they are called at load time
• Dependency resolution through reading the call graph

---

ex05 - Blog Page

Files: index.html, style.css, normalize.css, audio_chain.js, audio/, fonts/, image/

Build a complete blog-style page ("Art Gallery Blog") featuring a masthead, navigation bar, article cards with author info, a sidebar, and a footer. The page also includes chained audio playback using jQuery.

Page structure

Header (masthead + nav)
  |
  +-- Main content (4 articles)
  |     - Title, date, body, author footer
  |
  +-- Sidebar (about section)
  |
Footer (links + copyright)

Key concepts

• Custom @font-face declarations (Bebas Neue, Droid Serif) with multiple formats (eot, woff, ttf, svg)
• normalize.css for cross-browser consistency
• Float-based layout (70% main / 30% sidebar)
• jQuery audio chain: plays audio files sequentially by binding to the ended event
• Semantic elements: <article>, <header>, <footer>, <nav>, <aside>, <main>, <time>, <figure>