- Objective - To create 4 independent webpages, each requiring specific features to be implemented.
- Purpose - To establish familiarity with basic HTML
- Description
- You are provided with four different
html
template files in atemplates
directory at the root of this project. - Using the html tags that you already know, modify the html content so each individual file looks similar to their respective image.
- You are provided with four different
- Begin by forking this project into a personal repository.
- To do this, click the
Fork
button located at the top right of this page.
- To do this, click the
- Navigate to your github profile to find the newly forked repository.
- Clone the repository from your account into the
~/dev
directory. - Open the newly cloned project in a code editor (Visual Studio Code, for example).
- Edit the
syntax_template.html
file to have the appropriate typographical emphasis. - Upon completion of edits navigate to the root directory of your project from your
Git Bash
terminal. From the terminal, execute the following commands:git add .
- adds all of the file-changes in the current directory to staging.
- Tip: execute
pwd
to view your present working directory
- Tip: execute
- adds all of the file-changes in the current directory to staging.
git commit -m "finished edits on 'syntax_template.html' "
- saves staged changes to local repository along with a brief description of changes made.
git push -u origin master
- uploads local repository content to a remote repository.
- The edits should render a webpage which resembles the image below
- Edit the
body_template.html
file to have the appropriate heading tags as well as typographical emphasis. - Upon completion of edits navigate to the root directory of your project from your
Git Bash
terminal. From the terminal, execute the following commands:git add .
git commit -m "finished edits on 'body_template.html' "
git push -u origin master
- The edits should render a webpage which resembles the image below
-
Edit the
models_template.html
file to each of the following features:- heading tag
- typographical emphasis
- hyperlink which references one of the other previously edited webpages.
- Bonus - Implement a mechanism for opening link in new tab upon being clicked.
-
Upon completion of edits navigate to the root directory of your project from your
Git Bash
terminal. From the terminal, execute the following commands:git add .
git commit -m "finished edits on 'models_template.html' "
git push -u origin master
-
The edits should render a webpage which resembles the image below
-
Edit the
headings_template.html
file to each of the following features:- heading tag
- typographical emphasis
- HTML entities
-
Upon completion of edits navigate to the root directory of your project from your
Git Bash
terminal. From the terminal, execute the following commands:git add .
git commit -m "finished edits on 'headings_template.html' "
git push -u origin master
-
The edits should render a webpage which resembles the image below