https://github.com/antonharbers/homepage-demo
Homepage Demo - The Odin Project: https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage
https://github.com/antonharbers/homepage-demo
css eslint html icons javascript npm responsive-design
Last synced: 3 months ago
JSON representation
Homepage Demo - The Odin Project: https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage
- Host: GitHub
- URL: https://github.com/antonharbers/homepage-demo
- Owner: AntonHarbers
- Created: 2023-07-07T09:17:14.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-18T11:58:31.000Z (over 1 year ago)
- Last Synced: 2025-01-19T18:09:25.270Z (4 months ago)
- Topics: css, eslint, html, icons, javascript, npm, responsive-design
- Language: HTML
- Homepage: https://antonharbers.github.io/Homepage-Demo/
- Size: 7.28 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The Odin Project - Homepage
A Portfolio page created using HTML, CSS and Javascript for the Odin Project.
[Live Link](https://antonharbers.github.io/Homepage-Demo/)
## Folder Structure
```
/.git -> This git repository
/node_modules -> Node Dependencies
/src
/Images -> Contains all images used (Favicon, repo image, app images, logo etc.)
/styles -> Contains all the stylesheets.
script.js -> Prevent Default Submit behaviour script
.eslintrc.js -> Eslint Config File
.gitignore -> Gitignore for this repo
index.html -> Entry Point and contains all HTML
package-lock.json -> Package-lock for Node
package.json -> Package.json for Node
README.md -> This readme File
```
## Key Concepts
### Linting
ESLint is a static code analysis tool for identifying problematic patterns in JavaScript code. It helps maintain code quality and consistency, especially in projects with multiple contributors.
Code Example:
JS:
```
// ESLint configuration example
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
};
```
This is a basic ESLint configuration file. It defines the environment, extends the recommended ESLint rules, sets ECMAScript version, and includes custom rules for indentation, linebreaks, quotes, and semicolons.
### NPM
NPM (Node Package Manager) is the default package manager for JavaScript's runtime environment Node.js. It's used to manage project dependencies and run scripts.
Code Example:
JSON:
```
// Example of a package.json file
{
"name": "your-project-name",
"version": "1.0.0",
"description": "Your project description",
"main": "index.js",
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Your Name",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}
```
This package.json file is a standard for any Node.js project. It includes metadata like name, version, description, main entry point, scripts (like start and test), author, license, and project dependencies (like Express).
### Devicon Icons
Devicon is an icon library featuring programming languages, design and development tools. It's a great visual aid for tech stacks in your portfolio or documentation.
Code Example:
HTML:
```
```
This HTML snippet demonstrates how to include the Devicon library via CDN and use specific icons (JavaScript and React in this case) in your webpage.
### Responsive Styling
Responsive layout in CSS ensures that your webpage looks good on all devices. It uses media queries and flexible grid layouts to adapt the design to various screen sizes.
Code Example:
CSS:
```
/* Example of a basic responsive layout */
.container {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
```
The .container class uses a flex display to align items. The media query adjusts the layout for screens smaller than 600px by changing the flex direction to column, making it responsive.
## Final Notes
Jumping into this portfolio project was a cool ride into the world of web development. Getting my hands dirty with ESLint was eye-opening – it’s like having a neat-freak for your code, keeping everything tidy. NPM was the trusty sidekick, handling all those packages and scripts like a boss.
Adding flair with Devicon icons was a slick touch, giving the tech side of things a visual punch. The real game-changer, though? Mastering Responsive Layout with CSS. It’s all about making your site look good on any device – essential stuff in our screen-filled world.
All in all, this project was a solid mix of learning and fun. It’s not just about coding; it’s about creating something that clicks.