PROJECT

• This is a basic web application with responsive written by HTML5, CSS3, Pug and SCSS.

Overview

• Introduce:
  • Build a website using HTML5, CSS3, Pug and SCSS.
• Design: link
• Plan: practice-two
• Deploy: Update later

Requirements

• Apply knowledge to responsive website.
• Getting the code to work cross-browsers latest version (Chrome, Firefox, MS Edge, Opera, Safari)
• Use media queries for popular screen sizes. ( 428px, 768px, 1440px)
• Apply Grid Layout, Pugjs and SCSS on project.

Target

• Build a responsive website.
• Know how to use Pugjs and SCSS on project.
• Understand the concept of Grid Layout.

Technical

• HTML5: CSS (Cascading Style Sheets) consist of a group of formatting rules that you use to control the layout and appearance of the content on a web page.
• CSS3: Cascading Style Sheets (CSS) is a language used to illustrate a document’s look, style, and format in any markup language. In simple words, it is used to style and organize the layout of Web pages. CSS3 is the latest version of an earlier CSS version, CSS2.
• Pugjs: Pug.js is a template engine for Node.js and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML.
• SCSS: Scss is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

Information

• Timeline:
  • Estimate: 6 days
  • Actual: 13 days.
  • Calendar:
    • Start: 2023/07/13
    • End: 2023/08/01

Development Environment

• Node: v18.17.0
• Npm: v9.6.7

Getting started

• Step 1: Clone repository.
  • With HTTPS:
    • $ git clone https://github.com/Nez27/loi-phan-internship.git.
• Step 2: Move to folder which just cloned in your computer.
  • cd ./loi-phan-internship.
• Step 3: Move it to branch html-css-practice-two.
  • $ git checkout html-css-practice-two.
• Step 4: Move to folder practice-02.
  • $ cd ./practice/practice-02.
• Step 5:
  • Open terminal > npm i.
• Step 6:
  • Run npm start.
• Step 7:
  • Open http://localhost:1234/ in browser.

Author

• Loi Phan.
• Email: phanhuuloi15@gmail.com.