Create a three page biographical website + blog feed. This site may include the following elements, bio / profile statement, resume, contact info ( can be made up ), a contact form, a head shot. You should also create two sample blog posts with images and text ( lore ipsum is fine)
Your site, must utilize your own custom build of the Underscores starter theme.
It should employ a custom web font, a styled na bar with fluid design, a two column layout for your page / feed content and the sidebar, and a cohesive color pallet and consistent page layout.
Your site should use bootstrap 4 ( you will need to add this to your underscores theme)
Step 1:
Go to the underscores website and download a fresh copy of the theme, for the Theme Name enter “Your Name” + Bio then click Generate.
Step 2:
Now add the newly created theme files to your WordPress install in your local dev environment.
Step 3:
Load the new created theme files directly into your brackets editor
Open up the git plugin ( if it is not already open ) by clicking the icon the the right sidebar.
Check the checkbox next to the Commit button, to stage all of your files, then click Commit.
Step 4:
Now your good to go, and you can start making changes to your theme. First things things, go to stye.css and update the description.
Now save it, then click the checkbox next to the commit message. After that press Commit.
Enter a commit message, also note how it shows your changes in green and the original code in pink.
Your message should be descriptive so it can be helpful to your future self, should you need to look back though your commits, in an attempt to revert your changes and un-break your site. Moving forward I recommend committing changes to individual files as you save and make changes.
For a much deeper look into Github watch Learning Git Hub
Step 5.
Install your new starter theme on your WordPress install running on localhost:8888. You should see it now in the theme chooser in your dashboard, click activate and then view your site
it should look like this.
Step 6:
-
Start customizing the themes appearance, begin by adding a font from google fonts.
-
Next add Bootstrap to your project. Read this For step by step instructions
-
If that goes well and your feeling ambitious, you can attempt to add the custom bootstrap 4 nav walker.
-
Note this is a great time to make sure you are up to date on your commits and possibly create a new branch before you attempt to add the nav walker
Step 7
Add your own custom css file and enqueue that in your functions.php. Next add markup to your index.php and page.php to create a two column markup using bootstrap’s grid.
Step 8
Create custom page templates for each of the pages you will be designing on your site. For example page-about.php, page-contact.php, etc. you can use these to add custom HTML code to your site and build your page layouts like you would a static html site. Theres are some differences though, for example if you want to add a link to an image file on your. page template your code will need to look something like this
img class="img-responsive" src="<?= get_template_directory_uri(); ?>/images/iamge.jpg" alt=" alt text">
Recent Comments