Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/malimirkec/mentoring

Tips and resources for The UI Development Mentoring program.
https://github.com/malimirkec/mentoring
coders coding developers development inspiration inspirational mentoring mentoring-tips programmers programming web-development
Last synced: 3 months ago
JSON representation
Tips and resources for The UI Development Mentoring program.
Host: GitHub
URL: https://github.com/malimirkec/mentoring
Owner: maliMirkec
Created: 2020-03-28T06:12:40.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-01-09T04:53:29.000Z (about 2 years ago)
Last Synced: 2023-02-27T04:51:35.906Z (almost 2 years ago)
Topics: coders, coding, developers, development, inspiration, inspirational, mentoring, mentoring-tips, programmers, programming, web-development
Language: CSS
Homepage: https://mentor.silvestar.codes/
Size: 9.68 MB
Stars: 2
Watchers: 2
Forks: 1
Open Issues: 3
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        # Tips and Resources

[![Stargazers repo roster for @maliMirkec/mentoring](https://reporoster.com/stars/maliMirkec/mentoring)](https://github.com/maliMirkec/mentoring/stargazers)

[See mentoring tips](#mentoring-tips).

[See resources](#resources).

## Mentoring Tips

Mentoring tips for [The UI Development Mentoring program](https://mentor.silvestar.codes/).

See up-to-date tips on the official site: [https://mentor.silvestar.codes/tips/](https://mentor.silvestar.codes/tips/)

### Inspirational

- **Everyone was a junior once**

  - Everyone had to start somewhere.

  - Don’t be afraid if you are overwhelmed at the beginning.

  - Stick with the program, try to focus and don’t get distracted.

  - Things will come to its place eventually.

  - Enjoy “Aha” moments.

- **Start today**

  - Don’t leave things for tomorrow.

  - Take detailed notes and make a reminder if you cannot do it now.

  - The idea might vanish until tomorrow.

  - It is better to get your hands dirty right now.

  - There’s a better chance of a “snowball effect” today.

- **Fear is a compass**

  - Sometimes the scariest things are the ones you might be the best at.

  - A crazy idea might become a successful project.

  - Don’t be afraid to experiment.

  - Don’t be afraid to talk about it.

  - Don’t be afraid to share your thoughts with the community.

- **Learn at your own pace**

  - Research what you want to know.

  - Decide what you want to learn.

  - If one course is not doing it for you, take another one.

  - The best way to learn is to get practical.

  - Don’t compare yourself with others.

### Learning

- **Understand how the Internet works**

  - Learn how DNS works.

  - Learn how servers work.

  - Learn how databases work.

  - Learn how the code work.

  - Learn how browsers work.

- **Choose the right skill**

  - Research what you want to know.

  - Decide what you want to learn.

  - If one course is not doing it for you, take another one.

  - The best way to learn is to get practical.

  - Don’t compare yourself with others.

- **Don’t skip steps**

  - Make a plan.

  - Stick to the plan.

  - Don’t jump from one topic to another.

  - Master the skill before starting with another one.

  - Don’t try to be good at everything.

- **Don’t copy-paste the code**

  - First, read the code.

  - Then understand the code.

  - Now type the code.

  - Comment the code.

  - Try to make it better.

- **Learn something new every day**

  - Learning is part of the developer job.

  - Apply newly acquired knowledge in a project.

  - Try #100daysofcode.

  - Share what you learned #TIL.

  - Help others.

- **Stay up-to-date**

  - Subscribe to newsletters.

  - Subscribe to podcasts.

  - Join online and communities.

  - Follow the right people.

  - Make a reading routine.

- **Build a project**

  - Think of the project.

  - Make specifications.

  - Make design.

  - Build the project.

  - Share the knowledge.

- **Find a mentor**

  - Learn from an experienced professional.

  - Ask questions.

  - Talk about problems.

  - Propose a solution.

  - Respect your and other’s time.

### Coding

- **Document the project**

  - Documentation is part of the project.

  - Document the process.

  - Document the structure.

  - Document the usage.

  - Specify the audience.

- **Organize the project**

  - Make specification before coding.

  - Make design before coding.

  - Make structure before coding.

  - Agree on coding standard.

  - Define reusable components.

- **Apply Best practices**

  - Don’t copy-paste.

  - Don’t get too attached to the code.

  - Comment the code.

  - Code with performance in mind.

  - Code with accessibility in mind.

- **Test the project**

  - Write tests.

  - Test across different environments.

  - Assume worst-case scenarios.

  - Learn to debug.

  - Document the fix.

### Other/Useful

- **Communication**

  - Be polite.

  - Be respectful.

  - Be professional.

  - Respond quickly.

  - Don’t overpromise.

- **Organization**

  - Define working hours.

  - Set and respect deadlines.

  - Get familiar with modern tools.

  - Limit the usage to one tool per project.

  - Use reminders.

- **Blogging**

  - Give back to the community.

  - Write about your findings.

  - Avoid using “easy”, “simple”, or similar words.

  - Write at the moment of learning.

  - Remember, helping a single person is a success.

- **Health**

  - Stretch.

  - Take a walk.

  - Exercise.

  - Drink water.

  - Socialize.

## Resources

Hand-picked and curated resources for [The UI Development Mentoring program](https://mentor.silvestar.codes/).

See up-to-date resources on the official site: [https://mentor.silvestar.codes/tips/](https://mentor.silvestar.codes/tips/)

### Basic level

| Skill | Resources |

| ----- | --------- |

| How the Internet works basics | https://howdns.works/ |

| | https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works |

| | https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server |

| | https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work |

| HTML basics | https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics |

| CSS basics | https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics |

| | https://justmarkup.com/articles/2018-03-27-collection-of-css-snippets/ |

| | https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/ |

| | https://www.30secondsofcode.org/css/p/1/ |

| | https://github.com/AllThingsSmitty/must-watch-css |

| JavaScript basics | https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics |

| | https://javascript30.com/ |

| | https://beginnerjavascript.com/ |

| | https://github.com/ryanmcdermott/clean-code-javascript |

| | https://www.learnenough.com/javascript-tutorial/hello_world |

| | https://www.30secondsofcode.org/js/p/1/ |

| | https://github.com/AllThingsSmitty/must-watch-javascript |

| | https://javascript.info/ |

| DevTools basics | https://developers.google.com/web/tools/chrome-devtools |

| VS Code basics | https://code.visualstudio.com/ |

### Intermediate level

| Skill | Resources |

| ----- | --------- |

| Responsive web design | https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/ |

| Flexbox basics | https://css-tricks.com/snippets/css/a-guide-to-flexbox/ |

| | https://flexbox.io/ |

| CSS Grid basics | https://css-tricks.com/snippets/css/complete-guide-grid/ |

| | https://cssgrid.io/ |

| | https://cssgr.id/ |

| | https://www.gridtoflex.com/ |

| CSS Variables basics | https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/ |

| | https://scrimba.com/g/gcssvariables |

| CSS Animations | https://github.com/cssanimation/css-animation-101 |

| CSS Transforms | https://3dtransforms.desandro.com/ |

| BEM basics | http://getbem.com/introduction/ |

| Sass basics | https://sass-lang.com/guide |

| jQuery basics | http://jqfundamentals.com/ |

| Bootstrap basics | https://www.w3schools.com/bootstrap/bootstrap_ver.asp |

| | https://getbootstrap.com/docs/4.0/getting-started/introduction/ |

| ES6 basics | https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be?gi=9762451c6d60 |

| | https://es6.io/ |

| Images | https://css-tricks.com/images-are-not-static-content/ |

| SVG | https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial |

| | https://css-tricks.com/using-svg/ |

| | https://css-tricks.com/svg-properties-and-css/ |

| | https://css-irl.info/optimising-svgs-for-the-web/ |

| Fonts | https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts |

| | https://zapier.com/blog/google-fonts-how-to/ |

| | https://css-tricks.com/some-typography-links/ |

| Icons | https://dev.to/adrianbdesigns/icon-workflow-for-the-web-an-in-depth-guide-26hj |

| | https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use |

| Favicons | https://css-tricks.com/favicon-quiz/ |

| Embeds | https://blog.logrocket.com/the-ultimate-guide-to-iframes/ |

### Advanced level

| Skill | Resources |

| ----- | --------- |

| WordPress | https://wordpress.org/ |

| | https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/ |

| | https://underscores.me/ |

| | https://www.designbombs.com/8-best-wordpress-starter-themes-frameworks-new-wp-developers/ |

| | https://www.toptal.com/wordpress/wordpress-roots-stack |

| Task runners (Gulp, webpack) | https://gulpjs.com/ |

| | https://webpack.js.org/ |

| | https://parceljs.org/ |

| | https://www.freecodecamp.org/news/introduction-to-npm-scripts-1dbb2ae01633/ |

| | https://gruntjs.com/ |

| Package managers (npm, Yarn) | https://www.npmjs.com/ |

| | https://yarnpkg.com/ |

| | https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b |

| Linting (htmllint, sasslint, eslint) | https://eslint.org/ |

| | https://standardjs.com/ |

| | https://github.com/htmllint/htmllint |

| | https://github.com/stylelint/stylelint |

| | https://github.com/sds/scss-lint |

| Template engines (pug, liquid) | https://pugjs.org/api/getting-started.html |

| | https://jekyllrb.com/docs/liquid/ |

| | https://shopify.github.io/liquid/ |

| | https://twig.symfony.com/ |

| Markdown | https://www.toptal.com/web/markdown-the-writing-tool-for-software-developers |

| Optimization (minify, uglify, compress) | https://stackoverflow.com/questions/19694448/whats-the-difference-between-concat-and-uglify-and-minify |

| Critical CSS | https://www.smashingmagazine.com/2015/08/understanding-critical-css/ |

| | https://www.sitelocity.com/critical-path-css-generator |

| CSS Specificity | https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ |

| | https://isellsoap.github.io/specificity-visualizer/ |

| APIs | https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction |

| | https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/ |

| Cross-browser compatibility | https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction |

| | http://blogs.quovantis.com/browser-specific-hacks-for-frontend-developers/ |

| | https://caniuse.com/ |

| Frontend checklist | https://frontendchecklist.io/ |

| SEO | https://moz.com/blog/category/basic-seo |

| | https://ahrefs.com/blog/seo-basics/ |

| | https://www.seobility.net/en/seocheck/ |

| | https://websiteseochecker.com/ |

| | https://neilpatel.com/seo-analyzer/ |

| | https://seositecheckup.com/ |

| | https://www.seoptimer.com/ |

| | http://www.seowebpageanalyzer.com/ |

| | https://sitechecker.pro/ |

| | https://www.drlinkcheck.com/ |

| Style guide | https://blog.logrocket.com/5-things-to-consider-when-creating-your-css-style-guide-7b85fa70039d/ |

| Accessibility | https://a11yproject.com/ |

| | https://ffoodd.github.io/a11y.css/ |

| | https://benrobertson.io/accessibility/tools-for-website-audits |

| Testing/Performance | https://search.google.com/search-console/about |

| | https://developers.google.com/web/tools/lighthouse/ |

| | https://validator.w3.org/ |

| | https://search.google.com/test/mobile-friendly |

| | https://developers.google.com/speed/pagespeed/insights/ |

| | https://www.webpagetest.org/ |

| | https://tools.pingdom.com/ |

| | https://webhint.io/scanner/ |

| | https://www.dotcom-tools.com/website-speed-test.aspx |

| | https://webspeedtest.cloudinary.com/ |

| | https://securityheaders.com/ |

| | https://webbkoll.dataskydd.net/en |

| | https://www.dareboost.com/en/analysis |

| | https://www.thinkwithgoogle.com/feature/testmysite/ |

| | https://mxtoolbox.com/Public/FreeInvestigator.aspx |

| | https://www.alexa.com/siteinfo/ |

| | https://perf.rocks/ |

| | https://wpostats.com/ |

| | https://progressivetooling.com/ |

| | https://www.statuscake.com/ |

| | https://www.scamadviser.com/ |

| Serverless/JAMstack | https://blog.fullstacktraining.com/introduction-to-the-jamstack/ |

| | https://jamstack.training/ |

| | https://www.netlify.com/blog/2020/03/12/learn-jamstack-with-a-free-3.5-hour-video-of-demos-and-examples/ |

| Netlify | https://www.netlify.com/ |

| | https://www.staticgen.com/ |

| | https://headlesscms.org/ |

| | https://www.youtube.com/watch?v=mT5siI19gtc |

| | https://serverless.css-tricks.com/ |

| | https://css-tricks.com/a-comparison-of-static-form-providers/ |

| Jekyll | https://jekyllrb.com/ |

| Hugo | https://gohugo.io/ |

| | https://www.silvestar.codes/articles/making-a-website-with-hugo/ |

| Hexo | https://hexo.io/ |

| Photoshop | https://www.photoshop.com/ |

| Sketch | https://www.sketch.com/ |

| Figma | https://www.figma.com/ |

| Zeplin | https://zeplin.io/ |

| Zapier | https://zapier.com/platform |

### Games, tools, interviews

| Type | Resources |

| ---- | --------- |

| General | https://www.frontendmentor.io/resources |

| | https://www.skillshare.com/r/user/starbist |

| | https://github.com/sdmg15/Best-websites-a-programmer-should-visit |

| | https://dev.to/gregfletcher/top-front-end-development-youtube-channels-4ihg |

| | https://github.com/sindresorhus/awesome |

| CSS games | https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f |

| | https://dev.to/alvaromontoro/css-games-are-fun-2pgi |

| JavaScript games | https://exercism.io/tracks/javascript/exercises |

| Other games | https://dev.to/selawsky/8-coding-games-to-improve-and-level-up-your-programming-skills-3fc0 |

| | https://medium.mybridge.co/12-free-resources-learn-to-code-while-playing-games-f7333043de11 |

| | https://dev.to/paco_ita/train-your-javascript-skills-with-online-games-289m |

| Challenges | https://www.100daysofcode.com/ |

| | https://codepen.io/challenges/ |

| Courses | https://hackademy.pro/home |

| | https://www.vuemastery.com/ |

| HTML tools | https://htmlhead.dev/ |

| | http://html5pattern.com/ |

| | https://www.heymeta.com/ |

| CSS tools | https://www.csswand.dev/ |

| | https://extra-css.netlify.com/ |

| | https://grid.layoutit.com/ |

| | https://csslayout.io/patterns |

| | https://getwaves.io/ |

| | https://www.gradientmagic.com/ |

| | https://www.grabient.com/ |

| | https://shapy.app/ |

| | https://9elements.github.io/fancy-border-radius/ |

| | https://gijsroge.github.io/tilt.js/ |

| | https://bennettfeely.com/clippy/ |

| | https://neumorphism.io/#55b9f3 |

| | https://brumm.af/shadows |

| Font tools | http://fontfamily.io/ |

| | https://transfonter.org/ |

| Icons | https://streamlineicons.com/ |

| Image tools | https://picsum.photos/ |

| Favicon tools | https://realfavicongenerator.net/ |

| | https://maskable.app/ |

| Webdev tools | https://webmention.io/ |

| | https://instant.page/ |

| | https://www.whatfontis.com/?s2 |

| | https://fontdrop.info/ |

| Useful tools | https://flawlessapp.io/designtools |

| | https://www.uigoodies.com/index.html |

| | https://mobile.twitter.com/i/events/880688233641848832 |

| | https://frontendchecklist.io/ |

| | https://mailtolink.me/ |

| | http://speakhuman.today/ |

| | https://www.screely.com/ |

| | https://github.com/c0bra/deviceframe |

| | https://witeboard.com/62168dd0-319a-11e8-b988-f164786e9c22 |

| | https://spotify.github.io/coordinator/ |

| | https://svg-to-symbol.herokuapp.com/ |

| | https://jakearchibald.github.io/svgomg/ |

| | http://b64.io/ |

| | https://wkhtmltopdf.org/ |

| | https://regexly.js.org/ |

| | https://css-tricks.com/snippets/php/automatic-copyright-year/ |

| | http://youmightnotneedjquery.com/ |

| | http://youmightnotneedjs.com/ |

| | https://jsonld.com/website/ |

| | https://medium.muz.li/color-tools-for-designers-2019-6ebd77a94ab |

| | https://theia-ide.org/ |

| Interview questions | https://www.toptal.com/html5/interview-questions |

| | https://www.toptal.com/css/interview-questions |

| | https://www.toptal.com/javascript/interview-questions |

| | https://www.toptal.com/software/interview-questions |

| | https://www.toptal.com/web/interview-questions |

| | https://www.toptal.com/php/interview-questions |

| | https://www.toptal.com/algorithms/interview-questions |

| | https://www.toptal.com/designers/visual/interview-questions |

| | https://www.toptal.com/ui-ux-frontend-developer/interview-questions |

| Code practice | https://exercism.io/ |

| | https://www.slant.co/options/3408/alternatives/~exercism-io-alternatives |

| | https://dev.to/frontendmentor/16-front-end-projects-with-designs-to-help-improve-your-coding-skills-5ajl |

### Essential apps

| Tools |	Resources |

| ----- |	--------- |

| Terminal | https://iterm2.com/ |

| | https://github.com/oh-my-fish/oh-my-fish |

| | https://ohmyz.sh/ |

| Git | https://git-scm.com/ |

| | https://github.com/nvie/gitflow |

| | https://nvie.com/posts/a-successful-git-branching-model/ |

| | https://gitsheet.wtf/ |

| | https://www.madebymike.com.au/writing/how-to-git/ |

| Collaboration tools (Asana, Trello, Jira) | https://trello.com/ |

| | https://asana.com/ |

| Communication (Slack, Zoom) | https://slack.com/intl/en-gb/ |

| | https://zoom.us/ |

| Other | https://www.remote.tools/ |

### Soft skills

| Skills | Resources |

| ------ | --------- |

| Verbal communication | https://www.thebalancecareers.com/communication-skills-list-2063779 |

| Written communication | https://www.indeed.com/career-advice/career-development/written-communication-skills |

| Documentation | https://zapier.com/engineering/great-documentation-examples/ |

| Blogging | https://css-tricks.com/advice-for-technical-writing/ |

| | https://css-tricks.com/beginner-css-tips-for-your-blog/ |

| | https://developers.google.com/tech-writing/overview |

| Online presence | https://www.freecodecamp.org/news/building-your-personal-brand-as-a-new-web-developer-f6d4150fd217/ |

| | https://www.omnesgroup.com/online-presence-as-junior-developer/ |

| | https://codeup.com/what-developers-need-to-have-for-their-online-presence/ |

| | https://simpleprogrammer.com/online-presence-programmer/ |

| | https://www.freecodecamp.org/news/building-your-personal-brand-as-a-new-web-developer-f6d4150fd217/ |

| Inspiration | https://inspiration-bits.com/archives/ |

### Newsletters

| Newsletters | Resources |

| ----------- | --------- |

| CSS Weekly | https://css-weekly.com/ |

| CSS Animation Weekly | https://cssanimation.rocks/weekly/ |

| Web Design Weekly | https://web-design-weekly.com/ |

| CSS-Tricks | https://css-tricks.com/newsletters/ |

| Smashing Magazine | https://www.smashingmagazine.com/the-smashing-newsletter/ |

| UI Dev Newsletter | https://mentor.silvestar.codes/reads/ |

### Jobs and hiring

| Job boards | Resources |

| ---------- | --------- |

| Product Hunt | https://www.producthunt.com/jobs |

| Indeed | https://www.indeed.com/hire |

| AngelList | https://angel.co/ |

| StackOverflow | https://stackoverflow.com/jobs |

| YCombinator | https://news.ycombinator.com/jobs |

| | https://hn.algolia.com/?dateRange=all&page=0&prefix=false&query=Ask%20HN%3A%20Who%20is%20hiring%3F&sort=byDate&type=story |

| | https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=ASK%20HN%3A%20who%20wants%20to%20be%20hired%3F&sort=byDate&type=story |

| RemoteJobsClub | https://remotejobsclub.com/ |

| Glassdoor | https://www.glassdoor.co.uk/index.htm |

| Smashing Magazine | https://jobs.smashingmagazine.com/jobs/ |

| CSS-Tricks | https://css-tricks.com/jobs/ |

| CodePen | https://codepen.io/jobs/ |

| Remote Masters | https://remotemasters.dev/jobs |

| Remote Jobs | https://remote.jobs/ |

| Codementor | https://www.codementor.io/jobs |

| 50+ Remote jobs sites | https://adamconrad.dev/blog/here-is-the-full-list-of-my-50-remote-job-sites/ |

| Networks | Resources |

| ---------- | --------- |

| Toptal | https://www.toptal.com#trust-nothing-but-brilliant-freelancers |

| ExpertLead | https://www.expertlead.com/ |

| Upstack | https://upstack.co/ |

| Turing | https://turing.com/ |

| Codementor | https://www.codementor.io/ |

| PeoplePerHour | https://www.peopleperhour.com/ |

| ScalablePath | https://www.scalablepath.com/ |

| MVP Factory | https://mvpfactory.co/company/careers/ |

| Remote | https://remote.com/ |

| Fountain | https://get.fountain.com/ |

| Triplebyte | https://triplebyte.com/ |

| Vettery | https://www.vettery.com/ |

| CodersClan | https://www.codersclan.com/ |

| Upwork | https://www.upwork.com/ |

| WeAreDevelopers | https://www.wearedevelopers.com/ |

| Gun.io | https://www.gun.io/ |

| X-Team | https://x-team.com/ |

| Hubstaff Talent | https://talent.hubstaff.com/ |

| Yeeply | https://en.yeeply.com/ |

| Hired | https://hired.com/ |

| Underdog | https://underdog.io/ |

| Folyo | https://folyo.me/ |