es-rene99 / google-homepage

Google homepage clone, with only HTML and CSS, part of The Odin Project.

Google clone for the Odin project

First exercise of the Foundations course from the Odin Project.

Cool things I learned

• You can get the favicon.ico of Google and many websites if you search it at the root of the domain. e.g. www.google.com/favicon.ico There are also other alternatives for extracting .ico.
• Made a good setup of extensions in VsCode, some of the most helpful for me in this project: Error Lens, Prettier and className Completion in CSS.
• The Odin Project recommends Flexbox Froggy and Grid Garden, and they're so worth it, I definitely recommend them too.
• The standard for conventional commits this project uses this type of commits.
• You cannot do css selector grouping for two child selectors with the same parent. A shame, I really thought it was possible.
• IDs should be used mostly when describing a large section of the page, usually combined with section or div element. For all other cases it's better to use classes as it makes selectors easier, also to prevent having multiple IDs which is forbidden and we should only use one ID. StackOverFlow Reference 1 StackOverFlow Reference 2
• You can have the input be outside of the form element with the form attribute.
• I modified the site to use BEM for improved readability and easier CSS.
• How to remove the blue highlight of an input html when is focused.

Notes from Responsive design

From Jharteaga dev.to article

• No use of inches, points, cms and mms unless is printing physical
• Px = thin lines on borders for example, or the exact size of an image so it doesn't get scaled(although for that is better physical units for printing) since they aren't responsive and consistent and sometimes interfere with Zoom functionality.
  • But they're a must on media queries.
• Viewport should be used sparingly for things like overlays that need to scale based on size of the display, large containers are ideal, never use as font sizes, and they're tricky to get right.
• Percentages for elements which logically scale for their parents, for example how big sidebars are in text, or helping set some default number of elements per row/column in a flexbox layout.
• Ems mostly for tweaking the font-size of small sections of text, since it scales a property off the font of the size of the element, or the parent, it has inheritance.
  • But there's an advantage to em that em's are great because you set paddings, margins, borders, whatever to em, and then they all scale uniformly just by changing the font size of the item. This is great for buttons or headings where you don't want to redefine all the values every time you change a font size.
• REms for everything else, paddings, font-sizes.

SVG Study

From w3schools

• The value of the viewBox attribute for SVG elements, is a list of four numbers: min-x, min-y, width and height.
• SVG defines the graphics in XML format
• Example of SVG and explanation by
  • The <circle> element is used to draw a circle
  • The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle's center is set to (0, 0)
  • The r attribute defines the radius of the circle
  • The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border"
  • The fill attribute refers to the color inside the circle. We set the fill color to yellow

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• Predefined SVG shapes

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

• The following commands are available for path data:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

Info from CSS Tricks

• In HTML SVG is treated like a document, just like:

<object>
  <img>
  <iframe>

• The default size for this elements is 300x15, but can vary between different browsers.

• The ways you will need scale a SVG is:

  • Scaling to fit a certain size, without distorting the image.
  • Scaling to fit a certain size, stretching or compressing the graphic as necessary.
  • Scaling to fit the available width, while maintaining the width-to-height aspect ratio.
  • Scaling in non-uniform ways, so that some parts of the graphic scale differently from others.

• You should use a combination of height and width with viewBox attr:

  • it defines the aspect ratio of the image.
  • it defines how all the values on the SVG should be scaled to fit the total space available.
  • it defines the origin of the SVG coordinate.

Is normal that viewBox makes the SVG bigger if the width is smaller.