HTML
For this prompt, delete the old index.html and create a new one with the same name. In other words, for now we will not be using the 11ty templates.
Since this is supposed to be your website, the prompts will not focus on content/layout, but more on functionalities
and technical aspects of websites. That being said, we are ACM Design after all - a good number of requirements will focus on
good UX practices, such as implementing responsive design.
As a starter, we will be making a landing page, i.e. the first thing a user will see when visiting your website.
In index.html, add the following content:
- Your name
- A short bio, no more than 10 or so words.
- A picture. This can be a picture of you, some graphics to represent your field of focus, or anything you think is appropriate.
Lastly, make sure your index.html has the following tags placed appropriately:
<!doctype><html><head><body>
...and uses the title and meta tags to define the following for the website:
- title
- description
- keywords
- viewport set to width fo device, and scale of 1
CSS
In the same directory as index.html, create a file called style.css
Add the 'link' tag to your index.html to load the contents of the CSS file into your HTML file. For the href attribute, you should set it to "/style.css":
Write CSS code in your style.css
file so your webage satisfies the following conditions:
- Your name is displayed in a large (> 30px) font, in a dark color (< #404040)
- Your bio has a font size smaller than your name, and a thinner color.
- In desktop, your picture is placed adjacent to your name and bio. In other words, do not simply stack your name, bio, and pictures vertically. This is where CSS grid may come to help.
- On mobile devices, your name, bio, and pictures are stacked vertically, so it can fit on vertically long screens.
- Your webpage, name, bio, and photo has appropriate margins set so they don't touch each other.
For all of these specs, unless specified you can do whatever you want. If there is anything ambiguous or unspecified
in the spec and you wonder "Can I do A?", "Is B allowed?", the answer will always be yes - be creative!