
## Why I decided to build this website?

I don't know what it will look like, or if I can actually finish this project at the beginning of building it. However, I believe there will be many amazing learning experiences for me.

It's weird that I don't always do things that are certain or assured. That's to say I like to do things that others told me I can't achieve, or even things I myself don't believe I can accomplish.


the thinking during the process of building this website project


## FAQ

- Tell me something about yourself.
- What do you **know about the job**, what you assess from the advertiseemnt?
- Tell me little about your **work history**.
- Can you kind of walk me through your resume (your job history), please?
- Tell me if you feel like this is gonna to be a good fit for you?
- how much experience do you have?

---


Freequent asked questions during interviews


## differences

| state                                        | props                                                                                               |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| **Internal** data, owned by component        | **External** data, owned by parent component                                                        |
| Component "memory"                           | Similar to function parameters                                                                      |
| Can be updated by the component itself       | Read-only                                                                                           |
| Updating state cuases component to re-render | Receiving new props cuases component to re-render. Usually when the parent's state has been updated |
| Used to make components interactive          | Used by parent to configure child component("settings")                                             |


differences between state and props in NextJs


**What is responsive design?**

> Design technique to make a webpage adjust its layout and visual style to **any possible screen sizes** (window or viewport size)
> In practice, this means that responsive design makes websites usable on all devices, such as **desktop computers, tablets, and mobile phones**.
> It's set of practices, **not a separate technology.** It's all just CSS!

**Responsive Design Ingredients**

1. Fluid Layouts
   - To allow webpage to adapt to the **current viewport** width (or even height)
   - Use % (or vh/vw) unit instead of px for elements that **should adapt to viewport (usually layout)**
   - Use max-width instead of width
2. Responsive Units
   - Use rem unit instead of px for most lengths
   - To make it easy to **scale the entire layout down** (or up) automatically
   - **Helpful trick:** setting 1rem to 10ox for easy calculations
3. Flexible Images
   - By default, images **don't scale automatically** as we change the viewport, so we need to fix that
   - Always use % for image dimensions, together with the max-width property
4. Media Queries
   - Bring responsive sites to life!
   - To change CSS styles on **certain viewport widths** (called breakpoints)

**Desktop-First VS. Mobile-First Development**

Desktop-First:

- Start writing CSS for the desktop: **large screen**
- Then, media queries **shrink design** to smaller screens.

Mobile-First:

- Start with CSS for mobile devices: **small screen**
- Then, media queries **expand design** to a large screen
- Forces us to reduce websites and apps to the **absolute essentials.**

### How REM and Max-width work

[Values and units in CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)

### How Media-queries work (with max-width)


Response design principles


# The process behind building a website

1. Define
2. Plan
3. Sketch
4. Design and build
5. Test ans optimize
6. Launch
7. Maintain and update

##### #1 Define the project

- Define **WHO the website is for**. Is it for yourself? For a client of your agency or your freelancing business
- Define **WHAT the website is for**. In other words, define **business and user goals** of your website project (Providing information? Selling something? Entertaining the users?)

  > **Business goal example**: Selling premium dog food
  > **User goal example**: Finding high-quality dog food for good price

- Define **a target audience**. Be really specific if possible and if it makes sense for your website

##### #2 Plan the project

- Plan and gather **website content**: copy(text), images, videos, etc.
- Content is usually provide by the client, but you also can help them produce and find some content (simply finding free images is easiest, but if they want copy, charge them for extra)
- For bigger sites, plan out the **sitemap**: what pages the site needs, and how they are related to one another (content hierarchy)
- Based on the content, plan what **sections** each page needs in order to convey the content's message, and in which order

##### #3 Sketch layout and component ideas

- Think about what **components** you need, and how you can use them in **layout patterns**
- **Get ideas out of your head**: sketch them with **pen and paper** or with some design software (e.g. Figma)
- This is and **iterative process**, experiment with different components and layouts, until you arrive a first good solution
- You don't need to sketch everything, and **don't make it perfect**. At some point, you're ready to jump into HTML and CSS

##### #4 Design and build the website

- Use decisions, content and sketches from Steps 1, 2, 3 to **design and build the website with HTML and CSS** (designing in the browser)
- You already have the **Layout** and **components** that you selected in Step 3. In this step, you need to design the actual **visual styles**
- Create the design based on selected **website personality**, the **design guidelines** and **inspiration**
- Use the **client's branding** (if it exists already) for design decisions whenever possible: **colors, typography, icons**, etc.

##### #5 Test and optimize

- Make sure website works well in **all major browsers** (Chrome, Safari, Edge, Firefox)
- Test the website on **actual mobile devices**, not just in DevTools
- Optimize all images, in terms of dimensions and file size
- Fix simple **accessibility** problems (e.g. color contrast issues)
- Run the **lighthouse** performance test in Chrome DevTools and try to fix reported issues
- Think about **Search Engine Optimization** (SEO)

##### #6 Launch the masterpiece

- Once all work is done, everything is perfect, and you got approval from your client (or yourself), it's time to **share your masterpiece with the world!**
- Upload your website to a **hosting platform**. There are countless platforms.
- Choose and buy a great **domain name**, one that represents the brand well, is memorable and easy to write

##### #7 Maintain and keep updating the website

- Launching is not the end
- Keep the website content **updated over time**. If you're working with a client, you can create a monthly maintenance contract (recurring revenue)
- Install **analytics software** (e.g. Google Analytics or Fathom) to get statistics about website users. This may **inform future changes** in the site structure and content
- A **blog** that is updated regularly is a good way to keep users coming back, is also good for SEO.


The process of building websites


1. Free fonts
   [Google fonts](https://fonts.google.com/)

2. Type scale
   [Type scale](https://typescale.com/)

3. Palette

   - [Open color](https://yeun.github.io/open-color/)

   - [Tailwindcss Colors](https://tailwindcss.com/docs/customizing-colors)

   - [Flat UI Colors 2](https://flatuicolors.com/)

   - [palleton.com]()

4. Contrast checker
   [coolors](https://coolors.co/)

5. Free images

   - [Unsplash]()(best->)

   - [Pexels]()

   - [Drawkit]()

   - [Undraw]()

6. Compress images
   [Squoosh]()

7. Free icons

   - [HeroIcons]()
   - [Phosphor icons]()
   - [Ionicons]()
   - [Icons8]()

8. Tint and shade generator
   [Tint&shade generator](https://maketintsandshades.com/)

9. Browser compatibility
   [Can I Use](https://caniuse.com/)
10. Compress images
    [Squoosh](https://squoosh.app/)
11. Free animation images
    [undraw](https://undraw.co/illustrations)


ToolBox

WEB DESIGN


### FLEXBOX

#### #1 What does "layout" mean?

> Layout is the way text, images and other content is placed and arranged on a webpage
> Layout gives the page a visual structure, into which we place our content
> **Building a layout**: arrange page elements into a visual structure, instead of simply having them placed one after another (normal flow)

#### #2 Page layout VS. component layout

#### #3 The 3 ways of building layouts with CSS

1. Float layout
   > The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated fast.
2. Flex box
   > Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts.
3. CSS GRID
   > For laying out elements in a fully-fledged, 2-dimensional grid. Perfect for page layouts and complex component layouts.

### FLEXBOX

#### #1 What is FlexBox?

- Flexbox is a set of related **CSS properties** for **building 1-dimensional layouts**
- The main idea behind flexbox is that empty space inside a container element can be **automatically divided** by its child elements
- Flexbox makes it easy to automatically **align items to another** inside a parent container, both horizontally and vertically
- Flexbox solves common problems such as **vertical centering** and creating **equal-height columns**
- Flexbox is perfect for **replacing floats**, allowing us to write fewer and cleaner HTML and CSS code

#### #2 Flexbox terminology

1. Flex container
2. Flex items
3. Main axis
4. Cross axis

```CSS
display: flex;
```

| Flex container                                                                                                                                                              | Flex items                                                                                                                                    |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **gap: 0** \| \<length\> <br /> To create **space between items**, without using margin                                                                                     | **align-self: auto** \| stretch \| flex-start \| flex-end \| center \| baseline <br /> To **overwrite** align-items for individual flex items |
| **justify-content: flex-start** \| flex-end \| center \| space-between \| space-around \| space evenly <br /> To align items along main axis (**horizontally**, by default) | **flex-grow: 0** \| \<integer> <br /> To allow en element **to grow** (0 means no, 1+ means yes)                                              |
| **align-items: stretch** \| flex-start \| flex-end \| center \| baseline <br /> To align items along across axis (**vertically**, by default)                               | **flex-shrink: 1** \| \<integer> <br /> To allow en element **to shrink** (0 means no, 1+ means yes)                                          |
| **flex-direction: row** \| row-reverse \| column \| column-reverse <br /> To define which is the **main axis**                                                              | **flex-basis: auto** \| \<length> <br /> To define an item's width, instead of the width property                                             |
| **flex-wrap: nowrap** \| wrap \| wrap-reverse <br /> To allow items to **wrap into a new line** if they are too large                                                       | **flex: 0 1 auto** \| \<integer> \<integer> \<length> <br /> Recommended shorthand for flex-grow, -shrink, -basis.                            |
| **align-content: stretch** \| flex-start \| flex-end \| center \| space-between \| space-around <br /> Only applies when there are **multiple lines** (flex-wrap: wrap)     |                                                                                                                                               |

**Switching flex-direction to column**
With flex-direction set to column

- align-items aligns items **horizontally**, no longer vertically
- justify-content aligns items vertically, no longer horizontally
- gap acts like **margin-bottom**, no longer like margin-right

### CSS GRID

#### #1 What is CSS Grid?

- CSS Grid is set of **CSS properties** for **building 2-dimensional layouts**
- The main idea behind CSS Grid is that we **divide a container element into rows and columns** that can be filled with its child elements
- In two-dimensional contexts, CSS Grid allows us to write **less nested HTML** and **easier-to-read CSS**
- CSS Grid is **not meant to replace FlexBox**! Instead, they work perfectly together. Need a 1D layout? Use flexbox. Need a 2D layout? Use CSS Grid.

#### #2 BASIC CSS GRID Terminology

1. Grid container
   ```CSS
    display: grid;
   ```
2. Grid items
3. Row axis
4. Column axis

#### #3 MORE CSS GRID TERMINOLOGY

- Grid lines
- Grid cells (might be filled by a grid item or not)
- Gutters (gaps)
- Grid track/row
- Grid track/column

#### #4 properties can be used

| Grid container                                                                                                                                                                                                                        | Grid items                                                                                                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **grid-template-rows: \<track size>\*** <br /> **grid-template-columns: \<track size>\*** <br /> To establish the grid **row and column tracks**. One length unit for each track. Any unit can be used, new **fr** fills unused space | **grid-column: \<start line> / \<end line>** \| span \<number> <br /> **grid-row: \<start line> / \<end line>** \| span \<number> <br /> To **place a grid item** into a specific cell, based on line numbers. span keyword can be used to span an item across more cells |
| **row-gap: 0** \| \<length> <br /> **column-gap: 0** \| \<length> <br /> **gap: 0** \| \<length> <br /> To **create empty space** between tracks                                                                                      | **justify-self: stretch** \| start \| center \| end <br /> **align-self: stretch** \| start \| center \| end <br /> To **overwrite** justify-items/align-items for single items                                                                                           |
| **justify-items: stretch** \| start \| center \| end <br /> **align-items: stretch** \| start \| center \| end <br /> To align items inside rows/columns(**horizontally**/**vertically**)                                             |                                                                                                                                                                                                                                                                           |
| **justify-content: start** \| start \| center \| end \| ... <br /> **align-content: start** \| start \| center \| end \| ... <br /> To align entire **grid inside grid container**. Only applies if container is larger than the grid |                                                                                                                                                                                                                                                                           |

- Aligning tracks inside container: distribute empty space

```CSS
   justify-content: center;
   align-content: center;
```

- Aligning items INSIDE cells: moving items around inside cells

```CSS
   align-items: center;
   justify-items: center;
```


3 ways of building layouts


**Basics**

- CSS stands for **C**ascading **S**tyle **S**heets

- CSS describes the visual style and presentation of the content written in HTML

- CSS consists of countless properties that developers use to format the content: properties about font, text, spacing, layout, etc.

**Example (A CSS rule)**

```CSS
h1 {
  color: blue;
  text-align: center;
  font-size: 20px;
}
```

- h1 -> Selector
- {...} -> Declaration block
- font-size: 20px; -> Declaration/Style
- font-size -> Property
- 20px -> Value

**3 ways of writing CSS**

- inline CSS (should never be used)

```CSS
<h1 style="color:blue">The Code Magazine</h1>
```

- Internal CSS (inside head tag)

```CSS
<style>
  h1 {
    color: red;
  }
</style>
```

- External CSS (in a style.css file and link it inside the head tag)

```HTML
<link href="../public/css/style.css" rel="stylesheet" />
```

```CSS

```

---

#### CSS theories

##### #1 Conflicts between selectors

```HTML
<p id="author-text" class="author">
 Posted by Laura Jones on Monday, June 13 2023
</p>
```

```CSS
 .author {
   font-style: italic;
   font-size: 18px;
 }

 #author-text {
   font-size: 20px;
 }

 p,
 li {
   font-family: sans-serif;
   color: #444444;
   font-size: 22px;
 }
```

- There are multiple selectors selecting the same element, which one of them applies?
- All of them. All rules and properties applied.
- But there are conflicting font-size declarations. Is it 18px, or 20px or 22px?
  > highest priority --------> lowest priorities
  > (5) ↓ Declarations marked !important
  > (4) ↓ Inline style (style attribute in HTML)
  > (3) ↓ ID (#) selector
  > (2) ↓ Class (.) or pseudo-class ( : ) selector
  > (1) ↓ Element selector (p, div, li, etc.)
  > (0) ↓ Universal selector (\*)

---

##### #2 Inheritance

How inheritance works?

```HTML
<body>

  <nav>
    This is a navigation
  </nav>

  <h1>My website</h1>

  <p>
    The text in this paragraph is completely irrelevant
  </p>

</body>
```

```CSS
  body {
    color: #444444;
    font-size: 16px;
    font-family: sans-serif;
    border-top: 10px solid #1098ad;
  }

  h1 {
    color: #1098ad;
    font-size: 32px;
    text-transform: uppercase;
  }
```

- The border property DOES not get inherited.
  > Not all properties get inherited. It's mostly ones related to text: font-family, font-weight, font-style, color, etc.
- h1 { styles } are OVERRIDING inherited styles.

---

##### #3 CSS Box Model

**Layers of the CSS Box Model**

- Content: Text, images, etc.
- Border: A line around the element, still inside the element
- Padding: Invisible space around the content, inside the element
- Margin: Space outside the element, between elements
- Fill area: Area that gets filled with background color or background image

**Element height and width calculation**

- **Final element width** = left border + left padding + width + right padding + right border
- **Final element height** = top border + top padding + height + bottom padding + bottom border
  > We can specify all these values using CSS properties
  > This is the default behavior, but we can change it

**Collapsing margins** [Margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)

> The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

---

##### #4 Types of Boxes

**Block level elements**

- Elements are formatted visually as **blocks**
- Elements occupy **100% of parent element's width**, no matter the content
- Elements are **stacked vertically** by default, one after another
- The box model applies as showed earlier

> Default elements: body, main, header, footer, section, nav, aside, div, h1-h6, p, ul, ol, li, etc.
> With CSS: display: block

**Inline level boxes**

- Occupies only the space **necessary for its content**
- Causes **no line-breaks** after or before the element
- Box model applies in a different way: **heights and widths do not apply**
- **Paddings and margins** are applied **only horizontally** (left and right)

> Default elements: a, img, strong, em, button, etc.
> With CSS: display: inline

**Inline-block level boxes**

- Looks like inline from the **outside**, behaves like block-level on the **inside**
- Occupies only content's space (same as inline-level boxes)
- Causes no line-breaks (same as inline-level boxes)
- Box model applies as showed (same as block-level boxes)
- With CSS: display: inline-block

##### #5 Absolute positioning

| Normal flow                                                            |                                         Absolute positioning                                          |
| ---------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------: |
| Default positioning                                                    |                                             right-aligned                                             |
| Element is "**in** flow"                                               |                      Element is removed from the normal flow: "**out of** flow"                       |
| Elements are simply laid out according to their order in the HTML code |                         No impact on surrounding elements, might overlap them                         |
|                                                                        | We use top, bottom, left or right to offset the element from its **relatively positioned** containers |
| position: relative                                                     |                                          position: absolute                                           |



## What is HTML

-Hypertext Markup Language
-HTML is a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
-HTML consists of elements that describe different types of content: paragraphs, links, headings, images, videos, etc.
-Web browsers understand HTML and render code as websites.

## Anatomy of an HTML element

```html
<p>HTML is a Markup language</p>
```

1. Opening tag: Name of the element, wrapped in < and >

2. Content: Content of the element, in this example text. But it might be another element (child element). Some elements have no content (e.g. <img>).

3. Closing tag: Same as Opening tag, but with a /. When element has no content, it's omitted.

## Semantic HTML tags:

```html
<strong></strong> to replace <b></b>

emphasize: (to make the words italic)
<em></em> to replace <i></i>
```

Image tag:

```html
<img src="some.png" alt="my picture" />
```

_alt_ attribute means alternative text.

## HTML entity


About HTML


### RGB Model

- Every color can be represented by a combination of RED, GREEN and BLUE.
- Each of the 3 base colors can take a value between 0 and 255, which leads to 16.8 million different colors.

#### Defining colors in CSS

1. RGB/RGBA Notation
   - Regular RGB Model
     rgb(0, 255, 255)
     rgb(244, 179, 63)
   - RGB with transparency("alpha")
     rgba(0, 255, 255, 0.3)
     rgba(244, 179, 63, 0.7)
2. Hexadecimal Notation

- instead of using a scale from 0 to 255, we go from 0 to ff (255 in hexadecimal numbers)
  #00ffff
- shorthand, when all colors are identical pairs
  #0ff

#### SHADES of GREY

- When colors in all 3 channels are the same, we get a grey color
- There are 256 pure greys to choose from
- two examples of them are
  rgb(69, 69, 69), #444444, #444
  rgb(183, 183, 183), #b7b7b7


Colors


| 符号 | 中文                     | 英文                                                                             |
| ---- | ------------------------ | -------------------------------------------------------------------------------- |
| ~    | 波浪号                   | Tilde.                                                                           |
| \`   | 刻度线，反引号，左引号   | Acute, back quote, grave, grave accent, left quote, open quote, or a push.       |
| \!   | 感叹号                   | Exclamation mark, exclamation point, or bang.                                    |
| @    | 艾特                     | Ampersat, arobase, asperand, at, or at symbol.                                   |
| \#   | 井号                     | Octothorpe, number, pound, sharp, or hash.                                       |
| $    | 美元符号                 | Dollar sign or generic currency.                                                 |
| %    | 百分号                   | Percent.                                                                         |
| °    | 度数                     | Degree.                                                                          |
| ^    | 脱字符                   | Caret, circumflex or mathematical hat operator.                                  |
| &    | 与和符                   | Ampersand, epershand, or and symbol.                                             |
| \*   | 星号，数学乘号           | Asterisk, mathematical multiplication symbol, and sometimes referred to as star. |
| (    | 左小括号，左圆括号       | Open parenthesis.                                                                |
| )    | 右小括号，右圆括号       | Close parenthesis.                                                               |
| \-   | 破折号或连字符           | Hyphen, minus or dash.                                                           |
| \_   | 下划线                   | Underscore.                                                                      |
| \+   | 加号                     | Plus.                                                                            |
| \=   | 等号                     | Equal.                                                                           |
| \{   | 左大括号，左花括号       | Open brace, squiggly brackets, or curly bracket.                                 |
| \}   | 右大括号，右花括号       | Close brace, squiggly brackets, or curly bracket.                                |
| \[   | 左中括号，左方括号       | Open bracket.                                                                    |
| \]   | 右中括号，右方括号       | Closed bracket.                                                                  |
| \|   | 竖线                     | Pipe or vertical bar.                                                            |
| \\   | 反斜杠，反斜线           | Backslash or reverse solidus.                                                    |
| /    | 正斜杠，正斜线，除法符号 | Forward slash, solidus, virgule, whack, and mathematical division symbol.        |
| :    | 冒号                     | Colon.                                                                           |
| ;    | 分号                     | Semicolon.                                                                       |
| "    | 双引号                   | Quote, quotation mark, or inverted commas.                                       |
| '    | 单引号                   | Apostrophe or single quote.                                                      |
| <    | 小于号                   | Less than or angle brackets.                                                     |
| \>   | 大于号                   | Greater than or angle brackets.                                                  |
| ,    | 逗号                     | Comma.                                                                           |
| \.   | 句号，点                 | Period, dot or full stop.                                                        |
| ?    | 问号                     | Question mark.                                                                   |


Keyboard key word list


### Jonas Schemedtmann

> If this is your first time ever writing code, please don't get overwhelmed. It's 100% normal that you will not understand everything at the beginning. Just don't think "I guess coding is not for me"!
> by Jonas Schemedtmann


Sentences about miscellaneous


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](last-day-in-seneca-2.jpeg)

... More content ...


Notification

I'm Looking forward to be hired

My skill stack

Daily ideas