Dear Girls,
When I created this group, the main objective was to ensure that you
- realize that there are a lot of resources that are available out there for self-learning
- dedicate a bit of time every day to get better than you were yesterday using those resources
- .. and become capable of building a website within a week.
Based on your submissions throughout the past days, I feel this objective has been more or less successful - all kudos to you. You taught yourself what was needed to get till here.
Personally, I think everyone should know a little bit of HTML and CSS, even if they have no interest in pursuing web development further.
Why?
Because they form the building blocks of the internet. The world around you looks less like a black box when you know how these things are structured underneath. You can even use HTML and CSS to create customized emails and newsletters and resumes and what not!
The first task was intended to slowly ease you into structuring web-pages. Rather than trying to solve the whole problem or build the entire project, making small changes to existing code validates to you that something is happening. By making small changes and seeing the results, you’ll rapidly learn what parts of code affect what parts of the end result.
The second task was intended for you to begin thinking about how you would want a webpage to look. To discover weak spots in your knowledge and to learn how to solve problems when they come by yourselves.
And now it's time to submit your final task.
If your'e happy with your submission for the second task, you can see this as an extension of it. Otherwise, create a totally new HTML & CSS file and get started on this task.
The goal is to create a multi-page website. Read up on how you can achieve that here.
I want you to carefully think about the feel that a potential viewer of your website will get from it. Think about what colors and fonts and structuring you can use to achieve that feel. You can find some beautiful color palettes here. You can know the name of font used in any website using this chrome extension and you can integrate such fonts using Google fonts. There are similar extensions for other browsers as well.
You can also add CSS snippets that are readily available online, like the ones listed here. For example, want to add a number of images and make it look cool? I found this snippet to solve that problem:
Or do you just want your buttons to look less like boring solids and more dynamic? This snippet will help you do that.
To add such snippets, go to the page, scroll down and click 'Run Pen'. On the top left of this object, you'll find the HTML & CSS Code. Copy them into your existing project and place them at the required place inside the body tags in your existing html file. You can copy paste directly into your existing css file, but make sure it doesn't clash with any of your other css rules.
Take care: some of the snippets might not have pure html or css. Do not try to integrate snippets that have scss or other file formats without learning more about it. Do not waste your time on this if it feels complicated.
If you choose to add snippets like these in your project, do make note of its source link and let us know when you make the final submission. While it's okay to use snippets, please don't copy entire website templates.
But do not go too overboard. You needn't have too many items on your site to make it look good. These are just suggestions, you need not follow all of them. Sometimes minimal websites look the best. Whitespace, when utilised well, is beautiful. Simple fonts like Helvetica make your message clear rather than getting users be distracted by extravagant design. Ultimately - ensure that the website is able to convey your message clearly.
- Upload your site into Github and host it using github pages. This is different from just uploading your files to Github. See how you can do that here.
- Make sure your file is initalized with a ReadMe. Mention the snippets you have referred here. If you've added anything new that we haven't talked about in the group before, mention that too. (Read This.)
- Screenshot your website and send it to our group! You will be given a form in which you can send the link to your website, don't send it personally for now.
Deadline for submission in the form is 28th March, 12:00pm.
If you'd like to prepare a website on SHE, you may add sections for
- About SHE
- Our Vision
- Activities So Far
- Links to relevant sites (like Lean In, etc)
- Contact details
- Team behind SHE
.. and so on! It's not necessary that you include all of this. You can even have other sections of your choice. You can refer to this page for information about SHE.
(I'd really suggest you do this because regardless of whichever website ends up winning, you can still get a chance to be a part of the official SHE Web Development Team!)
Look at some of your favorite websites online for inspiration. Right click and select 'Inspect Element' on any page, an interactive console should open up and you can see all of the HTML and CSS used for that page. Try making changes in the console and see how it instantly reflects on your screen.
Fun activity: go to ktu.edu and change the text on the latest notification to read that the results have been released. Take a screenshot and send it to your friends. (No, don't come after me if your friends decide to end you - this self isolation period should help you keep safe for now.) But seriously - do send it in our group, if you figure out how to do this!
It's not necessary to complete the last video on Javascript that was shared inorder to attempt this final project. You can go through it at any time while simultaneously attempting this task. If you do finish it, try to incorporate something innovative using javascript as well. Do also mention this in your ReadMe file.
If anything in this page sounds confusing to you, or if you're stuck when trying to achieve a particular task, the group is still open. I'll also try my best to answer your doubts personally, but I do appreciate it a lot more if you send it to the group first - you can learn so much from each other.