Update code

This commit is contained in:
2023-08-01 16:46:33 +07:00
parent c59d07649b
commit 5b9f26f42d
52 changed files with 814 additions and 622 deletions
+68
View File
@@ -0,0 +1,68 @@
# 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](<https://www.figma.com/file/Q0oRUMv9ESYXfsIZjJXJn8/Food-Hut-(-Food-Ordering-Responsive-Design)-(Community)>)
- Plan: [practice-two](https://docs.google.com/document/d/1h43ur7SoS9SYnvJJ75ajS7sq4lzrROyQvuVCrFlXoXk/edit?usp=sharing)
- 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](https://www.w3schools.com/css/css_grid.asp), 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](https://www.w3schools.com/css/css_grid.asp).
## Technical
- [HTML5](https://www.tutorialspoint.com/html5/html5_overview.htm): 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](https://www.htmlgoodies.com/html5/an-overview-of-css3/): Cascading Style Sheets (CSS) is a language used to illustrate a documents 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](https://pugjs.org/api/getting-started.html): 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](https://sass-lang.com/): Scss is a stylesheet language thats 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](phanhuuloi15@gmail.com).