프론트엔드 멘토(Frontend Mentor), 과제 결과 리포트!

자, 그렇다면 Frontend Mentor에서 제출한 과제에 대해 어떤 자동 보고서를 받을 수 있을까?

 

2020/12/24 - [Learn to Code] - HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트?

2020/12/24 - [Learn to Code] - Frontend Mentor, 과제 제출하기!

 

 

 

Frontend Mentor 홈페이지에서, 우측 상단 메뉴들 중 가장 오른쪽의 가장 위에 있는 사진 아이콘이 나(me)를 가리킨다. 그걸 누르면, "Profile", "Settings", Sign out"이 나오는데, 이중 Profile을 선택하자.

 

 

 

 

Profile 창으로 들어가면 기본으로 보여지는 곳이 Overview이다. 그 옆에 Solutions, Comments가 있다. 여기서 Solutions를 클릭한다.

 

 

 

 

그러면, 이제까지 내가 제출한 과제 답변들이 나온다. 쭈글이인 나는 가장 쉬운 과제 하나를 완료해서 올려놓았다. 결과가 보고싶은 과제의 빨간색 아이콘 "View Solution"을 클릭한다.

 

 

 

그러면 보고서가 짠하고 나타난다!

 

여기서 볼 수 있는 것은 두 가지가 있다:

1) 디자인 비교 (Design Comparison)

2) 리포트(Report): 접근성 이슈 / HTML 이슈

 

 

1) 디자인 비교

 

왼쪽이 내가 만든 것, 그리고 오른쪽이 파일 리소스로 제공받았던 목표 결과물 디자인이다.

아주 나름 비슷하게 되었따 >_< (가운데 흰색 부분이 더 크게 된 것 같지만..)

 

가운데 빨간색 스크롤을 클릭하고 양옆으로 드래그할 수 있다.

 

 

 

 

 

2) 리포트

 

디자인 비교 화면 밑으로 스크롤을 내리면, 코딩에 이슈가 있는지 볼 수 있다. 접근성 이슈가 있는지, HTML 이슈가 있는지를 보여준다. View Report를 누르면 상세 페이지가 나온다.

 

 

 

 

 

 

접근성 이슈는 없다고 나왔다!

 

 

 

내 HTML 코드에서 발견된 3가지 이슈!

 

HTML에서는 3개 이슈가 있다고 했는데, 사용한 <section> 태그에 h2~h6 제목 태그를 사용하지 않았다는 것이었다. Section 태그와 해딩 테그들이 세트로 다니는 거라는걸 이번에 처음 알았다. 물론 필수로 쓰지 않아도 되지만, SEO를 고려했을 때 최대한 따르는게 좋지 않을까..

 

 

이상 프론트엔드 멘토(Frontend) 사이트의 가입, 과제 다운로드, 답변 업로드, 그리고 보고서 확인까지 모든 과정을 살펴보았다. 도움이되는 사이트를 우연히 찾게 된게 너무 신이나서, 다른 분들도 신나시라고 블로그에 공유한다.