London 9 - Andriana Saffo - HTML/CSS - Week 1 & 2 - #502
Conversation
Added a new header to include nav bar information
Included styling to nav bar and included HTML content for main page
Button design updated to match template image
Updated HTML file to change links in nav bar from li elements to a elements. Styled HTML page to look similar to reference picture given
Included icons and text to build reference page
Deleted commented out styles and edited style for background image
Background image rendered, footer styled as per reference and nav bar restyled
Added more information to help build site. Some CSS styles removed/commented out to adjust designs
Added span to quotation marks to change colour. Styled additional section of homepage to resemble example
Included a new HTML page for the store page on Karma and a new styling page for the store
Linked index.html and store.html pages. Styled pages
Input divs to help breakup codes into sections to be styled easily with CSS. Changed some values to percentages to help with page responsiveness
updated HTML to include SVG file for check box and styled the box
Styles input to move checkbox next to label
AndrianaOS
changed the title
| width: 25px; | ||
| margin-left: 50px; | ||
| margin-top: 50px; | ||
| margin-bottom: 20px; |
There was a problem hiding this comment.
if you want to make this 1 line instead of 3 you can use the shorthand:
margin: 50px 0 20px 50px;
[top right bottom left]
|
|
||
| footer { | ||
| text-align: center; | ||
| margin: 0 70px 0 70px; |
There was a problem hiding this comment.
another shorthand:
margin: 0 70px;
[top/bottom left/right]
| <a href="store">Store</a> | ||
| <a href="blog">Blog</a> | ||
| <a href="help">Help</a> | ||
| <a href="login">Login</a> |
There was a problem hiding this comment.
semantically: this navigation should be an unordered list of list items that contain anchors
this is helpful for accessibility
<ul>
<li>
<a>
| <img src="img/twitter-icon.svg" alt="twitter logo" class="smicon" /> | ||
| <img src="img/facebook-icon.svg" alt="facebook logo" class="smicon" /> | ||
| <img src="img/instagram-icon.svg" alt="instagram logo" class="smicon" /> | ||
| </div> |
There was a problem hiding this comment.
semantically: this div should instead be an unordered list of list items with anchor tags that wrap images (in that order)
(remember a div has no semantic meaning)
so for accessibility it is clearly understood that it is a list of external social media links
<ul>
<li>
<a>
<img>
| } | ||
|
|
||
| .title-form { | ||
| flex-direction: column; |
There was a problem hiding this comment.
this is missing display: flex
because flex-direction: column on its own will not do anything to a container that has not been defined as a flexbox
| > | ||
| </div> | ||
|
|
||
| <button>Place my order</button> |
There was a problem hiding this comment.
Interesting to know:
When inside a <form> :
<input type="submit">Place my order</input>
Will create a button thats function is to submit the form
And also when inside a <form>
a single <button> with no defined type will default to "submit"
Whereas in this case:
<button type="submit">Submit</button>
<button type="reset">Reset</button>
If you have multiple buttons, it is important to explicitly name their type.
So yours would be:
<button type="submit">Place my order</button>
I know this does not apply in this case (because there is only a single button) but it is good to know for later on.
| } | ||
|
|
||
| button { | ||
| align-content: center; |
There was a problem hiding this comment.
align-content is a property used to adjust flex/grid cells content horizontally/vertically
in order for this to work the element must also be declared as display: flex or display: grid
but the button is not currently a flex/grid container
maybe i am wrong, but i am assuming you are trying to center the button text with this?
| } | ||
|
|
||
| nav { | ||
| float: right; |
There was a problem hiding this comment.
i would recommend trying to make your <header> a flex box
and the <img> (logo) and the <nav> will be the flex children
then separate the flex children using justify-content: space-between to push them to either side of the page (the img to the left and the nav to the right)
you can then apply appropriate padding to flex parent
using float can be quite tricky and cause a lot of headaches and can start doing funky things in terms of page layout if you have multiple floated elements.
margin written in shorthand. button type added. More edits to come
2 participants
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?
Creating the general information and the simple styling
What did you find hard?
Getting the background image to render on the page
What do you still not understand?
N/A
Any other notes?
N/A