Would you like to be able to build your own websites / webpages from scratch instead of using overcomplicated website builders and platforms? Want something simple that looks and works great on any size & type of screen? My Easy Em website framework can be a great starting point! Build your first web page in 30 minutes, an hour max. You can find it at EasyEm.org https://easyem.org (redirects to https://github.com/cooperdozier/easy-em. Just download and install Visual Studio Code (you can use any plaintext editor but VS Code and others do syntax highlighting and more!) and download and unzip Easy Em, open the folder with VS Code, and double click the index.html file to open it in a web browser. More detailed instructions below.
Assignment 1 – Project Setup:
First, go to github.com/cooperdozier/easy-em and download the zip file. Here’s an example of what you’re starting with: https://cooperdozier.github.io/easy-em/ . Then go to the Microsoft Store or https://code.visualstudio.com/download (I would think it’s in the Apple store too, but not sure) and download and install Visual Studio Code. Right click the Easy Em zip file and select ‘Extract Here’ or ‘Extract All’ (depending on whether Mac or Windows). Then open the ‘easy-em-main’ folder with VS Code’s ‘File > Open Folder…’ menu command. Take a look at the two .css files in the /css folder and the from-scratch-menu.js file in the /js folder (There is an annotated version for your edification if interested, but JavaScript changes in this project will be minimal and come much later) and a closer inspection of the index.html file. You can double click the index.html and template.html files in Windows Explorer or Mac Finder to open them in a web browser and hit the reload button in the browser to view any changes you make. You can create new .html files blank or copy and paste the content from the template.html or any other .html file.
Assignment 2: Your First Web Page:
Step 1:
In Visual Studio Code’s easy-em-main window
In the Index.html file, change where it says
<title>index.html | Site Name</title>
to
<title>Home | Name Your Project</title>
Step 2:
Then change where it says
<meta name=”description” content=”60-80 characters preferred”>
to
<meta name=”description” content=”your description of your project”>
The title tag will fill in the tab title in the web browser and the google search result and sharing via text messages. The meta description tag fills in the google search result and when you share on social media or text messages. They don’t appear inside the web page window in the browser. Or… I think social media will use those tags if the <meta property=”og:…” and <meta property=”twitter:…” tags aren’t filled in. (og is facebook’s Open Graph which is widely enough used beyond facebook to now be a web standard).
Step 3:
In between the two <body> (top) and </body> (closing tag/bottom) tags where it says
<a href=”index.html” class=”pure-menu-heading site-title”>Lorem Ipsum Dolor</a>
(it’s towards the top but if you don’t see it you can ctrl-f and type in the box, hit enter to search for any string of characters)
and change it to
<a href=”index.html” class=”pure-menu-heading site-title”>Name Your Project</a>
This will change the title at the top left of the page, which links to the index.html (homepage). The browser always looks for and loads index.html on any web address without a filename (the part after the last / on the web address) specified unless instructed otherwise.
Open index.html or reload it in a web browser to see your page title and tab title change.
Step 4:
Find the <h1>Lorem Ipsum …</h1> tag and <p>Lorem Ipsum etc…</p> tags between the <main> (bottom) and </main> (bottom) tags
And replace the headline and introductory paragraph’s Lorem Ipsum content with you own text and reload the webpage to see your changes.
Step 5:
Right click in VS Code’s sidebar and select New Folder and name the folder img.
Right click on the img/ line in the sidebar and select “Open Containing Folder”
This will open the folder in Windows Explorer or Mac Finder
Move an image file of your choice into that folder
Below the <p>introductory paragraph</p> block, add tags that says
<img class=”pure-img” src=”img/filename-to-your-image.jpg” alt=””>
reload the webpage in the browser to see your image added
That’s all for now. Congratulations in advance on your first web page!
Full featured image:
Lost in Mist 