Hello and thanks for stopping by! This is my personal treasure trove where I stash all sorts of notes, tips, and tricks about frontend development. Whether you're starting out, scaling up your skills, or just in need of a quick reference, you're in the right place.
Frontend development, also known as client-side development, refers to the process of building the user interface and visual elements of a website or application. It is responsible for creating the look, feel, and overall user experience of a product. Frontend developers work with technologies such as HTML, CSS, and JavaScript to create web pages that are visually appealing, responsive, and interactive.
The following prerequisites are needed:
- A modern web browser and code editor (such as Google Chrome and Visual Studio Code, respectively)
- For projects that use JavaScript frameworks (sections 5.a, 5.b, and 5.c), you will need to have NPM installed on your system. This requirement will be noted in the README file for each respective project.
Please note that some projects may have additional requirements or dependencies. It is recommended that you consult the README file for each project for more information.
The projects directory in the root of this repository contains multiple independent subprojects that cover various frontend development topics. Each project is designed to illustrate the implementation of a specific topic, and may have its own specific instructions and dependencies.
To get started with a project:
- Clone the repository:
git clone https://github.com/djeada/Frontend-Notes.git - Navigate to the projects directory:
cd Frontend-Notes/projects - Choose a project to work on and navigate to its directory:
cd 01_html/image - Open the
index.htmlfile in your web browser to view and interact with the project.
Happy coding, and keep coming back for more goodies!
The notes and resources in this repository are organized by topic, with each topic contained in its own subdirectory. To access a specific topic, simply navigate to the corresponding subdirectory and open the relevant files. We recommend working through the material in the following order:
6. UX
7. UI
8. Protocols
9. Structuring frontend projects
11. Hosting websites
12. Quizes
We encourage contributions that enhance the repository's value. To contribute:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
Here's a collection of resources that I found useful while learning frontend development.
- MDN Web Docs: Front-end Web Developer: A comprehensive guide covering all aspects of front-end development.
- FreeCodeCamp: Interactive learning platform for web development.
- The Odin Project: Full Stack JavaScript Path: A full curriculum for learning full-stack development using JavaScript.
- Frontend Roadmap: A visual guide to becoming a front-end developer.
- HTML Standard: The official HTML specification.
- HTML.com: Learning resource for HTML basics and advanced topics.
- Udacity Frontend Style Guide: Style guide for HTML/CSS best practices.
- OverAPI.com HTML Cheat Sheet: A handy HTML cheat sheet.
- W3C CSS: Official CSS standards and documentation.
- HTTP Archive's CSS Almanac: Web technology usage statistics and insights.
- HTML5 Rocks: Responsive Web Design: Guide on responsive design with HTML5 and CSS3.
- CSS Protips: A collection of tips to help take your CSS skills pro.
- Sass Guide: Introduction to using Sass, a CSS preprocessor.
- Magic Animations: CSS3 animations with special effects.
- OverAPI.com CSS Cheat Sheet: Comprehensive CSS cheat sheet.
- JavaScript.com: Resource for learning JavaScript.
- Eloquent JavaScript: A modern introduction to JavaScript.
- TypeScript: Learn about TypeScript, a superset of JavaScript.
- JavaScript.info: In-depth guide covering all aspects of JavaScript.
- OverAPI.com JavaScript Cheat Sheet: JavaScript reference and cheat sheet.
- Resilient Web Design: A web design book focusing on the foundations of a robust web.
- Nielsen Norman Group: Introduction to Usability: Articles on usability and user experience.
- MIT OCW: User Interface Design: MIT course materials on UI design.
- Principles of Design: A collection of fundamental design principles.
- Laws of UX: Key principles that designers should consider when building user interfaces.
- Don't Make Boring UIs [Video]: A video guide on creating engaging UIs.
- Complete UX Course [Video]: A comprehensive video course on UX.
- UI Design in Figma [Video]: Tutorial on UI design using Figma.
- How Does the Internet Work [Video]: A video explaining the workings of the internet.
This project is licensed under the MIT License - see the LICENSE file for details.