microverse HTML CSS capstone project online shop for electronics

온라인 상점 (색인 및 검색 페이지) - 16 시간 내장 된 시간

이것은 Microverse Module HTML/CSS의 캡 스톤/시험 프로젝트입니다. HTML, CSS3/SCSS, Bootstrap 및 Font Awesome을 사용하는 공예품 (수제) 웹 사이트입니다.

여기에서 프로젝트의 비디오 프레젠테이션을보십시오. 웹 사이트는이 모형을 사용하여 구축되었습니다

인덱스 페이지의 스크린 샷

검색 페이지의 스크린 샷

이 프로젝트는 그리드 및 플렉스 제안을 광범위하게 사용하여 HTML 및 CSS/SCSS를 사용하여 구축되었습니다. 모든 SCSS 핵심 기능 (변수, 믹스 인 및 색상 함수를 사용했습니다.

구축

• HTML
• CSS3/SCSS
• 부트 스트랩
• 글꼴 멋진 아이콘
• Webhint/Stylelint Linters
• SCSS 변경 및 실행을위한 NPM 스크립트

내 중간 기사를 읽어 웹 사이트를 구축 할 때 사용하는 워크 플로를 확인할 수 있습니다.

라이브 데모

라이브 데모 색인 페이지

라이브 데모 검색 페이지

(탐색 링크와 검색 양식을 사용하여 페이지를 탐색 할 수도 있습니다.)

로컬 사본을 올리십시오.

설정

로컬로 프로젝트를 복제하십시오.

라이터

1. npm install 실행하십시오.
2. HTML 및 CSS 파일을 확인하려면 npm run test 실행하십시오.
3. 실행 npm run watch 통해 SCSS 변경 사항을 시청하십시오.

전개

IDE/텍스트 편집기에 라이브 서버 플러그인을 설치하고 실행하여 루트 디렉토리에서 실행하십시오.

향후 개선

페이지에 백엔드를 추가하십시오

저자

? Cristian Viorel Ceamatu

• 이메일 : [email protected]
• github : https://github.com/cristianceamatu
• 트위터 : https://twitter.com/cristianceamatu
• LinkedIn : https://www.linkedin.com/in/ceamatu-cristian/

지원을 보여주세요

이 프로젝트가 마음에 들면 옆을주세요!

특허

이 프로젝트는 MIT 라이센스가 부여되었습니다.