Skip to content

Latest commit

 

History

History
100 lines (68 loc) · 3.51 KB

README.md

File metadata and controls

100 lines (68 loc) · 3.51 KB

Hi there! 👋

Thanks for checking out my Laravel with Tailwind CSS project!


Installation

To view this project on your local machine, run the following command after downloading the ZIP from this repo.


> npm install

This will install all the dependencies in the package.json file for you to run it locally.



What I Learned

  • Learned how to update Homebrew to v3.3.2
  • Learned how to update PHP to v8.0.12 via Homebrew
  • Learned how to update MySQL to v8.0.27 via Homebrew
  • Learned how to install Composer globally via getcomposer.org
    • Along the way I ran into an issue where .composer/vendor/bin was not in my $PATH
    • I learned how to correct my $PATH to include .composer/vendor/bin
  • Learned how to create a vanilla Laravel project via the laravel new example-app command.
  • Learned how to update node.js to v17.0.1 via Homebrew
  • Learned how to update npm to v8.1.0 via Homebrew
  • Learned how to update Git to v2.33.1 via Homebrew
  • Learned how to install Tailwind CSS via npm install -D tailwindcss@latest postcss@latest autoprefixer@latest”
  • Learned how to create tailwind.config.js file.
  • Configured tailwind.config.js file to remove unused styles in production via “purge”
  • Added Tailwind CSS as a PostCSS plugin via webpack.mix.js
  • Added Tailwind CSS in ./resources/css/app.css with the @tailwind directive to include Tailwind’s ‘base’ ‘components’ ‘utilities’
  • Linked to app.css file in welcome.blade.php


What I Customized

  • Customized the following Objects in tailwind.config.js
    • Extended the 'Theme' Object to include custom colors for landing page and social media colors.
    • Customized the ‘Container’ class to automatically center sections easier.
    • Customized ’Screens’ within the ‘Container’ Object to use custom screen sizes (1124px).
  • Added ‘Nunito’ custom font via fonts.google.com
  • Added ‘Font Awesome’ link via cdnjs.com to use for icons.
  • Added custom ‘base’ styles for buttons and hover effects with the @apply directive to save time.
  • Added a working form using Formspree.io with custom styling.
  • Added transition effects to all media breakpoints for a smooth effect.
  • Added a bit of JavaScript for a nice smooth scroll effect to navigate the page using the links.


I'm a Husband, & Developer


  • 🌱   I’m currently learning JavaScript
  • 👯   I’m looking to collaborate with other developers on projects to up my skills in web dev.
  • 🥅   2024 Goals: Learn Advanced JavaScript concepts, REST API, NodeJs
  • ⚡   Fun fact: I love to build woodworking projects, remodel my house, hike, travel and play ARK.


Website      Twitter Follow



Connect with me:


linkedin