Every time you make a change you can press the green play button to see how it looks Note: if you break the code and it stops working, either press ctrl + z to undo your recent changes or you can refresh the browser and the code will go back to its original copyĨ Part 1: Styling final look Once you are happy with the look of the website, you should: Take a screenshot of your work to save it as an image Click Share and you can copy the link in Share Link.
Adjust the placement of the image by changing the values for left and top 4. Look for the elements that represent the images eg.image-1 3. In the left panel, click the file called style.css (note: css means custom style sheet, this is where you can apply styling to elements in your website) 2. Every time you make a change you can press the green play button to see how it looks Note: if you break the code and it stops working, either press ctrl + z to undo your recent changes or you can refresh the browser and the code will go back to its original copyħ Part 1: Styling Adjusting image positions 1. In the h1 element, you can change: the size of the font the colour of the font the style of the font for this one you will need to add the line font-family:sans-serif to the h1 element 5. In the body element, you can change: the font-style try monospace, initial, cursive, verdana or any other fonts you know (tip: try googling css font family ) the background-color - try white or lightblue or if you hover over the colour there you will be able to pick from a whole range of colours the body text color stick with a dark colour like black, dark grey, brown so its easier to read on the lighter background 4. Look for the elements that represent the background colour (body) and the title font (h1) 3. You should see the edit reflected on your home page Note: if you break the code and it stops working, either press ctrl + z to undo your recent changes or you can refresh the browser and the code will go back to its original copyĦ Part 1: Styling improving accessibility Colour scheme & font size 1. Fix the spelling mistake and press the green play button 4. Find the title text it will look something like this: the Droalto Shop - Drone Delivered Gelato 3. If not already open, look for the file called index.html in the left panel 2. It is important to note, there can be many different ways to write code and many different opinions on the best way to implement you code and style a website so you have a creative licence to do what you want here.ĥ Part 1: Styling Fixing spelling mistakes 1.
Below will take you through a step by step guide to help you. We have identified four areas of uplift for the webpage so we can tackle these one at a time.
#SANDVOX BULLET LISTS HOW TO#
Overlapping components could hide information important to the customer.Ĥ Part 1: Styling how to tackle problem Software engineers break down problems into logical steps. 4) Layout The images overlap each other and look a bit mixed up. Another accessibility consideration is to ensure font is large enough to be readable. 3) Font size The paragraph text is quite small. It is better to use contrasting colours such as dark writing on a lighter background. This could affect people who have vision impairment such as colour blindness. 2) Colour scheme The purple writing could be difficult to read on the green background.
#SANDVOX BULLET LISTS PROFESSIONAL#
It is important to check for spelling and grammatical errors as your company s professional reputation. This will help prevent user error which is where a user might perform an incorrect action because they expect the application to function differently.ģ Part 1: Styling identify problems Some areas of the Drolato landing page that could be improved are the following: 1) Spelling mistakes Drolato is spelt incorrectly in the title page as Droalto. It is important the intention of each component of a website is clear to the user. Usability - Users can become quite frustrated when a website is difficult to use due to a bad layout or an unintuitive design. Do you want a simple, seamless look or an advanced space-age technology look? A lot of this can be shown through the theme of your website. Your company's brand - you can make a lasting impression to your customer based on the look and feel of your webpage. This is called making a website accessible to all of our users. 1 Drolato Drone Delivery website Virtual Program Software Engineering Module 2Ģ Part 1: Styling background info Styling the look of your website is important for many reasons: Accessibility - It is also important to think of all of our users such as those who might need larger text sizes or better colour contrast to see components more clearly.
0 kommentar(er)
