Goal
In this exercise, you will customize your own landing page using the beautiful Landy template. Landy template is built on top of Create React App.
Code with me | build a landing page for free - YouTube
Today we customize a beautiful react template from adrinlol. Download the homework at https://github.com/smolthing/landing-page-landy.Visit the completed web...
youtube.com
Visit the Demo Website.
Exercise
- Replace hardcoded colors with reusable colors.
// colors.ts
export const colors = {
white: '#FFFFFF',
blue: '#70D6FF',
...
}
export const theme = {
primary: colors.blue,
...
};
// style.ts
import { theme } from '../../styles/colors';
export const Title = styled("h4")`
font-size: 22px;
text-transform: capitalize;
color: ${theme.primary};
@media screen and (max-width: 414px) {
padding: 1.5rem 0;
}
`;
- Reduce transition distance from react-awesome-reveal library using custom logic.
// Slide transition without the ability to change transition distance
import { Slide, Zoom } from "react-awesome-reveal";
...
return (
<Slide direction="left">
<Row> content </Row>
</Slide>
);
// Create custom transition using Reveal and keyframes
import { Reveal } from "react-awesome-reveal";
import { keyframes } from "@emotion/react";
const fade = keyframes`
from {
opacity: 0;
transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
`;
...
return (
<Reveal keyframes={fade} duration={1500} triggerOnce={true}>
<Row> content </Row>
</Reveal>
);
- Use increments of 5 in position and size for consistency and predictability.
// before
export const Language = styled("h4")`
font-size: 22px;
text-transform: capitalize;
color: #18216d;
@media screen and (max-width: 414px) {
padding: 1.234rem 0;
}
`;
// after
export const Language = styled("h4")`
font-size: 20px;
text-transform: capitalize;
color: #18216d;
@media screen and (max-width: 415px) {
padding: 1rem 0;
}
`;
- Use
cursor: pointerto indicate clickable object.
export const MenuOutline = styled(MenuOutlined)<any>`
cursor: pointer;
font-size: 20px;
padding: 15px; // increase click area
`;
- Use solid shadow with the darken method from polished library.
export const StyledButton = styled("button")<any>`
...
box-shadow: `${darken(0.2, theme.button)} 6px 6px 0`;
&:hover {
...
box-shadow: ${theme.navActive} 6px 6px 0;
}
`;
- Replace images in any format. Download free images from unsplash.
7 Add scroll transition to images
- Add scroll transition using CSS from wesbos's tutorial.
- Deploy react app using github pages from this awesome tutorial.
Getting Started
Go to https://github.com/smolthing/landing-page-landy
before-landing folder
This folder contains the initial template and all the necessary files that you will work on.
after-landing folder
This folder contains the completed solution, which you can refer to if needed.
Running the app
1 Go into before-landing folder and run the app. The app runs on http://localhost:3000. Run the commands in the terminal:
cd before-landing
npm start
2 Make the necessary changes as per the exercise tasks.
3 Compare your work with the files in the after folder if you need any guidance or reference.
4 Deploy your website by running the command npm run deploy.
Top comments (0)