├── README.md └── pointers.css /README.md: -------------------------------------------------------------------------------- 1 | # Web Development Learning Resources 2 | 3 | ## Overview 4 | This curated list provides resources for learning web development, from fundamental concepts to advanced topics. Whether you're a beginner or looking to enhance your skills, these resources cover HTML, CSS, JavaScript, frontend and backend frameworks, databases, and more. 5 | 6 | ## 1. **HTML and CSS:** 7 | - [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web): Comprehensive documentation for HTML and CSS. 8 | - [W3Schools HTML](https://www.w3schools.com/html/) | [W3Schools CSS](https://www.w3schools.com/css/): Interactive tutorials. 9 | 10 | ## 2. **JavaScript:** 11 | - [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide): Comprehensive JavaScript documentation. 12 | - [Eloquent JavaScript](https://eloquentjavascript.net/): Free online book. 13 | - [JavaScript.info](https://javascript.info/): In-depth tutorials and guides. 14 | - **YouTube Channel:** 15 | - [The Net Ninja](https://www.youtube.com/c/TheNetNinja) 16 | - [Traversy Media](https://www.youtube.com/c/TraversyMedia) 17 | 18 | ## 3. **Version Control (Git):** 19 | - [Pro Git Book](https://git-scm.com/book/en/v2): Comprehensive guide on Git. 20 | - [GitHub Learning Lab](https://lab.github.com/): Interactive courses on Git and GitHub. 21 | - **YouTube Channel:** 22 | - [Academind](https://www.youtube.com/c/Academind) 23 | - [The Net Ninja](https://www.youtube.com/c/TheNetNinja) 24 | 25 | ## 4. **Frontend Libraries and Frameworks:** 26 | - **React (Library):** 27 | - [React Docs](https://reactjs.org/docs/getting-started.html): Official React documentation. 28 | - [React - The Complete Guide (Udemy)](https://www.udemy.com/course/react-the-complete-guide-incl-redux/): Comprehensive React course. 29 | - **YouTube Channel:** 30 | - [Academind](https://www.youtube.com/c/Academind) 31 | - [Traversy Media](https://www.youtube.com/c/TraversyMedia) 32 | 33 | - **Vue.js (Framework):** 34 | - [Vue.js Docs](https://vuejs.org/v2/guide/): Vue.js documentation. 35 | - [Vue.js - The Complete Guide (Udemy)](https://www.udemy.com/course/vuejs-2-the-complete-guide/): Comprehensive Vue.js course. 36 | - **YouTube Channel:** 37 | - [Academind](https://www.youtube.com/c/Academind) 38 | - [The Net Ninja](https://www.youtube.com/c/TheNetNinja) 39 | 40 | - **Angular (Framework):** 41 | - [Angular Docs](https://angular.io/docs): Official Angular documentation. 42 | - [Angular - Full Course (freeCodeCamp)](https://www.youtube.com/watch?v=htPYk6QxacQ): Comprehensive Angular course. 43 | - **YouTube Channel:** 44 | - [Academind](https://www.youtube.com/c/Academind) 45 | - [Codevolution](https://www.youtube.com/c/Codevolution) 46 | 47 | ## 5. **Backend Development:** 48 | - **Node.js:** 49 | - [Node.js Docs](https://nodejs.org/en/docs/): Official Node.js documentation. 50 | - **YouTube Channel:** 51 | - [Academind](https://www.youtube.com/c/Academind) 52 | - [The Net Ninja](https://www.youtube.com/c/TheNetNinja) 53 | 54 | - **Express.js:** 55 | - [Express.js Docs](https://expressjs.com/): Express.js documentation. 56 | - **YouTube Channel:** 57 | - [Academind](https://www.youtube.com/c/Academind) 58 | - [The Net Ninja](https://www.youtube.com/c/TheNetNinja) 59 | 60 | ## 6. **Databases:** 61 | - [MongoDB University](https://university.mongodb.com/): Free courses on MongoDB. 62 | - [MySQL Docs](https://dev.mysql.com/doc/): MySQL documentation. 63 | - **YouTube Channel:** 64 | - [Academind](https://www.youtube.com/c/Academind) 65 | - [The Net Ninja](https://www.youtube.com/c/TheNetNinja) 66 | 67 | ## 7. **Full-Stack Development:** 68 | - [The Odin Project](https://www.theodinproject.com/): Full-stack curriculum covering HTML, CSS, JavaScript, Node.js, and more. 69 | - [FreeCodeCamp](https://www.freecodecamp.org/): Full-stack development certification. 70 | - **YouTube Channel:** 71 | - [FreeCodeCamp](https://www.youtube.com/c/Freecodecamp) 72 | 73 | ## 8. **Responsive Web Design:** 74 | - [Responsive Web Design Certification (FreeCodeCamp)](https://www.freecodecamp.org/learn/): Learn responsive web design. 75 | - **YouTube Channel:** 76 | - [Traversy Media](https://www.youtube.com/c/TraversyMedia) 77 | 78 | ## 9. **Build Real Projects:** 79 | - [GitHub](https://github.com/): Contribute to open source projects. 80 | - Undertake personal projects to apply your skills and build a portfolio. 81 | - To stay updated on tech roadmaps, resources, and potential collaboration, follow me on Github: 82 | - [Carl Castañas (GitHub)](https://github.com/carlcastanas) 83 | 84 | ## 10. **Stay Updated:** 85 | - Follow industry blogs, podcasts, and YouTube channels for the latest trends and updates. 86 | 87 | ## 11. **Advanced Topics:** 88 | - Explore topics like Web Security, Web Performance, Progressive Web Apps (PWAs), and more as you advance. 89 | -------------------------------------------------------------------------------- /pointers.css: -------------------------------------------------------------------------------- 1 | /* ========== ID Selector ========== */ 2 | /* Use the ID selector to style a unique element */ 3 | #unique-element { 4 | color: white; 5 | background-color: green; 6 | font-size: 20px; 7 | } 8 | 9 | /* ========== Class Selector ========== */ 10 | /* Use the class selector to style multiple elements */ 11 | .common-style { 12 | color: black; 13 | background-color: lightgreen; 14 | font-size: 18px; 15 | } 16 | 17 | /* ========== Colors ========== */ 18 | /* Color names */ 19 | .element1 { 20 | color: blue; /* Text color */ 21 | background-color: yellow; /* Background color */ 22 | } 23 | 24 | /* Hexadecimal */ 25 | .element2 { 26 | color: #ff5733; /* Text color */ 27 | background-color: #333333; /* Background color */ 28 | } 29 | 30 | /* RGB */ 31 | .element3 { 32 | color: rgb(255, 0, 0); /* Text color */ 33 | background-color: rgb(0, 255, 0); /* Background color */ 34 | } 35 | 36 | /* RGBA (with alpha transparency) */ 37 | .element4 { 38 | color: rgba(0, 0, 255, 0.5); /* 50% transparent blue */ 39 | background-color: rgba(0, 0, 0, 0.2); /* 20% transparent black */ 40 | } 41 | 42 | /* ========== Borders ========== */ 43 | /* Border styles */ 44 | .border-style { 45 | border: 2px solid black; /* Solid black border, 2px wide */ 46 | } 47 | 48 | /* Border with rounded corners */ 49 | .rounded-border { 50 | border: 3px dotted red; 51 | border-radius: 10px; /* Rounded corners with 10px radius */ 52 | } 53 | 54 | /* Different borders on each side */ 55 | .custom-borders { 56 | border-top: 5px dashed blue; 57 | border-right: 4px double green; 58 | border-bottom: 2px solid black; 59 | border-left: 1px dotted red; 60 | } 61 | 62 | /* ========== Padding and Margin ========== */ 63 | /* Padding adds space inside the element, margin outside */ 64 | .padding-margin { 65 | padding: 20px; /* 20px space inside the element */ 66 | margin: 15px; /* 15px space outside the element */ 67 | } 68 | 69 | /* Specific padding or margin for each side */ 70 | .custom-padding-margin { 71 | padding: 10px 20px 30px 40px; /* top right bottom left */ 72 | margin: 5px 10px 15px 20px; /* top right bottom left */ 73 | } 74 | 75 | /* ========== Backgrounds ========== */ 76 | /* Background image */ 77 | .bg-image { 78 | background-image: url('path-to-image.jpg'); 79 | background-size: cover; /* Cover entire element */ 80 | background-repeat: no-repeat; /* No repeat */ 81 | } 82 | 83 | /* Linear gradient background */ 84 | .gradient-bg { 85 | background: linear-gradient(to right, #ff7e5f, #feb47b); /* Left to right gradient */ 86 | } 87 | 88 | /* ========== Text Styling ========== */ 89 | .text-style { 90 | font-family: 'Arial', sans-serif; /* Font family */ 91 | font-size: 16px; /* Text size */ 92 | font-weight: bold; /* Bold text */ 93 | font-style: italic; /* Italic text */ 94 | text-transform: uppercase; /* All text to uppercase */ 95 | text-align: center; /* Center text */ 96 | } 97 | 98 | /* ========== Box Shadow ========== */ 99 | .box-shadow { 100 | box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Shadow with offset, blur, and transparency */ 101 | } 102 | 103 | /* ========== Flexbox ========== */ 104 | /* Container for flexbox layout */ 105 | .flex-container { 106 | display: flex; 107 | justify-content: space-between; /* Distribute space between elements */ 108 | align-items: center; /* Align elements vertically */ 109 | } 110 | 111 | /* Flex item properties */ 112 | .flex-item { 113 | flex: 1; /* Flex-grow to fill space equally */ 114 | margin: 10px; /* Margin between items */ 115 | } 116 | 117 | /* ========== Grid ========== */ 118 | /* Container for grid layout */ 119 | .grid-container { 120 | display: grid; 121 | grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */ 122 | gap: 10px; /* Space between grid items */ 123 | } 124 | 125 | /* Grid item properties */ 126 | .grid-item { 127 | background-color: lightblue; 128 | padding: 20px; 129 | text-align: center; 130 | } 131 | 132 | /* ========== Transitions ========== */ 133 | /* Adding smooth transitions to elements */ 134 | .transition-effect { 135 | transition: background-color 0.3s ease, transform 0.3s ease; /* Transition on background color and transform */ 136 | } 137 | 138 | .transition-effect:hover { 139 | background-color: yellow; 140 | transform: scale(1.2); /* Scale up on hover */ 141 | } 142 | 143 | /* ========== Media Queries ========== */ 144 | /* Responsive design for different screen sizes */ 145 | @media (max-width: 600px) { 146 | .responsive-element { 147 | font-size: 14px; 148 | padding: 10px; 149 | } 150 | } 151 | --------------------------------------------------------------------------------