Skip to content
This repository has been archived by the owner on May 19, 2023. It is now read-only.
/ mentoring Public archive

Tips and resources for The UI Development Mentoring program.

Notifications You must be signed in to change notification settings

maliMirkec/mentoring

Repository files navigation

Tips and Resources

Stargazers repo roster for @maliMirkec/mentoring

See mentoring tips.

See resources.

Mentoring Tips

Mentoring tips for The UI Development Mentoring program.

See up-to-date tips on the official site: 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.

See up-to-date resources on the official site: 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/