Embedded Files
Web Development Skills
Web Development Skills
Task One: Learn how to use Glitch and Git Hub together. Your teacher will take you through why we are using these software and process but the videos are really useful if you get stuck.
1) Sign up to Glitch and create a website name - profile-website
Add a heading and some text.
2) Sign up to GitHub and create a repository for your profile-website (the connecting Glitch and Github video can help with this).
3) Export your profile-website to the GitHub repository you created and give it the commit comment as version 1?
4) Check Github to see if the export worked and accept the pull request. Add comments if necessary.
5) Change the background colour on the website and export it to GitHub as Version 2.
Task Two: Recapping HTML and CSS
1) If you did not take year 11 DTEC you must complete the course below to learn the content required to be able to complete the level one course. This is also recommended for students who feel they need a recap on what they learnt last year.
You will need to complete this course in your own time (e.g. at home or during your study spell).
Task Three: Responsive & mobile first web design
This year your website will need to be designed to look and function well on at least 2 different screen-sizes.
1) Watch the video to the right to get you started on how to design responsively.
Task Four: Breakpoints & Media queries
As a starting point lets look at how web developers actually make their sites responsive.
Breakpoints are the point a which your site content will respond to provide the user with the best possible layout to consume the information. We can use media queries with breakpoints to do this.
1) Go through the slides to the right to learn about break points and media queries.
2) Complete the activities from slide 7.
3) Do some of your own research on topic to expand your understanding.
Task Five: Using the W3.CSS framework to create your site
W3. CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creating faster, beautiful, and responsive websites.
You are able to use W3.CSS for your website assessment but you will need to use your own knowledge of HTML , CSS & Media queries to customize your site.
There are great tutorials here if you wish to go on ahead:
Through working through the tasks you will make this website https://12dtec-w3.glitch.me/index.html
Task 6: Validating code
Validating your code is simply comparing it to W3C standards. It’s no different than comparing a sentence you write to the rules of grammar for the language you wrote it in. You may have written code that works, but is not 100% correct. For example, it might be missing a closing tag (/>).
For example - <p>This is a sentence
1) Either watch the teacher's demonstration or the video, to learn how to validate (check) that your code is correct.
2) Use the link below to check the HTML/ CSS you have been writing for two of the above tasks.
3) If there are errors - try and fix them. You may need to work with others, or do some research to figure out what they mean.
Task 7: Optimizing images for web
In your website project you will be expected to resize your images to the size required, and compress your images so they load efficiently. You will also need to use alt tags for accessibility.
Useful links:
Image re-sizer - http://www.resize-photos.com/
Compress JPEG - https://tinyjpg.com/
Compress PNG - https://tinypng.com/
Alt Attribute - https://www.w3schools.com/tags/att_img_alt.asp
Task 8: Extension
Image slide shows & Cool Effects
There are a number of cool elements you can add to your website using W3.CSS, for example image slideshows, animations and Models.
1) Have a look at the links below.
2) Create a new page on your W3.CSS website and trial at least three elements (they could be different versions of the same element). This can be used as evidence of trialing in your assessment.
Image slide shows -https://www.w3schools.com/w3css/w3css_slideshow.asp
Image modals - https://www.w3schools.com/w3css/w3css_modal.asp
Animations - https://www.w3schools.com/w3css/w3css_animate.asp
Page updated
Report abuse