Add content to the page using semantic HTML elements. Read more sematics in HTMLUse h1
tag for top level heading, and go up from there. Use p
tag for long paragraphs. Using section
, article
and form
whereever appropriate. Basically don't use div
for everything.
browersync
to sync the browser to the latest code change on save(live preview)npm install -g browser-sync
browser-sync start --server --files "css/*.css"
styles.css
and paste the code block below:root {
/* ANY CUSTOM CSS VARIABLES USED THROUGH OUT THE PAGE */
--content-font: '[choosen font in the link tag]', sans-serif;
}
body {
/* ANY STYLES THAT IS USED THROUGHOUT THE PAGE */
font-family: var(--content-font);
}
.parent {
display: grid;
grid-template-columns: 1fr min(80ch, calc(100% - 16px)) 1fr;
grid-column-gap: 8px;
place-items: center;
}
.parent > * {
grid-column: 2;
}
The styles on the .parent
class sets up a nice grid layout for mobile and desktop layouts. Add background color, give color to various headings, setup proper font sizes and add all other fancy things to make your site your own. Go through OPEN PROPS website(the CSS variables library we are using to build this site) for inspiration.
At this point you have fairly working website.
TIPS:
@media
rule with prefers-color-scheme
property with dark
and light
values to target both the color schemes differently.Javascript(optional)
For a website that is just to convery something to an user, we don't really need javascript. Having said that if you need some form of updates to the content(for example count up to a target number as is implemented here you will need to rely on javascript. Use javascript only if you need it.
In the HTML code snippet, the meta tags and some other stuff are marked to be changed with []
, change them to fit the theme of the website.
I use github and bitbucket to keep my code. How to push your code to github and bitbucket will need to be a separate blog post(there are plenty of resources online). Once you have the code on the above platforms, get an account on NETLIFY and follow this HOW TO DEPLOY A STATIC SITE ON NETLIFY guide.
When websites are shared on twitter and other social media platforms, you can add an image to be show n. Choosing an image from UNSPLASH is what i do most of the time. Once I download it, I use the SQUOOSH APP to compress the image. Once I have the compressed image, I bring down the size of the image to be 1050x600 pixels(WxH).
Now the image is ready and place it in the root of the project directory.
The image is supposed to be linked on the meta tags on the head section on the index.html
file. If the image name is og-image.jpg
and the site name on netlify is supersite.netlify.app
then the url in the og
meta tag should be https://supersite.netlify.app/og-image.jpg
. Test if the images works by inputing the site domain in the input field on various social media sites/apps(it should show a preview).
You now have a link that you can share with people, your own little corner on the internet. You can buy your own custom domain if you fancy, but it's going to cost you.