Design is done-ish ... Could still do some work on:
- legal pages
- thank you page
- interstitial pages
Set up the GitHub Repo. Since this is really a static site, with little to no state, I'm building it on Astro.
I stubbed out each of the page sections into Astro components and got my custom Tailwind config setup with the site’s color palette and typography.
I wasn't able to make as much progress today as I'd hoped. I did a little bit on the header component and exported out a few assets.
Made small progress. Got the footer styled.
I love the fact that you can now use nested styles with Tailwind.
I hotwired the Frequently Asked Questions section.
Each FAQ is set up as a separate markdown file. Then, I'm using Astro's Content Collections to dynamically import and display the content.
I made quite a bit of progress this evening....finally! 😅
Got the frontend styling done for several sections:
The lessons section was a little challenging because I wanted the line between the lesson number and the lesson name to be centered. I started trying to implement it with CSS Flexbox, but finally got it working with CSS Grid.
This is my favorite quote on the whole site (I gave myself a testimonial. 🤪)
Speaking of testimonials:
This section was a little tricky because I wanted to use a masonry grid. But, it doesn't have great browser support yet:
The trick was to use columns:
.testimonial-grid {
column-gap: 20px 20px;
@apply columns-4 mx-5
}
I've only done styling for the desktop view, haven't even started on responsive styling.
My plan is to wrap up the landing page styles tomorrow 🤞
I finished the frontend code (for desktop)!!
Some of the remaining sections were a little tricky, trying to get the spacing just right.
I felt like I used a lot of absolute positioning -- which might make the responsive views a little more challenging.
I also made all the DNS Updates
- pointing to the appropriate host (SSL included)
- set up Gmail
- set up domain to send out via ConvertKit
👉 https://www.figmafordevs.com/
Remaining Pieces (before 3/14)
- Copy pass
- Responsive
- Swap out pricing table for an interest form. I'm not planning on pre-selling. I'd rather finish the course and sell once it's complete.