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.
Connect with me:
