I’m a newbie, but got my hands dirty with trying to duplicate a website (only the design).
I got confused most of the time while duplicating the original!. However here’s the final product.
Bear in mind, it’s a static page with almost no functionality. I haven’t learned how to make a site functional yet.
-To look at the markup-
github
Very impressive work. I like the layout and how you have made is mobile responsive.
Fine use of grid.
My only remarks would be for size of the header is too big, atleast on my screen. however I checked your code and I saw you have used un-neccessary padding : 1rem on Header. Not sure why you have done that. But when I removed it,It looks cool.
The centralize text in favourite book section does not look that good. Also I noticed that font-sizes needs to be adjusted.
Hell of a good work , keep coding great! Eager to see your next work.
Thanks for pointing that padding out, like i mentioned, i got confused when implementing this. It’s indeed not needed.
As for the centralization, yea i think putting a text-align on the div made me limited to controlling the other elements. I changed it to text-align: left;. Then the Read more button went along with it, so i placed it to the center with the text-align again.
As for the font-sizes!. I’ll tweet that and see what fits well!, it’s all over the place, from what i see too.
Thank you for pointing those out. Would have skipped over these!.
@Lone2000 You did a great job on the page that you copied. It is a great way to learn to position elements. I suggest just changing the font and adding a button at the bottom. To add functionality like a search field you will need something on the backend (Python or Nodejs) to process the data and a database to store data. If you do not have a database you can hard code the data to give the appearance of a database. Another thing you could do if you get stuck is to look at the code they used to create the website using the developer tools. I learn a lot by looking at the code of others!
Thanks for the advise, i plan to get comfortable with the front end and then hop into the back-end. and Indeed, i’m always looking at other peoples code and trying to learn. Inspect element is a noobs best friend.
Hey, I see that you did get Read more button in center and text align in left side, I was writing about that only. 
You did good use of grid for the layout however I would suggest that you should combine Grid and FlexBox next time.
Since, you are exploring front-end right now, I would suggest that you should learn to custom style the checkbox, radio buttons, and textbox. You should make the search bar for your site just like the searchbar on Novaplanet, even though it will be non functional but you will learn to style the good search box.
I would say backend tech is still far and you should not worry about that right now.
Now, I think you are good to start the Javascript on FCC.
Keep us posted about your journey.
ohhh!, so it’s not wrong to combine flex and grid. I had assumed that i should only stick to one.
I’m working on a tribute page, about to get it done(the media query is left). I’ll link it here, when its done.
and After i’m done with making the other 3 sites under the responsive certificate, i’ll hop onto the JavaScript one. Thanks for the great note!. I’ll try to combine flex and grid!!.
I am glad I was able to help. Combining grid and flexbox is really good as you get the best of both. You should check this video, it will help a lot : Click here
I would be glad to review your project, keep me posted.
Overall a great strategy to improve and a good job cloning the website, I use the same tactic as of late.
I feel like i learn a lot of new features doing this too.
cheers 
I have like a picture in my workspace to copy and just go from there makin a new app