Nice! We can write small blog posts now. And we can quickly deploy the updates.
Starting using your project as a daily journal. Post updates about daily progress. Using your project yourself will make it usable.
~3 days
You will ultimately use the blog posts only if it is easy to upload pictures. Allow Basecamp type image uploading. Add ability to drop an image and it uploads and inserts in the rich text editor. Can move to Trix for now.
- Media files in Django: It tells how to save and link to user uploaded media files. We might not need to "use files in models" but use it to create a simple upload API.
- Tips for writing good functions: Few tips on writing good functional code.
- Trix Rich Text Editor: Replace our own
contenteditablecomponent with Trix. Trix already has JS support for handling image drops. - Example of image uploads: We will create our own Django API instead of using Cloudfront in example.
~3 days
We want to make the website responsive such that it looks like this on desktop and mobile.
Things to note
- Navigation menu on the right
- The posts have an options dropdown menu. It provides options for sharing and editing the post.
- The sidebar with tags section. There is 16px "gutter-space" between tags.
Things to note
- The navigation is shown as tabs on small devices.
- The sidebar can be hidden. Or better, try to show it below the posts on mobile devices.
Will recommend you to create a account on Codepen. Practice different layouts on a basic canvas.
- CSS Basics: Brush up the basics.
- Using media queries and flex for responsive layouts: A small guide on how to use
flexandmedia-queriesto create responsive interfaces. - Flex Cheatsheet: Overview of flex and quick reference guide.
- Mastering Flex: I love the tricks on this page. It tells how to handle gutter spaces. How wrapping works.
- Functional CSS: How to think when creating new CSS classes.