1.3 Create your website!
This is the beginning of your website. Each week you’ll be evolving your website to incorporate what you’ve learned.
- Don’t forget to start and stop your Toggl timer as you work through your assignment!
- Tick off the tasks as you complete them
Get the blog infrastructure up and running
Add an HTML index page.
Remember, HTML is about content only. Styling anything with HTML is a very bad habit - don’t do it!
- [ ] Using the terminal, clone down your new respository.
- [ ] Navigate to your
username.github.io repository and create an
- [ ] Open your project in VS Code with
- [ ] Use the HTML template to create an index page. Think of your index page as your “homepage” or “contents page” that will eventually link to all your blog posts. Your “homepage” will be visible at
- [ ] Give your homepage a title.
- [ ] Remove any unnecessary elements and content. This means any code that doesn’t work or doesn’t do anything.
Add HTML blog posts
If your index page is
username.github.io then your blog posts will be located at
Setup the blog directory
- [ ] In terminal, navigate to your
username.github.io repository and make a directory called
- [ ] Within the blog directory, create a new file called
c1-reflection-blog.html (the c1 stands for cultural).
- [ ] Copy the same HTML template for the index page into your
- [ ] Stage and commit with meaningful commit message (e.g.
setup blog directory).
- [ ] Push to GitHub.
Create your first blog
- [ ] Write your reflections in
c1-reflection-blog.html. Based on the video discuss:
- What’s your take on the DBC/EDA experience?
- What are your impressions?
- How do you see yourself engaging with this type of culture?
- Have your expectations of EDA changed? If so, how?
- Are you excited to participate in this kind of learning environment? Does it make you nervous?
Keep in mind your answers will be visible.
- [ ] Stage and commit with a meaningful commit message (e.g. complete reflection blog).
- [ ] Push your blog to GitHub.
Create your second blog
- [ ] Timebox an hour to read through the time and habit management resources.
- [ ] Using the commandline, create a new file called
c1-time-and-habits-blog.html in the
blog directory. Copy over the same template and create a quick blog post containing your reflections on time and habit techniques:
- which timebox and habits techniques did you try?
- what did you find interesting?
- what worked for you?
- which will you experiment further with?
- [ ] Stage and commit with a meaningful commit message (e.g. complete time and habit blog).
- [ ] Push your blog to GitHub.
Link your blogs to the main page
- [ ] On your
index (home) page, create a href link for each of your blogs. This should enable a person to click on a link and be taken to a blog.
- [ ] Stage and commit with meaningful commit message (e.g. linked blogs to home page).
Make it beautiful/fun with CSS!
Ok, now you can make it pretty. You can play for now, but in future you’ll need to follow best practice or else you’ll make a big mess.
Focus on CSS functionality, not visual design. Do not spend hours tweaking fonts - well, not until you’ve finished all the assignments to a high standard. Spend your time playing with selecting elements, using different CSS properties, and laying out your CSS. It doesn’t have to be very beautiful visually - we’re looking for elegance and understanding in your use of CSS and HTML.
- [ ] Create a
styles directory in the
- [ ] Inside of the
styles directory create a
- [ ] Link your
styles/main.css file to your
index.html file. (Youtube example, 5:08 min or MDN CSS Resource).
- [ ] Repeat and add the
styles/main.css link to the
HEAD of each of your blog posts.
- [ ] Use CSS to make your site look and feel awesome!
- [ ] Stage, commit with a meaningful message and push your changes to your live site!
- [ ] On your campus-specifc Slack channel, share the link to your home page.