Manchester NW_4-Erin_Dyson-HTML/CSS-4 - #62
Conversation
I have set out most of the HTML and CSS. Still need to make HTML semantic, and need to finetune the CSS so that all the elements are spaced and styled correctly.
Started to make the page semantic by adding article elements in <main>. I have also added a 3rd article. Need to add links.
Added links to all the articles. Made first:child for the first article to make it slightly bigger. Still need to fix the header (it doesn't stretch evenly).
Changed some styling elements, and worked on some responsivity. Need to do more work to get this page properly responsive. Hoping to avoid loads of @media requests
| <header><div id="wrapper"> | ||
|
|
||
| <div><image class="h1-image-1" | ||
| src="https://1gew6o3qn6vx9kp3s42ge0y1-wpengine.netdna-ssl.com/wp-content/uploads/prod/sites/5/2020/12/cyver.jpg" | ||
| alt="Locked paddlocks with a blue background"></image></div> | ||
| <div> | ||
| <h1> Cyber Security in the 21st Century</h1> | ||
| </div> | ||
| <div> | ||
| <image class="h1-image-2" | ||
| src="https://1gew6o3qn6vx9kp3s42ge0y1-wpengine.netdna-ssl.com/wp-content/uploads/prod/sites/5/2020/12/cyver.jpg" | ||
| alt="Locked paddlocks with a blue background"></image> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| </div></header> |
There was a problem hiding this comment.
There are a couple of improvements you can make in terms of code formatting here - for example putting child elements on a new line, removing some of the extra whitespace etc.
Also - the best tag to use for images is (it is self closing).
will work in most browsers but is not an official part of the HTML tag set! which can be confusing
|
|
||
| <div><image class="h1-image-1" | ||
| src="https://1gew6o3qn6vx9kp3s42ge0y1-wpengine.netdna-ssl.com/wp-content/uploads/prod/sites/5/2020/12/cyver.jpg" | ||
| alt="Locked paddlocks with a blue background"></image></div> |
|
Well done on this project! This is a good effort and the site works well in terms of responsiveness - I know that you have identified from the subsequent course work that you could adopt a "mobile first" approach to this using some of the tools we have now covered which would help to tidy up some of the CSS etc a couple of more specific observations:
But overall this is very good! |
|
Your coursework submission has been closed because nobody has interacted with it in six weeks. You are welcome to re-open it to get more feedback. |
Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in
HOW_TO_MARK.mdin the root of this repositoryYour Details
Homework Details
Notes
What did you find easy?
Aligning text with inline elements
What did you find hard?
Working out how to get 3 elements (2 images, 1 text) to display across the width of the screen
Also working out why some changes won't overide a selector with lower specificity
Making the website properly resposive