SkillPies
Quiz: Fonts and Images
Exercise: Fonts and Images
Styling
0%
0%
Exercise: Fonts and Images
by
Tomas Trescak
· Next.js
0 / 2950 XP
The external project has not been reviewed yet
Please follow instructions below to submit your project
Installation
Reuse the code from the
previous exercise
. Make sure to complete it before attempting this one.
Instructions
Complete all the user requirements below
Cover each user requirement by end-to-end test (tag each test by
“
@images
”
)
If necessary, cover utility code and component code with unit tests
Commit and push the code
Make sure all tests pass
Commit and push your code to your repository
User Requirements
As a visitor, on the list page I want to see an image preview of the post
As a visitor, I will see a placeholder image if post has no image associated
As a visitor, on the detail page I want to see a large version of the image
As a visitor, I want to see the main site font to be
Roboto
As a visitor, I want to see the title of the post with
Press Start 2P
font
Discuss with Others
Ask questions, share your thoughts, and discuss with other learners
Join the discussion to ask questions, share your thoughts, and discuss with other learners
Quiz: Fonts and Images
Styling
Course Outline
Chat
Full Stack Development
Introduction
Generative AI
🍰 Player
💼 Editor
Setup
Software Installation
Project Setup
Running and Testing
React and ReactDOM
Assignment 1.1: Welcome Message
Submissions
React Fundamentals
10 points
JSX and Components
Props
Assignment 1.2: Front End
CSS Styles
useState and Hooks
Conditional Rendering
Lists
Forms and Events
Storybook
Assignment 1.3: Bonus - Backend
Leaderboards
Next.js
10 points
Why Next.js?
Next.js Introduction
Monorepos
Turborepo
Assignment 2.1: Blog - Client
Layouts and Pages
Fonts and Images
Quiz
Exercise
Styling
Server vs Client Components
Static and Dynamic Rendering
Leaderboards
Advanced React
Pure Components - memo
Lifecycle - useEffect
Expensive? - useMemo
DOM Interactions - useRef
Error Boundaries
Context
Leaderboards
Databases
10 points
Fetching Data
SQL vs No-SQL Databases
Prisma and ORM
Seeding and Migrations
Search and Pagination
Server Actions
Client-Side Mutations
Validations and Error Handling
Assignment 2.2: Blog - Admin
React Hooks
forwardRef
useImperativeHandle
useCallback
useId
useReducer
useTransition
useDeferredValue
Authentication and Authorisation
10 points
Cookies
Storage
Authentication Approaches
Assignment 2.3: Blog - Backend
APIs
APIs
Rest APIs
tRPC
Securing APIs
CI/CD and DevOps
Continuous Integration (CI)
Continuous Deployment (CD)
Server-less Architectures
Exercise: CI/CD
Major Assignment
Testing React
Introduction to Testing
Component Testing with React Testing Library
Spying and Mocking
Component Testing with Playwright
End to End testing with Playwright
Exercise: Testing
Advanced Topics
SEO
Security
Monitoring and Logging
Real-Time Apps
Code Splitting
Accessibility