- Notifications
You must be signed in to change notification settings - Fork0
A CSS exercise to practice positioning and layout
MrFootwork/lab-css-spotify-clone
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
This exercise allows you to practice and apply the concepts and techniques taught in class.
Upon completion of this exercise, you will be able to:
- Create a webpage based on provided design and assets.
- Create and link an external CSS stylesheet with an HTML document.
- Display images in a webpage using HTML image tags and CSS
background
property. - Use the CSS
position
property to position elements on a webpage. - Use Flexbox to layout and position elements on a webpage.
- Center content on a webpage, including images and text.
- Submit completed work using Git and GitHub by creating a Pull Request.
Everybody likes music, right? So the odds are that you have heard ofSpotify.
In this lab, we will be building a simplified version of the Spotify landing page:
All of the necessary assets and images are already provided. You might also find it useful to resort to thefull-length PDF version of the website as a reference.
- Fork this repo
- Clone this repo
Upon completion, run the following commands:
git add.git commit -m"done"git push origin master
Create Pull Request so your TAs can check up your work.
You are provided with some assets - in theimages
folder, you will find the necessary images, and the text is ready for you in theindex.html
file. Write your HTML and CSS code in theindex.html
andstyles/style.css
files, respectively. Again, remember to follow the best practices.
The page is split into 4 sections, and we have generously cut it down into pieces!
In general, website designs don't just come out of the wild, so you will likely have mockups/sketches that you will have to integrate. Therefore, it is a good practice to help you cut the website into pieces before coding to help youstructuring your HTML.
The last section isn't as detailed as the others ones, good luck 😄
Let's do this!
- The navbar should be
position: fixed
. - Align the logo to the left and the
ul
with the links to the right, either usingfloat
orflex
.
- Check outthis guide on centering things.
- It looks like the
div
s take up about a third of the container each. How can you represent this in code?
- It looks like we have 2 main sections, a containing element with the text flowing from top to bottom and the image of the Spotify player on the right.
- Position the Spotify logo absolutely according to thegreen
div
.
Happy coding! ❤️
About
A CSS exercise to practice positioning and layout
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Languages
- HTML94.6%
- CSS5.4%