"ActiveRecord Basics" was retired on July 1, 2018. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create a Portfolio Using React!
You have completed Create a Portfolio Using React!
Preview
In this video, we’ll setup the components for our webpage.
Resources
Snippets
const projectList = [
{
id: 1,
title: 'AI Story Generator',
tech: ['React', 'Tailwind', 'TypeScript'],
description:
'I created a random story generator using React and Tailwind, with a series of prompts a story and matching images will be generated using the OpenAI api!',
liveLink: '#',
githubLink: '#',
image: storyGenerator,
},
{
id: 2,
title: 'Digital Business Card',
tech: ['HTML', 'CSS', 'JavaScript'],
description:
"This project was created for Treehouse's Front End Web Development TechDegree",
liveLink: '#',
githubLink: '#',
image: businessCard,
},
{
id: 3,
title: 'SVG Animations',
tech: ['HTML', 'CSS'],
description:
'I learnt to create SVG animations using CSS. I also got to implement more advanced CSS techniques like clip-path and keyframes. I had also struggled with media queries before, but this project really helped!',
liveLink: '#',
githubLink: '#',
image: svgAnimations,
},
];
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
I'll create a new components directory and
a new file called Header.jsx.
0:00
Let's create a new component
with the rafce snippet.
0:00
We want our header component
to return a header element.
0:06
Inside it,
0:10
we'll add a span with our name followed
by a button with the class of menu-BTN.
0:11
Inside the button, we'll set up an image
tag with an src attribute of menu and
0:24
an alt of menu.
0:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up