All solutions

What are you most proud of, and what would you do differently next time?

1. How to add HTML elements and styles using javascript

1. Using innerHTML in javascript

• In this method, I structure the HTML in Javascript files and added it to the document using innerHTML this attribute.
• Advantage: It can add HTML when needed.
• Disadvantage: It makes the JS file too long.

const shareHTML = `
    
        SHARE
        
        
        
    
    
      
      
      This is a share button
      
    `;
const sharePanel = document.createElement("div");
sharePanel.classList.add("sharePanel");
sharePanel.innerHTML = shareHTML;
sharePanel.classList.add("shareStyle");

1. Place the HTML in the HTML files, CSS in the CSS stylesheet. We can include the HTML and CSS in advance in HTML and CSS stylesheet. And using Javascript only controls the display attribute of the elements.

• Advantage: This method can define the HTML and CSS of extra content in advance. The presentation and the control logic are separated, which makes the code neat.

socialPanel.style.display = "none";

2. cannot change its fill using javascript (if i have to change the svg fill using javascript) To change the fill of a svg image, the svg image has to be inline. If the svg is inside a label, its fill cannot be changed by setting style.fill. However, placing the style setting all in stylesheets may make this javascript file look better.

  Alternate Text
  

  const shareSVG = shareButton2.querySelector("#shareSVG");
  const pathElement = shareSVG.querySelector("path");
  pathElement.style.fill = "hsl(210, 46%, 95%)";

What challenges did you encounter, and how did you overcome them?

How To set the extra panel's position?

• What I do: I use absolute position in this case. I use javascript to calculate the position of the button and get panel's position accordingly. Then I set the panel's position using "top" and "left" attributes.
• What's the problem? This means I have to do this action according to the screen's size since I only do this in larger screen. This may cause different media queries from those in CSS stylesheet. In logic, it may be a better way to make the position relative, but how to do it?

  if (window.innerWidth > 910) {
    const buttonRect = shareButton.getBoundingClientRect();
    const buttonX = buttonRect.left;
    const buttonY = buttonRect.top;
    //use the button position to set panel position
    socialPanel.style.position = "absolute";
    socialPanel.style.top = `${buttonY - 100}px`;
    socialPanel.style.left = `${buttonX - 150}px`;
  }

How Javascript adjust to responsive design? How javascript may use media Queries? It is a good idea to use media queries in javascript too? What will be a safer way to use media queries in javascript? What are the common scenarios? If not using media queries, how to adjust js codes for different screen sizes just like in this case?

• What I do? I put all CSS relative codes in CSS stylesheet including media queries. This means adjusting the styles of the extra panel in stylesheet only.

What specific areas of your project would you like help with?

1. How To set the extra panel's position relatively?
2. How Javascript adjust to responsive design? How javascript may use media Queries?

What are you most proud of, and what would you do differently next time?

1. How to use grid to layout a design

What challenges did you encounter, and how did you overcome them?

Opacity setting of the font color seems not working for me. Just don't know why?

What specific areas of your project would you like help with?

Opacity setting of the font color seems not working for me. Just don't know why?

What are you most proud of, and what would you do differently next time?

1. How to use grid to layout a design

What challenges did you encounter, and how did you overcome them?

Opacity setting of the font color seems not working for me. Just don't know why?

What specific areas of your project would you like help with?

Opacity setting of the font color seems not working for me. Just don't know why?

What are you most proud of, and what would you do differently next time?

1. How to use flex box and grid to build responsive layout

• Use flex box. Be familar with attributes like "flex-wrap","align-items","justify-content" and so on.

form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.name {
  flex-grow: 1;
  flex-basis: 160px;
}
.email {
  flex-grow: 3;
  flex-basis: 200px;
}
button {
  flex-grow: 1;
  flex-basis: 80px;
}

• Use fluid type and space This makes the font size changing accordingly. It is based on a useful tool - utopia. But in this case, I only use "--step-0".

:root {
    --step--2: clamp(0.6rem, 0.5032rem + 0.4128vi, 0.8748rem);
    --step--1: clamp(0.75rem, 0.629rem + 0.5161vi, 1.0935rem);
    --step-0: clamp(0.9375rem, 0.7863rem + 0.6451vi, 1.3669rem);
    --step-1: clamp(1.1719rem, 0.9829rem + 0.8063vi, 1.7086rem);
    --step-2: clamp(1.4648rem, 1.2286rem + 1.0079vi, 2.1357rem);
    --step-3: clamp(1.8311rem, 1.5358rem + 1.2599vi, 2.6697rem);
    --step-4: clamp(2.2888rem, 1.9197rem + 1.5749vi, 3.3371rem);
    --step-5: clamp(2.861rem, 2.3996rem + 1.9686vi, 4.1714rem);
  }

• Use relative unit like rem
• Use media quires when necessary.

What challenges did you encounter, and how did you overcome them?

How can I develop the desktop design without using media quires, but using flex box or grid only?

I added one media query and in larger screen I used grid and specifically put different elements in different columns.

What specific areas of your project would you like help with?

How can I develop the desktop design without using media quires, but using flex box or grid only?

What are you most proud of, and what would you do differently next time?

1. How to use preprocessor like SaSS

• Define variables

$primary-color: #3498db;

• Define mixin
• Define combined rules

However, in this case, I don't think it is necessary to use SaSS, since there are limited variables.

2. How to add strikethrough

.strikethrough-text {
  text-decoration: line-through;
}

3. How to add a responsive picture The image source will change according to the media scale, instead of simply switching the size of image. source only indicate the source of the image. But most of css styles are still changed by img

This can match with media queries. The image will change and some other styles.

@media (min-width: 43rem)

What challenges did you encounter, and how did you overcome them?

When it is necessary to use preprocessor like SaSS to style the css codes? I did not use preprocessor in the project, but I still add one potential sass file if i would use sass.

What specific areas of your project would you like help with?

When it is necessary to use preprocessor like SaSS to style the css codes?

What are you most proud of, and what would you do differently next time?

1.How to import google fonts from the link and use variable weight to reduce code

:root {
  --font-young-serif: "Young Serif", serif;
  --font-outfit: "Outfit", sans-serif;
}

And apply font-weight to specific class.

html {
  font-family: var(--font-outfit);
  font-weight: 400;
}

2.How to change the markers' color of list items

ol::marker {
  color:red;
}

3.How to set a divider

using "border" to set its styles:

hr {
  border: none;
  border-bottom: 0.0625rem solid var(--color-light-grey); /* 1px converted to rem */
}

4.Mobile-first design : try to start from min-width

To make it responsive to all screen sizes, the better way is to design the styles starting from the min-width. Adjust to the screen as it scales up.

What challenges did you encounter, and how did you overcome them?

1.Mobile-first design : try to start from min-width

To make it responsive to all screen sizes, the better way is to design the styles starting from the min-width. Adjust to the screen as it scales up.

What specific areas of your project would you like help with?

How to adjust the padding between main and body when it is in mobile size?

What are you most proud of, and what would you do differently next time?

1. More familiar with building html and css files in the following process:

• Setup Github remote and local repository

echo "# git-test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com//git-test.git
git push -u origin main

• Check design files and list all elements included
• Completed html files which includes all listed elements
• Completed style file in order of root color, font import, global color and font, size and layout
• Make css more responsive by using "rem/em" unit, flex/grid layout
• Check the website in browser starting from mobile size; adjust according to the screen scale
• Check whether it meets WCAG standards
• Upload to Github and Github Page
• Edit README.md file
• Upload README.md file and submit

2. How to place the element in the middle of its parent container

  body{
	    width: 100vw;
	    display: flex;
	    justify-content: center;
	    align-items: center;
    }

==if this is not working, add following code==

    main {
	    /* Place main in the middle of body*/
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
    }

What challenges did you encounter, and how did you overcome them?

About margin management?

In the previous task, I found margin management confusing. In this task, I only used margin-bottom attribute instead of setting all different paddings and margins.

• What is good about this way? If I need to change the margin between two elements, I don't need to change both of the margin. I just need to change one margin-bottom to adjust the marin. The css file will be more neat and controllable.
• About margin collapse Margin collapse should be avoided usually as it may cause unexpected collapse and unexpected layout. According to most of lessons, it occurs between block elements in the same level or between the last element and its parent element. However, in reality, I just never see margin collapse happens?

What specific areas of your project would you like help with?

1. Is there better way to management all margins and paddings of layouts?

2. How to handle margin collapse?

What are you most proud of, and what would you do differently next time?

1.How to make better use of figma files to build html and css files

• We can check the layers and frames of figma design and create html labels according to the design.
• Check figma's library to include all defined colors and typography.

2. How to place the component in the middle of its parent container

• Make the parent container a flexbox and use align-items and justify-content.

display: flex;
align-items: center;
justify-content: center;

3. Variable font and static font

• Variable font includes different font styles and font weights of the font. In this case, the definition of font family decreased as we can define only one variable font and change its styles and weigths accordingly.
• Static font means we need to create font family for every variable of the font and give them different names.

What challenges did you encounter, and how did you overcome them?

1.How to reduce the font size in mobile layout without using media queries? Confusing and just don't know the solution.

What specific areas of your project would you like help with?

1.How to reduce the font size in mobile layout without using media queries? Confusing and just don't know the solution. 2. Is there other ways to place the element in the center of its parent container except the code below

display: flex;
align-items: center;
justify-content: center;

What are you most proud of, and what would you do differently next time?

The process of turning figma design into html and CSS files

• plan through the project
• complete basic html files - include all elements related to content
• complete general style - include color and typography
• complete layout setting - include the size and layout
• test and make the design responsive - Inspect in the browser to check from min-size to check if it is responsive; fix the code
• check if it meets WCAG requirements and fix the code
• complete README.md

how to use val to define global color

:root {
  --color-primary: #2c7dfa;
  --color-primary-shade: #3685ff;
  --color-dark-navy: #1f314f;
  --color-grey: #7d889e;
  --color-light-grey: #d5e1ef;
}

What challenges did you encounter, and how did you overcome them?

how to use github pages

Check online and follow the guide.

practice how to add online font into the page

Check Resource 1 - This helped me for adding online google font into my files.

What specific areas of your project would you like help with?

How to manage layout in a more effective way?

I was struggling to choose between flexbox and grid systems. Sometimes, I thought it was ok to use both but it was not. It is still confusing to me.

How to manage margin and fix margin collapse?

I thought margin collapse would happen naturally, but in this case margin between elements are not doing margin collapse. Instead, the margin between the elements are added together. I am still confusing how to manage the margin to make it neat.