├── Images ├── Website.png ├── BreakDown.png ├── MobileFirst.png ├── LightHouseConsole.png ├── LightHouseReport.png ├── LightHouseReport2.png └── LightHouseWebsite.png └── README.md /Images/Website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SeiynJie/Complete-WebDev-Cheatsheet/HEAD/Images/Website.png -------------------------------------------------------------------------------- /Images/BreakDown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SeiynJie/Complete-WebDev-Cheatsheet/HEAD/Images/BreakDown.png -------------------------------------------------------------------------------- /Images/MobileFirst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SeiynJie/Complete-WebDev-Cheatsheet/HEAD/Images/MobileFirst.png -------------------------------------------------------------------------------- /Images/LightHouseConsole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SeiynJie/Complete-WebDev-Cheatsheet/HEAD/Images/LightHouseConsole.png -------------------------------------------------------------------------------- /Images/LightHouseReport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SeiynJie/Complete-WebDev-Cheatsheet/HEAD/Images/LightHouseReport.png -------------------------------------------------------------------------------- /Images/LightHouseReport2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SeiynJie/Complete-WebDev-Cheatsheet/HEAD/Images/LightHouseReport2.png -------------------------------------------------------------------------------- /Images/LightHouseWebsite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SeiynJie/Complete-WebDev-Cheatsheet/HEAD/Images/LightHouseWebsite.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Complete-WebDev-Cheatsheet 2 | This post is a way for everyone to collaborate & share all of the tips & tricks they know for web development. 3 | 4 | It's split into a few parts (step-by-step): 5 | - Designing the website 6 | - Initializing Project 7 | - Building the layout 8 | - Styling the layout (with responsiveness) 9 | - Animations 10 | - Testing performance & evaluating (Lighthouse, SEO, & other stuff) 11 | - Deployment 12 | 13 | ## How to participate: 14 | Just start your comment with whatever part it is from and the tip you wanna give. After reviewing, I will add it to the GitHub page. 15 | 16 | > Contributed: [eltociear](https://github.com/eltociear) | Thank you! Corrected the capitalization. 17 | 18 | Example: 19 | ``` 20 | Animations 21 | 22 | Use framer motion ... 23 | ``` 24 | ### Or you can submit a pull request in GitHub. 25 | 26 | Here's how to: 27 | - [How to make a Pull Request on GitHub (Command Line Interface)](https://www.youtube.com/watch?v=nCKdihvneS0) 28 | - [Your First Pull Request with GitHub Desktop (Easier Method)](https://www.youtube.com/watch?v=8x6V5IOuXog) 29 | 30 | ## Note! 31 | - This isn't a **how to guide** on starting web-development, **it's for those who have already started** (1 month+ experience) & want to **improve / discover** ways or **techniques** to make their development process **more efficient.** 32 | - Let's try to make it as seamless & linear as possible. 33 | 34 | This cheat sheet or rather, collection of cheat sheets isn't something you should absolutely follow. It is split into different sections such as designining, styling, SEO, and stuff. **But development is not a single, linear process. You must be able to build things with everything in mind (SEO, styling with responsiveness, and coding with performance)**. Of course, as you progress further into development, you will be optimally and efficiently do these as you build your projects from the start! 35 | 36 | > Contributed by: [u/Shiedheda](https://www.reddit.com/user/Shiedheda/) | Paraphrased his/her statement which is absolutely correct! 37 | --- 38 | # Useful resources for starting (without reading the whole guide): 39 | - [Developer Roadmaps](https://roadmap.sh) 40 | - [HTML/CSS/JS CheatSheet](https://html-css-js.com) 41 | - [Front-end Checklist (Contains everything this cheat sheet has but concise)](https://frontendchecklist.io) 42 | 43 | > Contributed: [u/ExpletiveDeIeted](https://www.reddit.com/user/ExpletiveDeIeted/) | Thanks! 44 | > Contributed: [u/Marginal_Border](https://www.reddit.com/user/Marginal_Border/) | Thanks! 45 | > Contributed: [u/TurbulentGoals](https://www.reddit.com/user/TurbulentGoals/) | Thanks! 46 | 47 | # Start: 48 | ## 1. Designing the website 49 | Designing a website is a very crucial part of starting the website. 50 | ``` 51 | Design First before Coding 52 | ``` 53 | That will be our motto before starting any project. **Without a design, you can think of yourself as a traveler without a map, not sure of where to go** 54 | 55 | Here are some tools for designing: 56 | - [Figma](https://www.figma.com/) 57 | - [Builder IO - Figma to Code](https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more) 58 | - [Penpot (Figma Alternative)](https://penpot.app/) 59 | 60 | > Contributed: [u/SouthboundHog](https://www.reddit.com/user/SouthboundHog/) | Thanks! 61 | > Contributed: [TwoOdd3888](https://www.reddit.com/user/TwoOdd3888/) | Thanks! 62 | 63 | 64 | For getting inspiration, I mainly use: 65 | - [Dribbble](https://dribbble.com/) 66 | - [designresourc.es](https://designresourc.es/) 67 | - [viewport-ui.design](https://viewport-ui.design/) 68 | - [Awwwards](https://www.awwwards.com/) 69 | 70 | > Contributed: [imargorsi](https://github.com/imargorsi) | Thank you! 71 | 72 | Here are a number of more specific design resources: 73 | - [Free Placeholder Logos](https://logoipsum.com/) 74 | - [Free High Quality Fonts](https://www.fontshare.com/) 75 | - [More Free High Quality Fonts](https://www.freefaces.gallery/) 76 | - [Inspiration With Free Fonts](https://www.awwwards.com/awwwards/collections/free-fonts/) 77 | - [Font Inspiration](https://fontsinuse.com/) 78 | - [Realtime Colors](https://www.realtimecolors.com/) 79 | - [TailwindCSS Box Shadows](https://ui.aceternity.com/tools/box-shadows) 80 | - [SVG Pattern Generation](https://www.fffuel.co/) 81 | 82 | > Contributed: [lukeweston1234](https://github.com/lukeweston1234) | Thank you! 83 | 84 | ### What Does the Client want? 85 | If you are working for a client or a company, make sure to know what the client wants and that both of your views align. 86 | 87 | > Contributed: [u/SEOAngle](https://www.reddit.com/user/SEOAngle/) | Very important! 88 | 89 | --- 90 | 91 | ## 2. Initializing Project 92 | When initializing your project, you must choose properly the framework you will use (or if you will use any). Here are a few popular frameworks and why you should choose them: 93 | 94 | - [React](https://reactjs.org/) (Simple, lightweight, with great demand and a large ecosystem) 95 | - [Next.js](https://nextjs.org/) (Server-Side Rendering, great for SEO, Static page generation, API routes, & more) 96 | - [Angular](https://angular.io/) (Enterprise-grade framework, batteries included, scales well for large projects) 97 | - [Vue.js](https://vuejs.org/) (Progressive & flexible, great ecosystem) 98 | - [Svelte](https://svelte.dev/) (Fast, simple, performant, although APIs have changed a bit from version to version) 99 | - [Solid](https://www.solidjs.com/) (Performant signal based framework with easy to understand primatives. Similar DX to React) 100 | - [Gatsby](https://www.gatsbyjs.com/) (Site generation, Fast page loads, 100/100 lighthouse score) 101 | - [Nuxt](https://nuxtjs.org/) (Server-Side Rendering, Static page generation, API routes, & more) 102 | - [Astro](https://astro.build/) (Site generation, Fast page loads, 100/100 lighthouse score) 103 | 104 | > Contributed: [u/Fluid_Economics](https://www.reddit.com/user/Fluid_Economics/) 105 | 106 | > Contributed: [lukeweston1234](https://github.com/lukeweston1234) | Thank you! 107 | 108 | **There isn't a wrong framework** to choose but there is indeed a better one for each of the projects you will do. One may be better than the other for a specific project. 109 | 110 | Each site has their own way of initializing the projects so it's best to go directly to the documentation of the framework you choose. 111 | 112 | ### USE GITHUB OR OTHER VERSION CONTROL SYSTEM 113 | Without a version control system, you will have a hard time tracking your changes and collaborating with others. It will also make it harder to revert unwanted changes in case something goes wrong. 114 | 115 | [GitHub Basics Made Easy: A Fast Beginner's Tutorial!](https://www.youtube.com/watch?v=Oaj3RBIoGFc&t=653s) 116 | 117 | Also, here's a fun and interactive way to learn Git Branching (commits, merge, rebasing, etc.): [LearnGitBranching](https://learngitbranching.js.org/) 118 | 119 | ### Routing vs Single Page Application (SPA) 120 | Basically, whether you want your web-app to have other pages like `/about, /contact,` etc. or not. 121 | 122 | This is crucial when initializing because adding routing will be a pain in the future if you haven't added it from the start. 123 | 124 | Again, refer to the documentation of the framework you choose on how to add routing. 125 | 126 | ### Hot Reloading 127 | Hot reloading: See code changes live in the browser without reloading. 128 | 129 | This is a feature that is very very important to saving time as it speeds up the development process. Don't forget to implement this. 130 | 131 | > Contributed: [u/janlaureys9](https://www.reddit.com/user/janlaureys9/) 132 | 133 | ### Styling 134 | There are a number of styling options available, teams normally pick some flavor of CSS, SCSS, or TailwindCSS. 135 | 136 | If you're new to web development, getting an understanding of vanilla CSS will help you more appreciate the abstractions that SCSS and TailwindCSS bring. 137 | 138 | [Tailwind CSS](https://tailwindcss.com/) allows teams to easily implement design systems, while providing a consistent developer experience (DX) that scales well for large projects. Rather than digging around in a number of different files to find where your styles are implemented, you have an easy 1:1 experience of finding the exact styling that is affecting your template. 139 | 140 | It's important to know that TailwindCSS works best when your project is componentized. If you are repeating the same TailwindCSS code over and over again, you likely need 141 | more componentization, or a new utility class to avoid repetition. 142 | 143 | **This whole "guide" is going to focus on Tailwind CSS Implementations.** 144 | 145 | #### `Why should I use Tailwind?` 146 | - Avoiding Unnecessary Seperation of Concerns 147 | - Seperation of concerns is a common principle, but rendering templates requires both HTML and styling. Having both under your fingers enhances productivity. 148 | - Scalable Navigation 149 | - You longer have to learn the architecture and style guide for every CSS project you are on. You have a consistent pattern that allows you to always know where your styles are located. 150 | - Design System Implementation 151 | - You can easily implement a consistent design system with the Tailwind config file. This includes fonts, colors, cards, inputs, etc 152 | - Dev Tooling 153 | - You can setup linting to enforce TailwindCSS styles to be in a certain order, creating a consistent shape for your styles 154 | 155 | #### `Why shouldn't I use Tailwind` 156 | - Legacy code 157 | - Convincing a team or large project to start using TailwindCSS will be an uphill battle. 158 | - Non Componentized Code 159 | - If you are working on a large vanilla JS project that is not heavily componentized, css classes will scale better. 160 | - Small Lightweight Projects 161 | - If your project is small enough, vanilla CSS will likely scale just fine 162 | 163 | > Improved by: [lukeweston1234](https://github.com/lukeweston1234) | Thank you! 164 | 165 | ### Note: 166 | > Though tailwind is very popular— it's not bad— it's not what most big Enterprises that use [Angular](https://angular.io/) are all about! - [u/sh0resh0re](https://www.reddit.com/user/sh0resh0re/) 167 | 168 | #### CheatSheet 169 | 170 | Here's a cheatsheet a use a lot when using tailwind: https://nerdcave.com/tailwind-cheat-sheet 171 | 172 | For a comprehensive reference that includes the latest Tailwind v4 utilities, check out this cheatsheet: https://kombai.com/tailwind/cheat-sheet/ 173 | 174 | --- 175 | 176 | ## 3. Building the layout 177 | Now that you have you have initialized your project, it's time to start building the layout. But... **you can't build the layout without a design. So don't forget that.** Always refer to the design. 178 | 179 | 1. Break down the design into components 180 | - Think of each part of a website as a block or box 181 | ![alt text](./Images/BreakDown.png) 182 | - Look at the image above, the sections are all just boxes all in the same row or not. You can think of each box as components. 183 | - After breaking them down bit-by-bit, you can start building the layout. 184 | 2. Build the layout 185 | - So, how would we start this? The best mindset for this is: 186 | 187 | ### Mobile-first layout 188 | Simply put, start with the mobile version of the website and then make it responsive for other devices. 189 | 190 | ![alt text](./Images/MobileFirst.png) 191 | 192 | #### Simple Mobile-First Layout Example 193 | This example starts with a full-width `div` on mobile and changes its width on larger screens. 194 | 195 | ```html 196 |
197 | Responsive Box 198 |
199 | ``` 200 | 201 | #### How does this work? 202 | - `w-full` is the default width for mobile devices 203 | - `sm:w-3/4` is the width for smaller screens (like tablets: 640px and above) 204 | - `md:w-1/2` is the width for medium screens (like laptops: 768px and above) 205 | - `lg:w-1/3` is the width for large screens (like desktops: 1024px and above) 206 | 207 | Take note of the **and above** keyword. 208 | 209 | For example, my samsung phone is 640px wide, so it will apply the `sm:w-3/4` style. But my other phone is say, 700px, the `sm:w-3/4` will still apply since it hasn't reached the `md` breakpoint of 768px. 210 | 211 | Here's Tailwind's [Official Guide](https://tailwindcss.com/docs/responsive-design) on Mobile-first Responsive Design. 212 | 213 | #### Semantic HTML Tags. 214 | Make sure to use semantic HTML tags. Instead of `
`, use `
`, `