{"id":19602723,"url":"https://github.com/antoniosertic23/autodegen","last_synced_at":"2026-05-17T01:37:51.888Z","repository":{"id":248585906,"uuid":"828568148","full_name":"AntonioSertic23/Autodegen","owner":"AntonioSertic23","description":"This project is my practice ground to apply the concepts I've learned from the Udemy course Advanced CSS and Sass by Jonas Schmedtmann.","archived":false,"fork":false,"pushed_at":"2024-08-13T17:33:29.000Z","size":11264,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-09T08:26:44.576Z","etag":null,"topics":["behance-projects","css3","html5","landing-page","sass","scss"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AntonioSertic23.png","metadata":{"files":{"readme":"README.md","changelog":"news.html","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-14T14:40:56.000Z","updated_at":"2024-08-13T17:32:41.000Z","dependencies_parsed_at":"2024-08-13T19:31:00.503Z","dependency_job_id":null,"html_url":"https://github.com/AntonioSertic23/Autodegen","commit_stats":null,"previous_names":["antoniosertic23/autodegen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioSertic23%2FAutodegen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioSertic23%2FAutodegen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioSertic23%2FAutodegen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonioSertic23%2FAutodegen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AntonioSertic23","download_url":"https://codeload.github.com/AntonioSertic23/Autodegen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240885781,"owners_count":19873525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["behance-projects","css3","html5","landing-page","sass","scss"],"created_at":"2024-11-11T09:26:03.238Z","updated_at":"2026-05-17T01:37:51.836Z","avatar_url":"https://github.com/AntonioSertic23.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Autodegen\n\n![Autodegen Project](img/autodegen-project.png)\n\nThis project is my practice ground to apply the concepts I've learned from the Udemy course [Advanced CSS and Sass](https://www.udemy.com/course/advanced-css-and-sass) by Jonas Schmedtmann.\n\n## Project Overview\n\nFor this project, I chose to replicate a design I found on Behance: [AI Autodegen WEB3 UX/UI DESIGN](https://www.behance.net/gallery/199846839/AI-Autodegen-WEB3-UXUI-DESIGN). The design includes a comprehensive web page with the following five sections in its navigation:\n\n1. AI\n2. News\n3. Terminal\n4. About\n5. Contacts\n\n## Learning Objective\n\nThe primary objective of this project is to reinforce my skills by applying what I learned in the course. The Advanced CSS and Sass course includes three main projects, each focusing on different aspects of CSS and Sass.\n\n#### Layout types\n\n- Float Layout\n\n  The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated.\n  \u0026nbsp;\n\n- Flexbox\n\n  Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts.\n  \u0026nbsp;\n\n- CSS Grid\n\n  For laying out elements in a fully-fledged 2-dimensional grid. Perfect for page layouts and complex components.\n  \u0026nbsp;\n\n## Project Structure\n\n### Sections\n\n- **AI**: This section will showcase AI-related content and features.\n- **News**: This section will include the latest news and updates.\n- **Terminal**: This section will provide a terminal interface or terminal-related information.\n- **About**: This section will give an overview of the website or project.\n- **Contacts**: This section will have contact information and a contact form.\n\n### Technology and Tools\n\n- **HTML5**\n- **CSS3**\n- **Sass**: Leveraging the power of Sass for better CSS management.\n\n## How to Run the Project\n\n1.  **Clone the repository:**\n\n    ```bash\n    git clone https://github.com/AntonioSertic23/Autodegen.git\n    ```\n\n2.  **Navigate to the project directory:**\n\n    ```bash\n    cd Autodegen\n    ```\n\n3.  **Install dependencies:**\n\n    ```bash\n    npm install\n    ```\n\n4.  **Compile Sass to CSS:**\n\n    You have several options for compiling Sass files to CSS, depending on the layout you are working with.\n\n    - **Option 1**: Compile Specific Layout\n\n      - Float Layout:\n\n        ```bash\n        npm run compile-float:sass\n        ```\n\n      - Flexbox Layout:\n\n        ```bash\n        npm run compile-flexbox:sass\n        ```\n\n      - Grid Layout:\n\n        ```bash\n        npm run compile-grid:sass\n        ```\n\n    - **Option 2**: Watch Sass Files for Changes\n\n      - Watch Float Layout:\n\n        ```bash\n        npm run watch-float:sass\n        ```\n\n      - Watch Flexbox Layout:\n\n        ```bash\n        npm run watch-flexbox:sass\n        ```\n\n      - Watch Grid Layout:\n\n        ```bash\n        npm run watch-grid:sass\n        ```\n\n5.  **Open the project in a web browser:**\n\n    - **Option 1**: Open `index.html` in your preferred web browser.\n    - **Option 2**: Use a live server tool for easier development and automatic reloading (e.g., Live Server in VSCode).\n\n## Contributions\n\nFeel free to fork this repository and submit pull requests. Any suggestions or improvements are welcome!\n\n---\n\nThank you for checking out my project! I hope to continue improving and expanding my skills through hands-on practice and projects like this.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantoniosertic23%2Fautodegen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantoniosertic23%2Fautodegen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantoniosertic23%2Fautodegen/lists"}