프런트 엔드 코딩 챌린지를 시작하는 방법은 무엇입니까? - 프론트엔드 멘토

6423 단어 frontendmentorwebdevcssbeginners
우리 모두는 Frontend Mentor이라는 웹사이트가 있다는 것을 알고 있습니다. 여기에서 프론트엔드 기술을 연습하고 향상시키기 위한 멋진 실제 프론트엔드 챌린지를 제공합니다.

Frontend Mentor 덕분에 10개 정도의 도전을 완료했고 정말 많은 것을 배웠습니다.

시작하다


  • Frontend Mentor로 이동합니다.
  • Github에 로그인합니다.
  • 챌린지 탭으로 이동합니다.


  • 챌린지를 열고 스타터 파일(.zip) 다운로드



    • 프로젝트 시작


  • 프로젝트 폴더를 엽니다.
  • 새 디렉토리 생성

    • frontend-[CHALLENGE NAME]
├── assets
│   ├── designs
│   └── images
├── css
│   └── styles.css
├── index.html
├── readme.md
├── scripts
│   └── scripts.js
├── style-guide.md
└── .gitignore


    위의 프로젝트 구조를 사용합니다. 초보자로부터 style-guide.md 및 이미지 파일을 받게 됩니다. 여기에 복사하십시오.
    designs 디렉토리에는 출력 스크린샷이 포함되어 있으며 원하는 경우 readme.md 에 포함할 수 있습니다.

    HTML 시작 템플릿



    내 Visual Code Editor에서 작은 스니펫을 만들었고 하나의 탭에서 Frontend Mentor용 시작 템플릿을 생성합니다.

    여기있어,



    시작 템플릿은 다음과 같습니다index.html.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Frontend Mentor | Challenge Name</title>
    <meta
      name="description"
      content="This is a front-end coding challenge - Challenge Name"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
      href="https://fonts.googleapis.com/"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
      <!-- Happy Coding -->
  </body>
</html>


    CSS 스타일



    CSS에 관해서는 항상 처음부터 시작하는 것을 좋아합니다.

    No website is completely unstyled.



    브라우저에는 제목과 단락에 여백을 추가하고 모든 요소에 글꼴 속성을 적용하는 User Agent Stylesheet라는 기본 스타일 시트가 있습니다.

    나는 보통 모든 스타일을 재설정하고 처음부터 시작합니다.

    여기 내 styles.css
    :root{
  /* colors and fonts */
  --font: "Montserrat", sans-serif;
  --white: #ffffff;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}

html, body{
  height: 100%;
}

body{
  width: 100%;
  font-family: var(--font);
}

/* Other rule-sets */


    이제 페이지 디자인을 위한 실제 콘텐츠 작성을 시작할 수 있습니다.

    프론트엔드 멘토 챌린지는 프론트엔드 기술을 향상시키려는 사람들에게 정말 도움이 될 것입니다.
    구축(deps-dev): 25.5.1에서 26.1.0으로 업그레이드
    iOS runtime 실전 응용:연결 대상

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage