Coder Social home page Coder Social logo

colmaracademy's Introduction

colmaracademy

Final project for Codecademy 'intensive website design' course.

Static page used to practise HTML & CSS. Built to a provided spec but using my own design decisions.

colmaracademy's People

Contributors

jwbackhouse avatar

Watchers

 avatar

colmaracademy's Issues

Responsive

Your media queries kick in at appropriate breakpoints, and responsive units are used throughout - nice work! Good job including the responsive meta tag to the <head> of your HTML so that I could test your media queries and mobile layout through DevTools.

Layout

The layouts of your project closely resemble the design specification, but there are a few discrepancies:

Header:
In the desktop, the icon should be 24px (1.5rem) from the left side:
image
Your project has 24px of padding applied, but the margin: auto adds another 74.5px of margin, displacing the icon on the left side and the navigation links on the right:
image

Keep Practicing:
In this section, the top image of the right column should be even with the top of the main image:
image

image

Footer:
Like the header, the margin: auto has applied 74.5px of margin and affected the positioning of the copyright and links:
image
image
image

In your mobile layout, the Learn Something <h1> should be 32px (2rem) from the bottom of the main image:
image
Your <h1> is 1rem from the bottom of the image:
image

In the Start Learning section, the courses should be slightly above center in their containers:
image
In your project, the courses are centered with 16px of padding:
image

There are other, smaller differences between your project and the design specification as well.

Rubric and Summary

Rubric Score

Criteria 1: HTML Structure

  • Score Level: 4/4
  • Comment(s): HTML implementation enables proper use of media queries.

HTML structure reflects the grouping and flow of content in the web browser.

Criteria 2: Visual Layout for Both Desktop and Mobile Sizes

  • Score Level: 2/4
  • Comment(s): Desktop AND mobile layout match the wireframe in 2+ sections.

Criteria 3: Responsive Design (Media Queries, Responsive Units, etc.)

  • Score Level: 4/4
  • Comment(s): Media queries kick in at appropriate breakpoints.

Responsive units are consistently used, but not always.

Criteria 4: Visual Design and Accessibility (Color Palette, Typography, Transitions, etc.)

  • Score Level: 4/4
  • Comment(s): An accessible color palette was chosen. Typographic considerations were made. CSS transitions were used.

Overall Score: 14/16

Your project Exceeds Expectations - way to go! Just a few tweaks to the layouts in your project and you'll match the design specifications perfectly. For extra practice, use the skills you've learned throughout the course to build a personal site to serve as a portfolio to showcase your abilities. Keep up the excellent work, and happy coding!

HTML and Structure

Your HTML enables the proper use of media queries, and your structure reflects the grouping and flow of content in the browser. Good job!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.