This repository was archived by the owner on Jan 14, 2024. It is now read-only.
Glasgow Class 6 - Mandy Cheung - HTML/CSS - Week 3#500
Open
m4ndycheung wants to merge 31 commits intoCodeYourFuture:masterfrom
Open
Glasgow Class 6 - Mandy Cheung - HTML/CSS - Week 3#500m4ndycheung wants to merge 31 commits intoCodeYourFuture:masterfrom
m4ndycheung wants to merge 31 commits intoCodeYourFuture:masterfrom
Conversation
Added cupcake logo image
Added images to index.html
Changed the social icons to appear in a column so it matches the mobile wireframe
added a main grid to align children of body__container added a nested grid for header and footer to allow colour to span from start to end of main grid
Split header into two header sections so that I can create a mobile menu Added space between logo and nav list
Added menu button markup and some classes. Moved nav bar back under logo for now. I've not made a mobile menu before, so keeping it simple for now.
Moved input and label, they were not in the right place. Added ability to toggle menu.
Added grid rules for media query Created a new nav bar to appear at large screen sizes to match wireframe. Moved main image and text to match wireframe.
I put a fixed value of 30px on columns 1 and 12 so that the grid has white space on both sides. Without this, the first column seems to get bigger.
I changed grid-row-gap to grid-gap to solve the issue and edited the size of grid template columns in the 900px media query.
Removed padding, and applied to padding top only.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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?
HTML Markup - adding fonts, changing colours of elements
What did you find hard?
CSS Grid - it's easy to begin with, but as I started adding more items, my grid started moving about in unexpected ways. Using inspect and looking at my grid structure helped a lot with this. Also taking it slowly helped and drawing out my grid before I started coding.
Media queries. It was tricky to use at first - and still is! With more practice I'll get it.
What do you still not understand?
Why my header text isn't staying inside grid column lines 2 / 12.
Any other notes?
It was a lot of fun learning how to make a hamburger menu - I felt amazed and amused by how a menu icon is built in pure CSS! wow.
I could definitely do more to this site, but overall I'm happy with my work and what I learned about media queries and grid.
Netlify: https://transcendent-arithmetic-923379.netlify.app/