00-prepwork


[TOC]


Web 101

Main concepts:

Web Content & HTML

Basic HTML stuff.

I'm considering taking this emmet course before the Bootcamp: https://www.linkedin.com/learning/emmet-fast-and-efficient-web-coding

Things to remember:

Useful links mentioned at the end of the module:

Web Design & CSS

00-prepwork-css-fonts-size-spacing.png

div

Styling divs involves structuring the content and customizing the spacing of our boxes (the yellow rectangle below).

00-prepwork-div-box-model.png

Classic <div> design

background: white;  /* white background */
padding: 30px;      /* internal space */
border-radius: 4px; /* small radius */
box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1); /* strip shadow */

<div> centering technique

width: 300px;   /* fix the width */
margin: 0 auto; /* automatic left/right margins */

id and class

class names

What are the best class names?

Tip: think graphical

Le Wagon naming convention:

/* Convention */
.element-design

/* Examples */
.text-center
.text-justify
.btn-red
.btn-green
.btn-big
.list-inline
.form-horizontal
.img-rounded
.img-circle

Ruby

First 3 data types in Ruby:

Coding style: variables and methods named with snake_case

Arrays:

burger = ["bun", "patty", "lettuce", "tomato"]

"Everything in Ruby is an Object"

name = "meleu"
name.class # => returns String

10.even? # => returns true
22.odd?  # => returns false
500.to_s # => returns the string "500"

Methods:

def hello(name)
  return "Hi #{name}!"
end

puts hello("meleu") # => "Hi meleu!"

Things I learned doing the challenges

While doing the https://codewars.com/ challenges I learned some useful stuff.

convert string to array

"um dois tres quatro".split
# => ["um", "dois", "tres", "quatro"]

# convert to string and convert to integer
"5 1 4 2 3 15 42 34".split.map(&:to_i)
# => [5, 1, 4, 2, 3, 15, 42, 34]

# in the example above 👆 looks like the '&' char
# refers every single item in the array.

get min and max of an array

[5, 1, 4, 2, 3].minmax
# => [1, 5]

for loop

for i in 0..10 do
  puts i
end

# iterating like a .forEach()
array.each do |n|
  puts n
end

char to ASCII value

# from char to ASCII value
'a'.ord
# => 97

# from ASCII value to char
97.chr
# => "a"

arrays subtraction

[1, 2, 3] - [1, 3]
# => [2]

See also:


Terminal & Bash

Nothing new...


Version Control & Git

Nothing new...


Product Design & Figma

Uhm... Some interesting stuff, but I'm afraid that's not the thing the pleases me... 😔

Some stuff I saw as related (maybe useful):


Going Further

Links that I should NOT spend time on: