The best way to learn is by creating real life projects, this is the typical landing page your boss or a startup company owner will like to build.
This project comes with the necessary files to start working, but you have two options to start:
a) Open this link in your browser to clone it with gitpod: https://gitpod.io#https://github.com/breatheco-de/exercise-landing-page-javascript.git b) You can clone this repository on your local computer:
$ git clone https://github.com/breatheco-de/exercise-landing-page-javascript.git
๐ก Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>
), and upload the code to your new repository using add
, commit
and push
.
Demonstrate how you can build this beautiful landing page without the need of bootstrap:
- Build a landing page like the one on this image.
- You can find the landing page asset images on the
./img
folder. - Start by building your strategy, here is an example strategy.
- Use flexbox to help you with your layouts.
- Reuse your CSS classes, use behavioral class names like
padding-1
orcontinainer
instead project related names likethe-dog
ormy_header
. - Make it look exactly like the picture, pixel perfect!
Additional goals (if you feel confident):
- Use javascript to capture the user email and send it using formsubmit.co
HTML5 and CSS and Javascript.