This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: https://github.com/norman02/FM-3-column-preview-card-component
- Live Site URL: https://fm-3-column-preview-card-component-delta.vercel.app/
- CSS custom properties
- CSS Grid
- Mobile-first workflow
- JavaScript
- Sass
This was simple layout practice. My main goal here was a naive content management system using the map function.
const renderHome = () => {
const home = document.querySelector('.home')
home.innerHTML = cars.map(car => {
return (
`<section class="${car.id}">
<img src="${car.imagePath}" alt="">
<h2>${car.type}</h2>
<p>${car.description}<p>
<a href="#" class="btn btn--${car.id}">Learn More</a>
</section>`
)
}).join('');
}
I am currently reviewing JavaScript and learning React. I plan to refactor this and other projects to use the React framework.
- Learn JavaScript - I like this course because it focuses on web development at every stage of studying JavaScript. I learned JavaScript through Codecademy but some concepts didn't stick. I have found that this course does a better job of reinforcing the concepts.
- Frontend Mentor - @norman02
- Twitter - @JohnIsNorman